CSS特性及盒子模型

1.CSS三大特性

1.CSS层叠性

概念：

• 所谓层叠性是指多种CSS样式的叠加。

• 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一元素上,那么这个时候一个属性就会将另一个属性层叠掉

• 层叠性：两个优先级相同的选择器，选择了同样的html元素

• 如果两个选择器中为元素设置的属性不同，则所有属性会累加

• 如果两个选择器中为元素的某个属性设置了不同的值，后面的会生效

原则：

• 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
• 样式不冲突，不会层叠

2.CSS继承性

概念：

• 在 CSS 中，存在属性的继承机制

• 子元素可以继承父元素的某些属性，如 color、font-size

• 某些属性，子元素不能继承，如 width、height、border

• 继承性可以减少代码

• 子标签会继承父标签的某些样式，如文本颜色和字号。

• 想要设置一个可继承的属性，只需将它应用于父元素即可。

注意：

• 恰当地用继承可以简化代码,降低CSS样式的复杂性.比如有很多子级都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。
• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

3.CSS优先级

概念：

• 选择器的优先级：ID>类>标签>继承

• 当多个选择器获取的是同样的元素，并为某个属性设置不同的值时，遵循上面的原则

• 当选择器由多个选择器组成，需要计选择器的权重，权重高者，优先级高：

• 权重：1个id选择器=100；1个类选择器=10；1个标签选择器=1；继承=0

• 如果没有通过任何选择器为标签设置样式，则继承父元素的样式，否则就使用自己的样式

• 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

  • 选择器相同，则执行层叠性
  • 选择器不同，就会出现优先级的问题。

1.权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

• 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

2.权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算：

• div ul li ------> 0,0,0,3
• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1

注意：

• 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

3.继承的权重是0

我们修改样式，一定要看该标签有没有被选中。

• 如果选中了，那么以上面的公式来计权重。谁大听谁的。
• 如果没有选中，那么权重是0，因为继承的权重为0.

2.CSS注释

CSS注释规则：

/* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾 使用 "*/"结束。

3.盒子模型

所谓盒子模型

一切标签都可以成为盒子，研究盒子盒子模型，其实就是在研究一个盒子的尺寸的组成以及变化

• 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
• 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
• 盒子里面的文字和图片等元素是 内容区域
• 盒子的厚度 我们成为 盒子的边框
• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
• 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

4.盒子边框（border）

语法：

border : border-width || border-style || border-color 

边框的样式：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

1.边框综合设置

border : border-width || border-style || border-color 

例如：

border: 1px solid red; 没有顺序

2.盒子边框写法总结表

边框(border)有4个，可以分别设置宽度、颜色、线条

3.内边距

1.内边距

padding属性用于设置内边距。 是指 边框与内容之间的距离。

• 内边距(padding)有4个，可以分别设置每个内边距的值

2.设置

注意： 后面跟几个数值表示的意思是不一样的。

简写：

3.内盒尺寸计算

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

• width 属性设置的是盒子的初始宽度,height 属性设置的是盒子的初始高度

• 宽度

  • Element Height = content height + padding + border （Height为内容高度）
  • 盒子的实际宽度=border-left+padding-left+width+padding-right+border-right

• 高度

  • Element Width = content width + padding + border （Width为内容宽度）
  • 盒子的实际高度=border-top+padding-top+width+padding-bottom+border-bottom

4.如何防止内边距影响盒子尺寸

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

• 当给盒子设置padding属性时，会使内容与边框间产生相应的距离，从而使得盒子实际尺寸与设定尺寸不符

box-sizing：border-box

• 为元素设定的宽度和高度决定了元素的边框盒。
• 会自动压缩内容，以保证尺寸维持在设定尺寸
• 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
• 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5.外边距

1.外边距

margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

2.设置

• margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

3.块级盒子水平居中

让一个块级盒子实现水平居中必须：

• 盒子必须指定了宽度（width）
• 然后就给左右的外边距都设置为auto
• body 指的是浏览器窗口的可视区域，其宽度会随着窗口的变化而变化

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

常见的写法，以下下三种都可以：

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

4.外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1.相邻块元素垂直外边距的合并

对于垂直相邻的两个盒子（兄弟关系），其距离不是两个盒子的外边距之和，而是取的是较大的外边距

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
• 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之
• 和
• 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量给只给一个盒子添加margin值。

2.嵌套块元素垂直外边距的合并（塌陷）

对于嵌套的两个盒(父子关系),如果父盒,没设置上内边距或边框,设置子盒的垂直外边距时(marign-top),两个盒的垂直外边距会合并。

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
• 父元素的上外边距会与子元素的上外边距发生合并
• 合并后的外边距为两者中的较大者

解决方案：

1. 可以为父元素定义上边框。

2. 可以为父元素定义上内边距

3. 可以为父元素添加overflow:hidden。

5.去掉列表(ul)默认样式

浏览器默认会为ul设置padding-left ：40px，用以在内容前设置显示列表样式 •

• 修改li标签的列表属性：list-style-type ：none 无/square 正方