【CSS 基础】06 盒子模型

概述

盒子模型是DIV + CSS的基石之一，布局最重要的概念，它指定元素如何呈现在页面当中。网页就是由许多个盒
子通过不同的排列方式（纵向排列，横向排列，嵌套排列）堆积而成。
页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。
默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子。

盒子模型相关概念
1. 内容（width，height）
盒子内所包含的元素内容，内容具有宽度（width）和高度（height）。
2. 边框（border）
默认情况下，盒子模型没有边框
3. 内边距（padding）
内容到盒子的边框之间的距离
4. 外边距（marging）
边框和其它盒子之间的距离

---

盒子的宽高属性

1. width 宽度和height 高度属性对块级元素和行内块级元素有效果。
2. width 宽度：设置盒子的宽度。如果没有指定宽度，那么块级元素宽度默认是100%。
3. height 高度：设置盒子的高度。如果没设置高度，那么高度根据内容自适应。

#one{ /*未定义宽高,宽度默认100%,高度根据内容自适应*/    border: 1px solid blue;}#two{    width: 300px;    height: 100px;    border: 1px solid blue;}

---

padding 内边距

1. 分别设置四个方向的内边距
padding-top上边距、padding-right右边距、padding-bottom下边距、padding-left左边距

padding-top: 10px;/*上边距*/padding-right: 10px;/*右边距*/padding-right: 10px;/*下边距*/padding-left: 10px;/*左边距*/

2. 通过padding统一设置

• 1个属性值：表示上下左右的值都是该值
• 2个属性值：前者表示上下的值，后者表示左右的值
• 3个属性值：前者表示上边的值，中间的数值表示左右的值，后者表示下边的值
• 4个属性值：依次表示上、右、下、左的值，即顺时针排序

padding: 10px;/*四个方向*/padding: 10px 20px;/*上下,左右*/padding: 10px 20px 30px; /*上，左右，下*/padding: 10px 20px 30px 40px;/*上，右，下，左*/

---

margin 外边距

1. 分别设置四个方向的内边距
margin-top上边距、margin-right右边距、margin-bottom下边距、margin-left左边距

margin-top: 10px;/*上边距*/margin-right: 10px;/*右边距*/margin-right: 10px;/*下边距*/margin-left: 10px;/*左边距*/

2. 通过margin统一设置

• 1个属性值：表示上下左右的值都是该值
• 2个属性值：前者表示上下的值，后者表示左右的值
• 3个属性值：前者表示上边的值，中间的数值表示左右的值，后者表示下边的值
• 4个属性值：依次表示上、右、下、左的值，即顺时针排序

margin: 10px;/*四个方向*/margin: 10px 20px;/*上下,左右*/margin: 10px 20px 30px; /*上，左右，下*/margin: 10px 20px 30px 40px;/*上，右，下，左*/

3. 设定一个块级元素水平居中

margin: 0 auto;/*水平居中*/

---

全局reset取消默认内外边距

部分浏览器的盒子属性(margin, padding)默认值都为0，而有一部浏览器的默认值不为0，而且还不相等。为了适配方便，可以通过通用选择器将内外边距设置为0。

*{    padding: 0;    margin: 0;}

---

overflow 溢出设置

当盒子中的内容超过设置的高度时，默认会溢出显示，但是不占位置。

我们可以通过overflow属性，来设置内容超出范围的显示方式
1. 超出部分隐藏

overflow: hidden; /*超出部分隐藏*/

2. 超出部分出现下拉显示

overflow: auto; /*超出部分下拉显示*/

---

border 边框

1. border-width
设置边框宽度。属性值可以是px，也可以是thin（细边框）、medium（中等边框） 、thick （粗边框）
2. border-color
设置边框颜色
3. border-style
设置边框风格。属性值有none（无边框） 、solid（直线边框）、dashed（虚线边框）、dotted（点状边框）等。

border-width: 2px;border-color: red;border-style: dotted;

4. border
统一设置边框宽度、颜色和样式。这里属性值先后顺序没关系。

border: 2px solid green;

5. 某个边的样式单独设置
可以通过设置border-top-xxx、border-right-xxx、border-bottom-xxx、border-left-xxx或者border-top、border-right、border-bottom、border-left对某一面的边框样式进行单独设置。其中xxx代码width、color、style中某个属性。

border-bottom: 20px solid red;

---

---