选择器
class(类选择器)和id(选择器)
class:类选择器，类名自己指定，多个元素可拥有同一个类名，类选择器是以英文句号（.）开头的
id:选择器，设置元素的id属性为该元素的定制id,每个id在文档中必须唯一，ID选择器是以#开头的
举例:
p标签同时具有class属性和id属性
<p class="key" id-="principal">
id 属性值 principal必须在文档中是唯一的；
但文档中的其他标签可以有和p相同的 class 属性值key.
在css样式表中，下面的规则使所有属性class=key的元素文字为绿色
.key{
color:green;
}
下面的规则使id = principal的文字变为粗体
#principal {
font-weight: bolder;
}
css规定具有更高确定度的选择器优先级更高。
确定度：id选择器>类选择器>tag selector(标签选择器)
如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高
伪类选择器
CSS伪类pseudo-class加在选择器后面的用来指定元素状态的关键字
基于关系的选择
| 选择器 | 选择的元素 |
|---|---|
| A E | 元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) |
| A > E | 元素A的任一子元素E(也就是直系后代) |
| E:first-child | 任一是其父母结点的第一个子节点的元素E |
| B + E | 元素B的任一下一个兄弟元素E |
| B ~ E | B元素后面的拥有共同父元素的兄弟元素E |
语法技巧
注释以/* */结束
选取器组，可以过个选取器使用同一个样式
如：
h1,h2,h3 {color:navy;}
内容
CSS可以在元素的前后插入文本：在选择器的后面加上::before
或者 ::after
，在声明中，指定 content
属性，并设置文本内容。
举例：
在所有雷鸣包含ref的元素前面加上Reference:
.ref::before {
font-weight: bold;
color: navy;
content: "Reference: ";
盒模型
即元素，内边距，边框，外边距
border：边框
样式包括
- solid
- dotted
- dashed
- double
- inset
- outset
- ridge
- groove
文本布局：
text-align:内容对其。left，right，center，justify
position
属性:
relative
通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。fixed
为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。absolute
为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。static
默认值。当明确要关闭位置属性时使用。
和 position 属性(除了 static)一起使用的, 有下列属性: top, right, bottom, left, width, height 通过设置它们来指定元素的位置或大小。
举例：
比如，我们想要两个元素叠加，具有层级关系，css没有z轴的概念，但是我们可以设置一个父容器postion:releative,然后两个子容器都为position:absolute，这样两个子容器都会存在相对于父容器的指定位置，比如magin:0px,top:0px,left:0px后者覆盖前者。
display属性
block：块级元素
div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。
inline：行内元素
span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。
none:不删除元素的情况下影藏或显示元素
举例：
#main {
width: 600px;
margin: 0 auto;
}
/**
<div id="main">
设置块级元素width,防止撑满容器，然后外边距auto，可以让其居中显示，然后剩余的宽度会一分为二成为左右外边距。
有时候用max-width替代width在移动设备更好
**/
box-sizing
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
float属性可实现文字环绕图片
img {
float: right;
margin: 0 0 1em 1em;
}
flexbox
在css中要使用flexbox的元素，需要指定
display : flex
或者
display : inline-flex
方向(Direction)：
flex-flow是flex-direction和flex-wrap属性的缩写，决定弹性项目如何排布
行(Line)：
根据flex-wrap,弹性项目可以排布在多行或者单行
尺寸(Dimension):
min-height与 min-width 属性初始值将为 0。
flex
属性是 flex-grow
、flex-shrink
和 flex-basis
属性的简写，描述弹性项目的整体的伸缩性。
