一、CSS 长度单位
- px：像素
- em：相对元素 font-size 的倍数
- rem：相对根文字体的大小，heml标签就是根
- %：相对父元素计算
注意：CSS 中设置长度，必须加单位，否则样式无效！
二、元素的显示模式
块元素（black）
又称：块级元素
特点：
- 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
- 默认宽度：撑满父元素
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
行内元素(inline)
又称：内联元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 无法通过CSS设置宽高
行内块元素（inline-block）
又称：内联块元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
注意：元素早期只分为：行内元素、块级元素，区分条件只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算是行内元素。
三、总结各元素的显示模式
块元素（black）
- 主体结构标签：<html>、<body>
- 排版标签：<hl>～<h6>、<hr>、<p>、<pre>、<div>
- 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
- 表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
- <form>或<option>
行内元素（inline）
- 文本标签：<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>
- <a>与<label>
行内块元素（inline-block）
- 图片：<img>
- 单元格：<td>、<th>
- 表单控件：<input>、<textarea>、<select>、<button>
- 框架标签：<iframe>
四、修改元素显示模式
通过CSS中的display属性可以修改元素的默认显示模式，常用值如下：
| 值 | 描述 |
| none | 元素会被隐藏 |
| block | 元素将作为块级元素显示 |
| inline | 元素将作为行内元素显示 |
| inline-block | 元素将作为行内块元素显示 |
五、盒子模型的组成
CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。
- margin（外边距）：盒子与外界的距离。
- border（边框）：盒子的边框
- paddding（内边距）：紧贴内容的补白区域
- content（内容）：元素中的文本或者后代元素都是它的内容
图示如下：
盒子的大小=content + 左右padding + 左右border
注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置
六、盒子内容区（content）
| CSS属性名 | 功能 | 属性值 |
| width | 设置内容区域宽度 | 长度 |
| max-width | 设置内容区域的最大宽度 | 长度 |
| min-width | 设置内容区域的最小宽度 | 长度 |
| height | 设置内容区域的高度 | 长度 |
| max-height | 设置内容区域的最大高度 | 长度 |
| min-height | 设置内容区域的最小高度 | 长度 |
注意：
max-width、min-width 一般不与 width 一起使用
max-height、min-height 一般不与 height 一起使用
七、关于默认宽度
所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。
总宽度=父的content - 自身的margin。
内容区的宽度 = 父的 content - 自身的左右margin - 自身的左右border - 自身的左右padding
八、盒子内边距（padding）
| CSS 属性名 | 功能 | 属性值 |
| padding-top | 上内边距 | 长度 |
| padding-right | 右内边距 | 长度 |
| padding-bottom | 下内边距 | 长度 |
| padding-left | 左内边距 | 长度 |
| padding | 复合属性 | 长度，可设置以上四个的值 （上右下左） |
padding 复合属性使用规则：
- padding ：10px；四个方向内边距都是10px
- padding：10px 20px；上下的内边距是10px，左右的内边距是20px（上下、左右）
- padding：10px 20px 30px；上10px，左右20px，下30px
- padding：10px 20px 30px 40px；上10px，右20px，下30px，左40px（上右下左）
注意点：
- padding 的值不能为负数
- 行内元素的左右内边距是没问题的，但是 上下内边距不能完美设置
- 块级元素、行内元素，四个方向内边距都可以完美设置
九、盒子的边框 （border）
| CSS 属性名 | 功能 | 属性值 |
| border-style | 边框线风格 复合了四个方向的边框风格 | none：默认值 solid：实现 dashed：虚线 dotted：点线 double：双实线 ...... |
| border-width | 边框宽度 复合了四个方向的边框宽度 | 长度，默认3px |
| border-color | 边框颜色 复合了四个方向的边框颜色 | 颜色，默认黑色 |
| border | 复合属性 | 值没有顺序和数量要求 |
| border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color | 分别设置各个方向的边框 | 同上 |
边框相关属性共20个。
border-style、border-width、border-color 其实也是复合属性
十、盒子的外边距（margin）
| CSS属性名 | 功能 | 属性值 |
| margin-left | 左外边距 | CSS中的长度值 |
| margin-right | 右外边距 | CSS中的长度值 |
| margin-top | 上外边距 | CSS中的长度值 |
| margin-bottom | 下=外边距 | CSS中的长度值 |
| margin | 复合属性，可以写1～4个值 | CSS中的长度值 |
10.1 margin 注意事项
- 子元素的 margin，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着子元素）
- 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
- 块级元素、行内块元素，均可以完美地设置四个方向的 margin；但行内元素，左右margin 可以完美设置，上下margin设置无效。
- margin 的值也可以是 auto，如果给一个块级元素设置了左右margin都为 auto，该块级元素会在父元素中水平居中。
- margin 的值可以是负值。（会重叠前面的盒子）
10.2 margin 塌陷问题
什么是margin塌陷？
第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。
如何解决 margin 塌陷？
- 方案一：给父元素设置不为 0 的padding。
- 方案二：给父元素设置不为 0 的border。
- 方案三：给父元素设置CSS样式为 overflow：hidden
10.3 margin 合并问题
什么是 margin 合并？
上面的兄弟元素的下外边距和下边的兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
如何解决 margin 合并？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。
十一、处理内容溢出
| CSS属性名 | 功能 | 属性值 |
| overflow | 溢出内容的处理方式 | visible：显示，默认值 hidden：隐藏 scroll：显示滚动条，不论内容是否溢出 auto：自动显示滚动条，内容不溢出不显示 |
| overflow-x | 水平方向溢出内容的处理方式 | 同 overflow |
| overflow-y | 垂直方向溢出内容的处理方式 | 同overflow |
注意：
- overflow-x、overflow-y 不能一个是hidden，一个是visible，是试验性属性，不建议使用
- overflow 常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症
十二、隐藏元素的方式
方式一：visibility 属性
visibility 属性默认值是 show，如果设置为 hidden，（元素会隐藏。元素看不见了，还占有原来的位置（元素的大小依然保持））。
方式二：display 属性
设置 display：none ，就可以让元素隐藏。（彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高）
十三、样式的继承
有些样式会继承，元素如果本身设置了某个样式，就是用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先级成离得近的祖先元素---父元素）。
会继承的CSS属性：
字体属性、文本属性（除了vertical-align）、文字颜色 等。
不会继承的CSS属性
边框、背景、内边距、外边距、宽高、溢出方式 等。
一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。
开发者工具会显示样式来源：
十四、默认样式
元素一般都有些默认样式，例如：
- <a>元素：下划线、字体颜色、鼠标小手。
- <h1>~<h6>元素：文字加粗、文字大小、上下外边距。
- <p>元素：上下外边距
- <ul>、<ol>元素：左内边距
- body元素：8px外边距（四个方向）
......
优先级：元素默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择到该元素。
十五、布局小技巧
- 行内元素、行内块元素，可以被父元素当做文本处理
即：可以像处理文本对齐一样，去处理：行内、行内块哎父元素中对齐
例如：text-align、line-height、text-indent 等。
2.如何让子元素，在父亲中水平居中：
- 若子元素为块元素，给父元素加上：margin：0 auto；
- 若子元素为行内元素、行内块级元素，给父元素加上：text-align：center。
3.如何让子元素，在父亲中 垂直居中：
- 若子元素为块元素，给子元素加上：margin-top，值为：（父元素content - 子元素盒子总高）/2.
- 若子元素为行内元素、行内块元素：
让父元素的height = line-height ， 每个子元素都加上：vertical-align：middle；。
补充：若想绝对的垂直居中，父元素font-size设置为0。
十六、元素之间的空白问题
产生的原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
- 方案一：去掉换行和空格（不推荐）/
- 方案二：给父元素的 font-size：0 ，再给需要显示文字的元素，单独设置字体大小（推荐）
十七、行内块的幽灵空白问题
产生原因：
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
- 方案一：给行内块设置 vertical，值不为baseline即可，设置为middel、bottom、top均可。
- 方案二：若父元素中只有一张照片，设置图片为 display：block。
- 方案三：给父元素设置font-size：0。如果该行内块内部还有文本，则需要单独设置 font-size。
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
