CSS

层叠样式表, 为HTML标记语言提供了一种样式描述即【设置HTML页面中的元素的位置、排版、样式外观等】如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）

一.选择器优先级

当一个元素被不同的选择器约束时，特异度越高的优先级越高

二.继承

某些元素会自动继承其父元素的计算值，除非显式指定一个值

1.显示继承

* {
 box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget{
   box-sizing: content-box;
}

三.CSS 求值过程

初始值：CSS中，每个属性都有一个初始值

background-color的初始值为transparent
margin-left 的初始值为0
可以使用initial关键字显示重置为初始值
background-color：initial

四.布局

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

实现网页的页面布局一般有三种方法:表格布局、框架布局、DIV+CSS页面布局

1.表格布局

优势：

（1）实现方式比较简单。

（2）各个元素可以位于表格独立的单元格中，相互影响较小

（3）对浏览器的兼容性较好。

缺陷: （1）在某些浏览器下(例如IE),表格只有在全部下载完成后才可以显示，数据量比较大时会影响网页的浏览速度。（2）搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦。（3）在多重表格嵌套的情况下，代码可读性较差，页面的下载速度也会受到影响。

2.框架布局

指利用框架对页面空间进行有效的划分，每个区域可以显示不同的网页内容，各个区域之间互不影响。

框架布局优点：

（1）网页更整洁、清晰，网页的下载速度较快。

框架布局缺点：

（1）框架用得较多，会影响网页的浏览速度。

（2）框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限。

3.DIV+CSS布局

对于规模较大、比较复杂的网站大多数采用DIV+CSS方式进行布局。DIV+CSS布局方式具有较为明显的优势:
（1）内容和表现相分离。
（2）对搜索引擎的支持更加友好。
（3）文件代码更加精简，执行速度更快。
（4）易于维护。

五.CSS盒模型

1.width

指定content box宽度
取值为长度、百分数、auto
auto由浏览器根据其他属性确定
百分数相对于容器的content box宽度

2.height

指定 content box 高度
取值为长度、百分数、auto
容器有指定的高度时，百分数才生效

3.padding

指定元素四个方向的内边距
百分数相对于容器宽度

4.border

指定容器边框样式、粗细和颜色

【当四条边框颜色不同时，宽度高度为0，其他边框透明，可以做独立的小三角形】

本次学习掌握了选择器，CSS布局技巧以及盒模型的概念，还有CSS求值的过程，了解了CSS是如何进行渲染的，平时需要不断上机练习才能掌握好知识。

深入理解CSS | 青训营

CSS