（1）继承属性

这里是指样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先和后代之间的

继承的设计是为了方便我们的开发，
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式

注意：并不是所有的样式都会被继承：
比如 背景相关的，布局相关等的这些样式都不会被继承。有一些效果看似继承了背景，实际只是透过的效果

（2）权重的属性

• 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
  发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

				内联样式         1,0,0,0		id选择器         0,1,0,0	类和伪类选择器    0,0,1,0		元素选择器       0,0,0,1       通配选择器       0,0,0,0继承的样式       没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的div, p, span 算单一个）
选择器的累加不会超过其最大的数量级,也就是不会超过上级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式

当需要提高优先级的话，可以在某一个样式的后边添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式，
注意：!important 在开发中这个玩意一定要慎用！

（3）长度单位

像素

		- 屏幕（显示器）实际上是由一个一个的小点点构成的- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰- 所以同样的200px在不同的设备下显示效果不一样

百分比

		- 也可以将属性值设置为相对于其父元素属性的百分比- 设置百分比可以使子元素跟随父元素的改变而改变

em

		- em是相对于元素的字体大小来计算的- 1em = 1 font-size   - em会根据字体大小的改变而改变

rem

		- rem是相对于根元素（html）的字体大小来计算

（4）颜色单位

在CSS中可以直接使用颜色名来设置各种颜色
比如：red、orange、yellow、blue、green … …
但是在css中直接使用颜色名是非常的不方便
RGB值：

- RGB通过三种颜色的不同浓度来调配出不同的颜色
- R red，G green ，B blue
- 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
- 语法：RGB(红色,绿色,蓝色)

RGBA:

- 就是在rgb的基础上增加了一个a表示不透明度
- 需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明   0表示完全透明  .5半透明

十六进制的RGB值：

- 语法：#红色绿色蓝色
- 颜色浓度通过 00-ff
- 如果颜色两位两位重复可以进行简写  
#aabbcc --> #abc

HSL值 HSLA值

H 色相(0 - 360)
S 饱和度，颜色的浓度 0% - 100%
L 亮度，颜色的亮度 0% - 100%

（5）文档流（normal flow）

• 网页是一个多层的结构，一层摞着一层
• 通过CSS可以分别为每一层来设置样式
• 作为用户来讲只能看到最顶上一层
• 这些层中，最底下的一层称为文档流，文档流是网页的基础
• 我们所创建的元素默认都是在文档流中进行排列
• 对于我们来元素主要有两个状态
  在文档流中
不在文档流中（脱离文档流）

元素在文档流中有什么特点：

块元素

- 块元素会在页面中独占一行(自上向下垂直排列)
- 默认宽度是父元素的全部（会把父元素撑满）
- 默认高度是被内容撑开（子元素）

行内元素

- 行内元素不会独占页面的一行，只占自身的大小
- 行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素 则元素会换到第二行继续自左向右排列（书写习惯一致）
- 行内元素的默认宽度和高度都是被内容撑开

（5.1）面试题–行内元，块级元素， 空(void)元素有那些？行内元素和块级元素有什么区别？

行内元素：a b span img input select strong

块级元素：div ul ol li dl dt dd h1 h2 h3 h4…p

空元素：<br> <hr> <img> <input> <link> <meta>

区别： 
1.行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列2.块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。3.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。4.行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

不在文档流中（脱离文档流）

待补充…

（6）盒子模型

盒模型、盒子模型、框模型（box model）

- CSS将页面中的所有元素都设置为了一个矩形的盒子
- 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

每一个盒子都由一下几个部分组成：

内容区（content） 内边距（padding） 边框（border） 外边距（margin）

内容区（content）

元素中的所有的子元素和文本内容都在内容区中排列  内容区的大小由width 和 height两个属性来设置
-	width 设置内容区的宽度
-	height 设置内容区的高度  

边框（border）

边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小会影响到整个盒子的大小，要设置边框，需要至少设置三个样式：
-	边框的宽度 border-width
-	边框的颜色 border-color
-	边框的样式 border-style

内边距（padding）

- 内容区和边框之间的距离是内边距
- 一共有四个方向的内边距：padding-toppadding-rightpadding-bottompadding-left- 内边距的设置会影响到盒子的大小
- 背景颜色会延伸到内边距上
一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算

外边距（margin）

- 外边距不会影响盒子可见框的大小
- 但是外边距会影响盒子的位置
- 一共有四个方向的外边距：margin-top
- 上外边距，设置一个正值，元素会向下移动margin-right
- 默认情况下设置margin-right不会产生任何效果margin-bottom
- 下外边距，设置一个正值，其下边的元素会向下移动margin-left
- 左外边距，设置一个正值，元素会向右移动
- margin也可以设置负值，如果是负值则元素会向相反的方向移动
- 元素在页面中是按照自左向右的顺序排列的，
所以默认情况下如果我们设置的左和上外边距则会移动元素自身而设置下和右外边距会移动其他元素
- margin的简写属性
margin 可以同时设置四个方向的外边距 ，用法和padding一样
- margin会影响到盒子实际占用空间

（6.1）面试题–什么是盒模型

盒模型，是CSS布局的基石，主要规定了元素是如何显示元素间相互关系。具体有：

content (内容）：内容的自身宽高，width和height。
padding（内边距）：盒子边缘与盒子内容之间的空白区，内填充。
border（内边框）：盒子边缘
margin（外边距） ：盒子边缘以外的距离。

此外，在Ie5及更早版本中，元素的height包括的是除margin之外的所有属性的和，但在ie6之后则使用标准盒模型。

（7）元素的水平方向的布局：

元素在其父元素中水平方向的位置由以下几个属性共同决定“margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right

一个元素在其父元素中，水平布局必须要满足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
上面待数据浏览器会自动调整为下面的数据
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800

假设这里设置了margin-right：400 ，也是不符合的 浏览器还是会按照满足的数值进行补充
100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
不满足的情况下。浏览器会自动调整为下面的情况
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800

• 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
• 调整的情况：
• 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足
• 这七个值中有下面三个值和设置为auto的操作
  width margin-left maring-right
• 如果某个值为auto，则会自动调整为auto的那个值以使等式成立 auto的话 此时浏览器会自动补充上

   0 + 0 + 0 + auto + 0 + 0 + 0 = 800  auto = 8000 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 600200 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 400auto + 0 + 0 + 200 + 0 + 0 + 200 = 800  auto = 400auto + 0 + 0 + 200 + 0 + 0 + auto = 800  auto = 300

• 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
• 如果将三个值都设置为auto，则外边距都是0，宽度最大
• 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
  所以我们经常利用这个特点来使一个元素在其父元素中水平居中
  示例：
  width:xxxpx; margin:0 auto;

（8）垂直方向的布局

子元素是在父元素的内容区中排列的，
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用 overflow 属性来设置父元素如何处理溢出的子元素
可选值：

   Visible  默认值 子元素会从父元素中溢出，在父元素外部的位置显示hidden   溢出内容将会被裁剪不会显示scroll   生成两个滚动条，通过滚动条来查看完整的内容auto     根据需要生成滚动条（处理溢出的问题）其它处理溢出的属性overflow-x: overflow-y:

（9）垂直外边距的重叠（折叠）

• 相邻的垂直方向外边距会发生重叠现象 （也就是上的盒子向下100px 下面的盒子向上100px 此时两个100px会进行重叠）
• 兄弟元素
• 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
• 特殊情况：
  如果相邻的外边距一正一负，则取两者的和
  如果相邻的外边距都是负值，则取两者中绝对值较大的
• 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
• 父子元素
• 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
• 父子外边距的折叠会影响到页面的布局，必须要进行处理

（10）行内元素的盒模型

• 行内元素不支持设置宽度和高度
• 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
• 行内元素可以设置border，垂直方向的border不会影响页面的布局
• 行内元素可以设置margin，垂直方向的margin不会影响布局
  当需要设置行内元素的时候，需要将行内元素变成块元素 通过display

display 用来设置元素显示的类型

可选值：

   		 inline 将元素设置为行内元素block 将元素设置为块元素inline-block 将元素设置为行内块元素 行内块，既可以设置宽度和高度又不会独占一行table 将元素设置为一个表格none 元素不在页面中显示visibility 用来设置元素的显示状态可选值：visible 默认值，元素在页面中正常显示hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置