CSS学习（2）-盒子模型

1. CSS 长度单位

px ：像素。
em ：相对元素 font-size 的倍数。
rem ：相对根字体大小，html标签就是根。
% ：相对父元素计算。

注意： CSS 中设置长度，必须加单位，否则样式无效！

2. 元素的显示模式

2.1 块元素（block）

特点：

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

常见的如下：

主体结构标签： <html> 、 <body>
排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、<caption>
<form> 与 <option>

2.2 行内元素（inline）

特点:

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

常见的如下：

文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
<a> 与 <label>

2.3 行内块元素（inline-block）

特点：

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

常见的如下：

图片： <img>
单元格： <td> 、 <th>
表单控件： <input> 、 <textarea> 、 <select> 、 <button>
框架标签： <iframe>

2.4 修改元素的显示模式

通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：
在这里插入图片描述

3. 盒子模型的组成

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

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

图示如下：
在这里插入图片描述

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

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

3.1 盒子内容区（content）

在这里插入图片描述

注意：
max-width 、 min-width 一般不与 width 一起使用。
max-height 、 min-height 一般不与 height 一起使用。

3.2 关于默认宽度

所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。
总宽度 = 父的 content — 自身的左右 margin 。
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右
padding 。

3.3 盒子内边距（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 的值不能为负数。
行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
块级元素、行内块元素，四个方向内边距都可以完美设置。

3.4 盒子边框（border）

在这里插入图片描述
边框相关属性共 20 个。
border-style 、 border-width 、 border-color 其实也是复合属性。

3.5 盒子外边距（margin）

在这里插入图片描述

1. margin 注意事项

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

2. margin 塌陷问题

什么是 margin 塌陷？
第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

如何解决 margin 塌陷？

方案一：给父元素设置不为 0 的 padding 。
方案二：给父元素设置宽度不为 0 的 border 。
方案三：给父元素设置 css 样式 overflow:hidden。

3. margin 合并问题

什么是 margin 合并？
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
如何解决 margin 合并？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

3.6 处理内容溢出

在这里插入图片描述

注意：

overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不建议使用。
overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

3.7 隐藏元素的方式

方式1：visibility 属性

visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。

方式2： display 属性

设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

3.8 样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

1. 会继承的css属性

字体属性、文本属性（除了vertical-align）、文字颜色等。

2. 不会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式等。

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

3.9 默认样式

元素一般都些默认的样式，例如：

<a> 元素：下划线、字体颜色、鼠标小手。
<h1> ~ <h6> 元素：文字加粗、文字大小、上下外边距。
<p> 元素：上下外边距
<ul> 、 ol 元素：左内边距
body 元素： 8px 外边距（4个方向）

优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择器到该元素。

3.10 布局小技巧

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

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。例如： text-align 、 line-height 、text-indent 等。

如何让子元素，在父亲中水平居中：
- 若子元素为块元素，给父元素加上： margin:0 auto; 。
- 若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。
如何让子元素，在父亲中垂直居中：
- 若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子
  总高) / 2。
- 若子元素为行内元素、行内块元素：
  让父元素的 height = line-height ，每个子元素都加上： verticalalign:middle; 。
  补充：若想绝对垂直居中，父元素 font-size 设置为 0 。