1.1 圆角矩形 （border-radius:）
1、border-radius: 1em ;
2、border-radius: 50% ;
3、border-radius: 宽高一半（px）；
4、border-radius: 左上角 右上角 右下角 左下角；
1.2 Footer部分布局
1.3 清除浮动（闭合浮动）
清除浮动的目的：就是为了解决子盒子浮动，父盒子高度为0的问题。
1、clear： both ;
2、Overflow: hidden ; (缺点： 超出部分，会被隐藏。)
3、伪元素法；
.clearfix: after {
Content: “”;
Height: 0;
Overflow: hidden;
Visibility: hidden;
Display: block;
Clear: both;
}
Clearfix {
*zoom: 1; /*兼容IE67*/
}
4、双伪元素法；
.Clearfix:after, .clearfix: before {
Content: “”;
Display: table;
}
.Clearfix: after {
Clear: both;
}
.Clearfix {
*Zoom: 1; /*兼容IE67*/
}
1.4 量取高度
1.5 Table栏
OUT OF FLOW
一个元素如果它是浮动、绝对定位或根元素，则被称为排版流之外out of flow的元素。
影响标准流布局‘display’、 ‘position’ 与 ‘float’ 的关系
影响框的生成和布局的三个属性——’display’，’position’和’float’
BFC
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
哪些元素会生成BFC
根元素 html
float属性不为none 浮动框
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex 非块框的块容器
overflow不为visible的块框。这就是为什么我们经常用overflow:hidden去清除内部浮动的原因
触发IE的hasLayout特性
BFC 作用
解决清除浮动问题
解决margin 合并问题
多栏布局
CSS规范小点
文件
CSS 文件使用无 BOM 的 UTF-8 编码
缩进
使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符
空格
1.选择器 与 { 之间必须包含空格
2.属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
3.列表型属性值 书写在单行时，, 后必须跟一个空格。
选择器
1.当集体声明多个 selector 时，每个选择器声明必须独占一行。
2. >、+、~ 选择器的两边各保留一个空格。
属性
1. 属性定义必须另起一行。
2. 属性定义后必须以分号结尾。
清除浮动
当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。
其他
1.选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
2. 在可以使用缩写的情况下，尽量使用属性缩写。
3. 使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。
4.文本内容必须用双引号包围。
5.当数值为 0 - 1 之间的小数时，省略整数部分的 0。
6.长度为 0 时须省略单位。 (也只有长度单位可省)
7.url() 函数中的路径不加引号。
8.RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()
9.颜色值可以缩写时，必须使用缩写形式。
10. 颜色值不允许使用命名色值。
11. 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
12. font-weight 属性必须使用数值方式描述。
13. 层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间调整；
1.1 Js控制a链接禁止跳转
1 <a href=”javascript:;” ></a>
2 <a href=”javascript:void(0);” ></a>
1.2 半透明
1 opacity：0.5； 缺点：盒子半透明，里面的内容也跟着半透明。
2 background: rgba(0,0,0,0.5);
background: rgba(0,0,0, .5);
1.3 层级
层级是只有定位之后才有的属性。和浮动没有关系。
使用方式是： 盒子必须添加定位。然后，我们还可以用
：z-index 这个属性来控制层级的值。
定位的盒子，层级默认为0。而且从左往右以此递增值，最高不过1。
定位：不一定不占位置。（relative:占位置的）
浮动：一定不占位置。他不会搞过定位。（absolute:不占位置)