CSS知识框架（一）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情 >>

CSS知识框架

标签模式

块级元素

特点：

1. 总是从新行开始
2. 高度、行高、外边距，内边距都可以控制
3. 宽度默认是容器的100%
4. 可以容纳内联元素和其他块元素　 常见：

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

行内元素

特点：

1. 和相邻行内元素在一行上，但是之间会有缝隙
2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或则其他行内元素。（a特殊）　 常见：

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

标签转化

块转行：

display:inline;

块转行：

display:block;

特性

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

1. 每个元素（标签）贡献值为0,0,0,1
2. 每个类，伪类贡献值为0,0,1,0
3. 每个ID贡献值为0,1,0,0
4. 每个行内样式贡献值1,0,0,0
5. 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。盒子模型 边框 功能点：
6. none：没有边框即忽略所有边框的宽度（默认值）
7. 边框为单实线 solid
8. 边框为虚线 dashed
9. 边框为点线 dotted
10. 边框为双实线 double
11. 边框圆角 border-radius: 左上角 右上角 右下角 左下角;边距 内边距：
12. 是指 边框与内容之间的距离
13. padding 外边距：margin盒子居中 用法：margin: 0 auto;清楚内外边距 用法：margin:0，padding:0css3盒模型 用法：
14. box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
15. box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode盒子阴影 box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；CSS样式 内部样式 内嵌式是将CSS代码集中写在HTML文档的head头部标签中行内式 标签的style属性来设置元素的样式外部样式表 链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中