【前端】-015-页面制作-CSS-盒模型

什么是盒模型

**Box Model**

CSS Box Model is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.

• 盒模型描述了一个元素所占用的空间，CSS中所有的元素通过矩形框来描述；
• 通过对盒子的属性进行判断，从而渲染效果。

盒模型的属性

1. 元素的宽度

• width: <length> | <percentage> | auto | inherit
• 默认情况下，元素的宽度是父元素的宽度

2. 元素的高度

• height: <length> | <percentage> | auto | inherit
• 默认情况下，元素的高度是内容高度

3. 填充

• padding: [ <length> | <percentage>] {1, 4} | inherit
• padding是，元素的内容和边框之间的空间。
• 省略的规则是，对面相同省略，四个相通，只写一个参数；

The padding area is the space between the content of the element and its border.

4. 元素的边框

• border: border-width | border-style | border-color
• border-width: [ <length> | ... ] {1, 4}
• border-style: [solid | dashed | dotted ...] {1, 4}
• border-color: [<color> | transparent ] {1, 4},默认字体颜色

5. 元素之间的间距

• margin: [ <length> | <percentage> | auto ] {1, 4} | inherit
• 默认情况下为auto，浏览器自动分配，
• 相邻元素的margin会合并^src，取最大值

补充知识

1. 块状元素（block）

• 单独一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；默认情况下和父元素的宽度一致
• 常用的块级标签：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<li><table>、<address>、<blockquote> 、<form>
• 通过display: block将某一个元素标签设置为块级元素

2. 内联元素，行内元素（inline）

• 和其他元素都在一行上；元素的高度、宽度（内容本身的参数）及顶部和底部边距不可设置；
• 典型的内联元素，<span>、<a>、<label>、 <strong>、<em>
• 通过display: inline可以将块状元素设置为内联元素。

3. 内联块状元素（inline-block）

• 在内联元素的基础上增加块状元素的特点，即和其他元素都在一行上，元素的宽度和高度以及边距可设置
• 通过display: inline-block设置