CSS中的重点

一、CSS三大特性

1.1 继承性

给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性。 
并不是所有的属性都可以继承,以color/font-/text-/line/list-开头的属性可以继承。（text-decoration不可继承）

继承性中的特殊性 
- a标签的文字颜色是不能继承的 
- h标签的文字大小是不能继承的

合理使用继承可以减少冗余的CSS代码 

1.2 层叠性

当多个选择器选择同一个标签并设置相同的属性时，样式会发生重叠，这时候元素所应用的样式就是优先级最高的选择器所设置的样式。 

1.3 优先级

行内样式>内联样式>外部链接样式 
!important>id>类>标签>通配符>继承>浏览器默认 
就近原则：当优先级一样时离目标元素越近的样式，越先运用

优先级权重（继承不用计算） 
当使用组合选择器控制同一个标签时，不同的选择器有不同的权重。根据计算的权重判断组合选择器的优先级。

权重的计算规则 
◦首先先计算选择器中有多少个id, id多的选择器优先级最高 
◦如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高 
◦如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高 
◦如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的。

这里有一个问题？ 
网上说类选择器的权重是10，标签选择器的权重是1，我用11个标签选择器组合选中一个元素并设置样式，然后用该元素的类选择器设置样式，此时元素的样式应该由权重为11组合选择器控制，但实际上还是类选择器控制样式。 

二、盒模型

CSS盒模型只是为了方便我们理解块级框所定义的一个比喻。 
CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签。 

2.1 盒模型中的宽度和高度

对象如何计算说明内容Width和height的属性值css所设置的width和height是元素内容的宽高，不是元素的宽高元素边框盒宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度同理元素边框盒是指border围绕的空间，所以设置padding和border会撑大空间元素空间在元素宽度和高度的基础上加上外边距元素空间是指在元素在文档中所占据的空间，这包括margin，虽然margin看不见，但它所占的空间还是存在的。

box-sizing属性 
CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变。

box-sizing取值

• content-box （表明width和height设置content的宽高） 
  
  • 元素的宽高 = 边框 + 内边距 + 内容宽高
• border-box （表明width和height设置元素的宽高） 
  
  • 元素的宽高 = width/height的宽高
  • 增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

在早期有两种css盒模型：w3c盒模型和IE盒模型。区别就是w3c的盒模型的width和height是content的宽高，而IE的width和height是内容、内边距和边框的宽度的总和。 

2.2 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

父子框的外边距在垂直方向上也会发生合并，子框的外边距会和父框的外边距发生合并。 
 
所以尽管子框有外边距，但是最后还是和父框的上边框紧贴。

简单列举几点注意事项:

• 外边距合并只出现在块级元素上；（只会在垂直方向上合并）
• 浮动元素不会和相邻的元素产生外边距合并；
• 绝对定位元素不会和相邻的元素产生外边距合并；
• 内联块级元素间不会产生外边距合并；
• 根元素间不会不会产生外边距合并（如html与body间）；

要想清除父子框的合并有如下方法:

• 给父框设置border（不为none，0）；
• 给父框设置padding;
• 给父框设置overflow:hidden（auto）; 
  
  
  
  

三、CSS定位（布局）

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 

3.1 标准流(文档流/普通流)排版方式

其实浏览器默认的排版方式就是标准流的排版方式 
在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素 
在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版

• 垂直排版, 如果元素是块级元素, 那么就会垂直排版
• 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版 
  
  
  

3.2 浮动流排版方式

float的出现就是为了解决水平布局的问题（line-block是CSS2.1才添加的属性值）。我们知道标准流的块级框都是垂直布局的，为了能使块元素水平布局，必须使元素脱离标准流，然后重新定义一个水平布局的方式，这就是浮动。

浮动的元素会被重新创建它的显示样式，也就是说不管元素在浮动前是块级元素还是行内元素，浮动后都是块级框。只不过这个块级框和标准流中的块级框的布局方式不同。注意浮动元素在浮动时要给框设定一个宽度。

• 为什么margin:0 auto;不能使浮动元素居中，而margin-left可以控制左边距？ 
  答：因为浮动元素有自己的布局方式，所以不能用其它方式对它布局，margin-left只是控制外边距，并不是布局方式。

• 为什么浮动元素能覆盖后面的块级框，但不覆盖文字？ 
  答：浮动元素和标准流的元素只是布局方式的不同。因为浮动元 
  素脱离了文本流进行水平方向上的布局，所以在布局时浮动元素 
  相对于后面标准流的块级框来说就像不存在一样。但浮动元素还 
  存在在文档中，所以会覆盖块级框（这是不同方式布局的影响）， 
  文字会环绕浮动元素（这是浮动元素还存在而带来的影响）。可 
  以看后面的例子。

• 既然浮动元素在文档中存在，为什么不能撑起父框？ 
  答：这还是不同布局方式带来的影响。打个比方，桌子的质量和 
  桌面上的物体质量有关（不考虑桌子的质量）。标准流布局，就 
  相当于把物品放在桌子上，这时桌子的质量就是物品的质量。而 
  浮动元素，就好比把物品拿起来悬空在桌面上，这时桌子的质量 
  还是没变，但悬空的物体还是存在的，它会遮挡正下方的物品。 
  但周围的物品会环绕悬空的物品。

清除浮动CSS清除浮动 
为了更好的布局，我们需要清除浮动元素带来的影响。

1.清除不能撑起父元素带来的影响 
直接给父元素设置高度； 
给父元素设置overflow样式为auto或hidden；

2.清除浮动元素给后面元素带来的影响 
给后面元素设置clear:both; 
用CSS设置浮动元素的父元素的:after样式来清除浮动。

应不应该用inline-block代替float？ 
应不应该用inline-block代替float？ 

3.3 CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。 
position 属性值的含义：

• Static 
  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

• relative 
  元素框相对自己偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。relative一般用来设置absolute定位的基准，或者是对某些元素进行微调。

• absolute 
  元素框从文档流完全删除，并相对于最近的有相对定位的祖先元素定位（若没有则相对body定位）。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 
  通常relative属性和absolute属性组合使用，也就是“父相子绝”。

• fixed 
  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

z-index 
z-index 属性指定一个元素的堆叠顺序。 
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 
注意：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！