CSS笔记

1、优先级

1.1、优先级高低

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通用选择器(*) > 继承的样式

1.2、权重

内联样式1000>id选择器100>类选择器10>标签选择器1

权重的进制是并不是十进制，CSS权重进制在IE6为256，后来扩大到了65536，现代浏览器则采用更大的数量。

1.3、多个选择器优先级计算

选择器的优先级由4个部分（a, b, c, d）组成：

1. 如果有内联样式，a = 1 ，否则 a = 0
2. b 为ID选择器出现的次数
3. c 为类选择器、属性选择器和伪类出现的总次数
4. d 为标签选择器和伪元素出现的总次数

比较规则为：

从左到右进行比较，数值较大的优先；如果相等，则向右比较下一位，数值较大的优先；如果4位数全部相等，则后声明的优先。

1.4、！important

优先级大于内联样式

2、css属性

display: block;和display: inline-block;的区别：

display: block; 会在当前元素前后换行

display: inline-block; 不会在当前元素前后换行

3、常用样式

3.1、超过n行显示...

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;  /*指定行数*/
    -webkit-box-orient: vertical !important;

难理解的点

margin和padding

margin和padding对行内元素是否有效？

答：

行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的；
行内元素的padding-left、padding-right、margin-left、margin-right属性设置是有效的；
行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。

padding-left和padding-right对内联元素有效；padding-top和padding-bottom对内联元素无效，虽然浏览器有显示效果，但不会对其它元素产生影响（其它元素会占据上下内边距的位置）（对于内联元素建议不要使用padding-top和padding-bottom）

margin和padding对img元素的影响？

答：

margin对img有效，无影响

img设置padding，图片会被挤压，设置圆角也会无法显示，img建议不要使用padding

拓展：

width和height对内联元素无效

margin: auto;

如果"margin-top"或"margin-bottom"为"auto"，则其使用值为0

盒子模型

用声明使用标准盒子模型，假如不用声明，那么各个浏览器会根据自己的标准去解析网页

box-sizing: content-box; 设置为标准盒子模型

box-sizing: border-box; 设置为ie盒子模型

标准盒子模型

ie盒子模型

概念

实际宽度： "content"+"padding-left"+"padding-right"+"border-left"+"border-right"

对标准盒子而言，实际宽度等于标准盒子的width+"border-left"+"border-right"+"padding-left"+"padding-right"；对于ie盒子而言，实际宽度等于ie盒子的width

width和height

块级元素：width，height一般默认为100%

width: 100%;和width: auto;的区别？

实际宽度也就是"content"+"border-left"+"border-right"+"padding-left"+"padding-right"，那么，对于标准盒子模型，width就是"content"，对于ie盒子模型，width是"content"+"border-left"+"border-right"+"padding-left"+"padding-right"

答：

width: 100%; 子元素的width=父元素的content的宽度

width: auto; 子元素的实际宽度+"margin-left"+"margin-right"=父元素的content的宽度

总结：

浏览器效果相同，不论是标准盒子模型还是盒子模型，使用width: auto; 都不会溢出

不论是标准盒子模型还是盒子模型，使用width: 100%; 都可能会溢出

first-child和first-of-type

div:first-child：选择div的父元素下第一个子元素是div的元素

div:first-of-type：选择div的父元素下首个div元素

float

浮动会脱离文档流

清除浮动，clear: both; 清除浮动只能影响使用清除的元素本身，不能影响其他元素