CSS3 盒子模型

一个网页一般有多个不同的功能区块，比如，导航拦，文章，侧边栏，尾部。你可以简单的理解，每个区块都是一个盒子，我们用一个一个不同的盒子把网页中不同的内容给分组。

盒子是网页布局重要的工具。关于布局看最后三篇。

盒子

盒子就是区块，在HTML篇我们单独讲过 HTML 区块。

div {
 width: 300px; <!-- 宽度 -->
 height: 300px; <!-- 高度 -->
 background: #00BFFF; <!-- 背景颜色 -->
}

<div>我要赞赏简明教程。</div>

效果

盒子的特点

• 盒子是一个容器标签，用于存放其他标签。
• 盒子可以设置大小。

不是盒子

有些标签是盒子，那说明也有不是盒子的标签。一个简单的区别方法，就是加上背景颜色，盒子默认跟父容器等宽。

<!-- 不是盒子 -->
<a href="/" style="background: yellow;">简明教程</a>
<em style="background: #98FB98;">简明教程</em>

<!-- 盒子 -->
<p style="background: #FF8247;">简明教程</p>

效果

简明教程

显示隐藏

代码

<!-- 显示盒子 display:block; 默认值-->
<p style="display:block;">显示</p>

<!-- 隐藏盒子 display:none;-->
<p style="display:none;">隐藏</p>

效果

显示

隐藏

盒子尺寸

一般我们的单位值是 CSS 单位，width: auto是特殊值，代表跟父容器等宽，是默认值。

内容溢出

有时候，我们的内容可能会超过容器大小，这时候就要进行溢出处理。有两种处理的方式，隐藏和滚动条。

<!-- overflow:hidden; 超过盒子的部分内容隐藏 -->
<p style="width: 80px; height: 40px; overflow:hidden; background: #C1FFC1;">
~~~~~~~~~~~~~~~~~~~~~ 我要赞赏简明教程。~~~~~~~~~~~~~~~~~~~~~
</p>

<!-- overflow:scroll; 显示滚动条 -->
<p style="width: 80px; height: 40px; overflow:scroll; background:#FF7F50;">
~~~~~~~~~~~~~~~~~~~~~ 我要赞赏简明教程。~~~~~~~~~~~~~~~~~~~~~
</p>

overflow还可以做横纵方位设置。overflow-x: hidden 只显示横向滚动条，overflow-y: hidden 只显示横 纵向滚动条。

效果

~~~~~~~~~~~~~~~~~~~~~ 我要赞赏简明教程。~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~ 我要赞赏简明教程。~~~~~~~~~~~~~~~~~~~~~

边框

还可以给盒子加一个边框。

<!-- 实线 -->
<div style="border: 1px solid red;">简明教程</div>

<!-- 虚线 -->
<div style="border: 1px dashed yellow;">简明教程</div>

<!-- 格式：border: 单位 样式 颜色 -->
<!-- 取消框宽：border: none; -->

边框的样式千奇百怪，甚至还可以自定义，但一般我们不会把页面搞得那么花花绿绿，比较常用的也就是实线和虚线。

效果

边距

在CSS里面，有两种边框的距离，内边距padding和外边距margin。

<!-- margin 内边距 -->
<p style="background:#FFEBCD; width: 100px; height: 100px; margin: 50px;">CSS 盒子模型</p>

<!-- padding 内边距 -->
<p style="background:#E6E6FA; width: 100px; height: 100px; padding: 20px;">CSS 盒子模型</p>

效果

CSS 盒子模型

margin: 50px; 盒子外面的距离，上下左右，全部保持50px。

对于上下左右，还可以分别设置 margin-left:50px; 左、 margin-right:50px; 右、 margin-top:50px; 上、 margin-bottom:50px; 下。

也可以写成一句话 margin: 5px 6px 7px 8px; 表示为 上5px、右6px、下7px、左8px。这个顺序是固定的。

CSS 盒子模型

padding:20px; 盒子里面的距离，上下左右，全部保持20px。

margin上面具备的方向距离微调和简写的性质，padding也都可以。