笔记：2016-06-20

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），不同弹窗气泡之间可在三位数之间调整；

http://jigsaw.w3.org/css-validator/

 

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:不占位置)