1、文本
（1）颜色 - color:#fffff;
（2）字体 - font-family:'宋体'
（3）粗细 - font-weight:[normal|bold|数值]
（4）字体大小 - font-size:30px
（5）阴影 - text-shadow:X方向偏移量 Y方向偏移量 模糊程度 颜色
（6）文本水平对齐 - text-align:[left|center|right]
（7）文本缩进 - text-indent:50px
（8）文本修饰 - text-decoration:[overline|underline|line-through]
（9）连续文本断行 - word-wrap:break-word;
（10）文本超出块元素，过长内容用省略号表示
例子：
p{
white-space:nowrap; //不换行
text-overflow:ellipsis; //省略号
overflow:hidden; //超出的内容隐藏
}
2、宽/高/行高(适用块元素)
宽 - width:100px;
高 - height:100px;
行高 - line-height:100px;
(当高度和行高的值相等时，文本会在块元素中垂直居中)
3、背景色/背景图片
背景色 - background-color:#000;
背景图片 - background-image:url(../img/img.jpg);
背景图片不重复 - background-repeat:no-repeat;
背景图片横向重复 - background-repeat:repeat-x;
背景图片纵向向重复 - background-repeat:repeat-y;
背景图片大小 - background-size:[contain(包含)|cover（宽高不变、铺满整个容器，溢出部分不显示）];
- background-size:[宽(像素或者百分比) 高(像素或者百分比)];
背景图片位置 - background-position:[left|right|top|bottom];
- background-position:X Y; //X方向,值可以像素或者百分比；Y方向，值可以像素或者百分比
- background-attachment:[scroll|fixed]
4、边框
border:solid 20px red; //样式 大小 颜色（次序不分先后）
border-radius:5px; //设置边角的弧度大小（像素或百分比）
border-collapse:[separate(边框分开)|collapse(边框合并)];
border-style:[solid(实线)|dotted(点状)|dashed(虚线)|double(双线)|groove(凹槽)|ridge(垄状)|inset(内凹)|outset(外凸)]
5、元素的显示与隐藏
（1）还占用页面空间
visibility:[visible(显示)|hidden（隐藏）];
（2）不占用页面空间
display:none;
6、盒子模型
HTML文档中的元素是以文档流方式出现的，显示顺序默认为从上到下，从左到右；
每个元素都是以矩形的形式被显示，这个"矩形"的内容包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）等几个要素，这就是盒子模型；
CSS通过display设置元素的盒子类型:display:[none|block|inline|inline-block|table-cell|flex];
|-- none，隐藏元素，并且不占文档的空间
|-- inline，行内元素，不会使得后续元素另起一行；不可以设置宽和高
|-- block，块元素，宽度百分百，独占一行，会使后续元素另起一行
|-- inline-block，行内块，具有inline和block的特性
|-- table-cell，会使对应元素具有<td>标签的特性
|-- flex，Flexible Box 的缩写，意为"弹性布局"
7、盒子内外边距
（1）内边距（块元素边框与其元素里面内容的距离）
padding-left|right|top|bottom
padding:上 右 下 左
padding:上下 左右
（2）外边距（块元素边框与其周围相邻元素之间的距离）
margin-left|right|top|bottom
margin:上 右 下 左
margin:上下 左右
margin:0 auto (可以让元素水平居中)
8、盒子大小：box-sizing
box-sizing:[content-box(默认)|border-box]
当值为"content-box"时，块元素的width和height不包含border和padding的值
当值为"border-box"时，块元素的width和height包含border和padding的值
9、盒子阴影:box-shadow,盒子阴影，依次: 横向偏移量 纵向偏移量 阴影模糊半径 颜色
例子：
div{
box-shadow:2px 10px 10px;
}
10、opacity,透明度，值范围0至1，0表示完全透明，1表示完全不透明
例子：
div{
opacity:0.5;
}
11、overflow,用于设置内容在指定宽度、高度的块容器中如果溢出的显示方式。
a）overflow:visible,内容溢出也照样显示，默认。
b）overflow:auto,自动，如果内容没溢出，则正常显示，如果溢出，包含内容的容器将显示滚动条。
c）overflow:scroll,不管内容有没有溢出，包含内容的容器都显示滚动条。
d）overflow:hidden,内容有没有溢出，隐藏溢出的内容。
e）overflow-x指定横向溢出显示方式；overflow-y指定纵向溢出显示方式
例子：
div{
width:200px;
height:200px;
overflow:auto;
}
12、浮动
float：[left|right] //设置浮动
clear:[left|right|both] //清除浮动
13、定位：position:static|relative|absolute|
（1）static:默认属性，按照常规文档的内容流进行定位，即从左到右、从上到下
（2）relative:相对定位，属于常规文档流（即static定位）
的一部分，它相对于它在文档流所在的位置通过设置left、top、right、bottom进行定位。
（3）absolute:绝对定位，绝对定位的元素不属于常规文档流（即static定位）
的一部分，它从文档流分离，进行独立定位。
a）自适应内部元素的宽度（如果是div,宽度不再默认百分百）
b）如果没有设置left、top、right、bottom属性，默认跟在前面的正常文档流后面，
而覆盖后面的正常文档流元素；如果设置left、top、right、bottom属性，
默认相对于浏览器窗口进行定位。
c）absolute定位的各个元素，后一个覆盖前一个;但可以通过z-index设置层级。
d）如果absolute定位元素有一个离它最近的且进行relative定位的父级元素，
则它相对于这个relative定位的最近父级元素进行定位。
（4）fixed:固定定位
固定位的元素不属于常规文档流（即static定位）
的一部分，它从文档流分离，进行独立定位。
a）相对于浏览器窗口进行定位。
b）不会随文档其他部分而滚动。
14、调整层顺序：z-index
值最大在最上面。
例子：
div{
z-index:99;
}
15、弹性布局
通过设置元素的display属性为"flex"，实现弹性布局。
Flex是Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
采用Flex布局的元素，称为 Flex 容器（flex container）；它的所有子元素自动成为容器成员，称为Flex条目（flex item）。
（1）主轴与交叉轴
弹性布局容器默认存在两根轴：
|-- 主轴（main axis），默认水平方向，flex item从左到右排列
|-- main start，主轴的开始位置
|-- main end，主轴的结束位置
|-- 交叉轴（cross axis），默认垂直方向，flex item从上到下排列
|-- cross start，交叉轴的开始位置
|-- cross end，交叉轴的结束位置
（2）flexbox容器属性
|-- 主轴的方向，flex-direction:row | row-reverse | column | column-reverse
|-- row，默认值，主轴为水平方向，item从左到右靠左上角对齐，开始位置在左端
|-- row-reverse，主轴为水平方向，item从右到左靠右上角对齐，开始位置在右端
|-- column，主轴为垂直方向，item从上到下靠左上角对齐，开始位置在上端
|-- column-reverse，主轴为垂直方向，item从下到上靠左下角对齐，开始位置在下端
|-- 是否换行，flex-wrap:nowrap | wrap | wrap-reverse
|-- nowrap，不换行
|-- wrap，换行，第一行在顶端，item从左到右排列靠左上角对齐
|-- wrap-reverse，换行，第一行在下端，item从左到右靠左下角对齐
|-- flex-flow，flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
|-- 主轴对齐方式，justify-content:flex-start | flex-end | center | space-between | space-around
|-- flex-start，靠main start对齐，比如：当flex-direction:row时，左对齐；当flex-direction:column时,左上对齐；
|-- flex-end，靠main end对齐,与flex-start相反；
|-- center，所有item居中对齐，比如：当flex-direction:row时，水平居中；当flex-direction:column时,垂直居中；
|-- space-between，两端对齐；
|-- space-around，每个item两侧的间隔相等，item之间的间隔比item与边框的间隔大一倍；
|-- 交叉轴对齐方式（单行），align-items: flex-start | flex-end | center | baseline | stretch
|-- flex-start，靠cross start对齐
|-- flex-end，靠cross end对齐
|-- center，所有item居中对齐
|-- baseline，根据文字的基线对齐
|-- stretch，默认值，如果item的高度没有设置或设置为"auto"时，item的高度会被拉伸至父元素的高度
|-- 交叉轴方向多行item对齐方式，align-content:flex-start | flex-end | center | space-between | space-around
|-- flex-start，各行item,靠cross start对齐；
|-- flex-end，各行item,靠cross end对齐；
|-- center，各行item居中对齐；
|-- space-between，各行item两端对齐（cross start端和cross end端）；
|-- space-around，各行item的行距相等，item行间的间隔比item与边框的间隔大一倍；
|-- stretch，默认值，如果item的高度没有设置或设置为"auto"时，各行item的高度会被拉，直至将各行item填充整个父元素的高度
（3）flexbox成员(flex item)属性
|-- order:<number>
设置item的排列顺序，值越小，越靠近flex start；默认值为0。
如，order:2
|-- flex-grow:<number>
设置item在主轴方向的扩展比例；默认0，不放大。
如果所有item的flex-grow值相同（大于0），则所有的item大小比例一致（等比）；
flex-grow值越大，大小比例越高，反之越小。
如，flex-grow:2
|-- flex-shrink
设置item在主轴方向当容器被压缩时的收缩比例；默认1。
flex-shrink值越大，被压缩的空间越多，即其将占用的空间越少；反之占用的空间越多。
如，flex-shrink:2
|-- flex-basis: <length> | auto;
设置item在主轴方向的伸缩基准值（水平为width，垂直为height）,默认值为auto，即item原本大小；
如果item本身没有设置width或height时，大小比例为flex-basis的值；
如果item本身设置了width或height，则flex-basis的值：0 <= flex-basis <= width或height。
|-- flex:<flex-grow> <flex-shrink> <flex-basis>，
flex-grow、flex-shrink、flex-basis的简写，默认值为：0 1 auto。
当flex:none时，flex-grow: 0;flex-shrink: 0;flex-basis: auto;
当flex:auto时，flex-grow: 1;flex-shrink: 1;flex-basis: auto;
当flex:0 auto时，flex-grow: 0;flex-shrink: 1;flex-basis: auto;
当flex:1时，flex-grow: 1;flex-shrink: 1;flex-basis: 0%;
|-- align-self: auto | flex-start | flex-end | center | baseline | stretch(默认值)
与align-items类似，align-self只是对单个item设置交叉轴的对齐方式
16、关于居中样式
（1）、块元素内容居中
text-align:center
（2）、块元素水平居中
margin:0 auto
（3）、绝对定位的块元素水平、垂直居中
|-- 样式
width:块元素宽度;
height:块元素高度;
left:50%;
top:50%;
margin-left: -(块元素宽度/2);
margin-top: -(块元素高度/2);
|-- 例子
width:400px;
height:200px;
left: 50%;
top:50%;
margin-left: -200px;
margin-top: -100px;
（3）、flex box水平、垂直居中
display:flex;
justify-content:center;
align-items:center;