CSS

css要点：

在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点。

百分比是相对父级元素的，浏览器尺寸的改变，就是根节点html的长宽改变，我们可以用%来将浏览器尺寸和元素尺寸联系起来，做到自适应。auto是很多尺寸值的默认值，也就是由浏览器自动计算。首先是块级元素水平方向的auto，块级元素的margin、border、padding以及content宽度之和等于父元素width。使用auto属性在父元素宽度变化的时候，该元素的宽度也会随之变化。当该元素被设为浮动时，该元素的width就变成了内容的宽度了，由内容撑开，也就是所谓的有了包裹性。overflow | position:absolute | float:left/right都可以产生包裹性，替换元素也同样具有包裹性。

子元素设置为浮动之后，父对象的高度就坍塌了，需要设置父对象后的元素清除浮动，这样父对象的高度才能被浮动子元素撑起来了。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/* For modern browsers */

.cf:before,

.cf:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}

 

.cf:after {

    clear: both;

}

 

/**

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */

.cf {

    *zoom: 1;

}

给需要清除浮动的块级元素添加cf class，就可以使之包含浮动元素。

此法相当于用CSS实现了方法一，即用CSS在父级元素结尾增加了一个元素，并给它应用了clear：both属性。

普通流布局：display : inline-block，使用inline-block之前先处理点小障碍：inline-block元素会有4px左右的空隙，这个是因为我们写代码时候的换行符所致。解决办法很简单：在inline-block的父元素中设置样式font-size：0；letter-spacing: -4px; 然后设置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px;  恢复正常的显示。inline-block默认是基线对齐的，而inline-block的基线又跟文本基线一致，所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可。

分有文字和无文字两种情况：

1）无文字：容器的margin-bottom下边缘。与容器内部的元素没一毛钱关系。

2）有文字：最后一行文字的下边缘，跟文字块（p,h等）的margin、padding没关系！注意是最后一行，无论文字在什么子对象容器内在什么位置都没关系，浏览器会找到最后一行文字对齐底部。

        

flex里面的基线是第一行文字的底部

下列是一份优先级逐级增加的选择器列表：

• 通用选择器（*）
• 元素(类型)选择器
• 类选择器
• 属性选择器
• 伪类
• ID 选择器
• 内联样式

:not 否定伪类在优先级计算中不会被看作是伪类. 

.opacity50 {

-webkit-opacity: 0.5;

    -moz-opacity: 0.5;

    -khtml-opacity: 0.5;

    opacity: 0.5;

    filter: alpha(opacity=50);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

}

.clearfix:after

{

    font-size: 0;

    display: block;

    visibility: hidden;

    clear: both;

    height: 0;

    content: '\0020';

}

.clearfix

{

    *zoom: 1;

}

.ellipsis

{

overflow: hidden;

text-overflow: ellipsis;

-o-text-overflow: ellipsis;

white-space: nowrap;

width: 100%;

}