权威官方文档

简单计算

!important>行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

详解计算

a : ID 选择器的个数。

b : 类、伪类、属性 选择器的个数。

c : 元素、伪元素 选择器的个数。

(a,b,c)按照a,b,c的顺序比较，那个大，那个权重高。

权重一样，后面的会覆盖前面的样式

鼠标已到选择器上，开发工具都会帮我们计算权重

CSS三大特性

层叠性

样式会层叠（覆盖）

注意，外部样式和内部样式同级，如果权重一样看位置决定是否覆盖。

继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

规则：优先继承离得近的。

常见的可继承属性：

text-?? ， font-?? ， line-?? 、 color ......

优先级

简单聊：

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > ***** > 继承的样

式。

详细聊：需要计算权重。

csss属性

行高

行高注意事项：

line-height 过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数。
line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
line-height 和 height 是什么关系？

设置了 height ，那么高度就是 height 的值。

不设置 height 的时候，会根据 line-height 计算高度。

应用场景：

对于多行文字：控制行与行之间的距离。
对于单行文字：让 height 等于 line-height ，可以实现文字垂直居中。

备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。

vertical-align

属性名： vertical-align 。操作行内元素。

作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。

常用值：

baseline （默认值）：使元素的基线与父元素的基线对齐。
top ：使元素的顶部与其所在行的顶部对齐。
middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
bottom ：使元素的底部与其所在行的底部对齐。

特别注意： vertical-align 不能控制块元素。

经常在同一行中，让图片和文字对齐

 atguigu尚硅谷x<img src="../images/我的自拍.jpg">

vertical-align: middle;

盒子模型

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

margin**（外边距）：** 盒子与外界的距离。
border**（边框）：** 盒子的边框。
padding**（内边距）：** 紧贴内容的补白区域。
content**（内容）：**元素中的文本或后代元素都是它的内容。

height、width设置的是内容区的大小。

盒子的大小 = content + 左右 padding + 左右 border 。

注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

默认宽度

所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。

总宽度 = 父的 content — 自身的左右 margin 。

内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。

margin

margin注意事项

子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着

子元素）

上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素的位置。
块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右margin 可以完美设置，上下 margin 设置无效。
margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。
margin 的值可以是负值。

margin塌陷问题

什么是 margin 塌陷？

第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

如何解决 margin 塌陷？

方案一：给父元素设置不为 0 的 padding 。

方案二：给父元素设置宽度不为 0 的 border 。

方案三：给父元素设置 css 样式 overflow:hidden

margin合并问题

什么是 margin 合并？

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决 margin 塌陷？

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

元素的显示模式

块元素（block）

又称：块级元素

特点：

在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
默认宽度：撑满父元素。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

行内元素（inline）

又称：内联元素

特点:

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
无法通过 CSS 设置宽高。

行内块元素（inline-block）

又称：内联块元素

特点：

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排

列。

默认宽度：由内容撑开。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

**注意：**元素早期只分为：行内元素、块级元素，区分条件也只有一条："是否独占一行"，如果按照这种

分类方式，行内块元素应该算作行内元素。

各元素的显示模式

块元素（block)

1. 主体结构标签： <html> 、 <body>

2. 排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>

3. 列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>

4. 表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、<caption>

5. <form> 与 <option>

行内元素（inline）

1. 文本标签： <span>,<br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>,

2. <a> 与 <label>

行内块元素（inline-block）

1. 图片： <img>

2. 单元格： <td> 、 <th>

3. 表单控件： <input> 、 <textarea> 、 <select> 、 <button>

4. 框架标签： <iframe>

布局小技巧

行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。

例如： text-align 、 line-height 、 text-indent 等。

如何让子元素，在父亲中 水平居中：

若子元素为块元素，给父元素加上： margin:0 auto; 。

若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。

如何让子元素，在父亲中 垂直居中：

若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子总高) / 2。

若子元素为行内元素、行内块元素：

让父元素的 height = line-height ，每个子元素都加上： vertical-

align:middle; 。

补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

方案一： 去掉换行和空格（不推荐）。
方案二： 给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。

行内块的幽灵空白问题

产生原因：

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。