CSS 知识框架

标签模式

块级元素

特点：

1. 总是从新行开始

2. 高度、行高、外边距，内边距都可以控制

3. 宽度默认是容器的 100%

4. 可以容纳内联元素和其他块元素　</br>常见：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

行内元素

特点：

1. 和相邻行内元素在一行上，但是之间会有缝隙

2. 高、宽无效，但水平方向的 padding 和 margin 可以设置，垂直方向的无效。

3. 默认宽度就是它本身内容的宽度

4. 行内元素只能容纳文本或则其他行内元素。（a 特殊）　</br>常见：

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素

标签转化

块转行：

display:inline;

块转行：

display:block;

特性

层叠：就近原则，进行重叠</br>继承：子承父业</br>优先:

1. 每个元素（标签）贡献值为 0,0,0,1

2. 每个类，伪类贡献值为 0,0,1,0

3. 每个 ID 贡献值为 0,1,0,0

4. 每个行内样式贡献值 1,0,0,0

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

盒子模型

边框

功能点：

1. none：没有边框即忽略所有边框的宽度（默认值）

2. 边框为单实线 solid

3. 边框为虚线 dashed

4. 边框为点线 dotted

5. 边框为双实线 double

6. 边框圆角 border-radius: 左上角 右上角 右下角 左下角;

边距

内边距：

1. 是指 边框与内容之间的距离

2. padding 外边距：margin

盒子居中

用法：margin: 0 auto;

清楚内外边距

用法：margin:0，padding:0

css3 盒模型

用法：

1. box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到 width 里面的

2. box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持 W3C 的标准 Box Mode

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

CSS 样式

内部样式

内嵌式是将 CSS 代码集中写在 HTML 文档的 head 头部标签中

行内式

标签的 style 属性来设置元素的样式

外部样式表

链入式是将所有的样式放在一个或多个以.CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中