CSS-盒模型
CSS-盒模型
CSS-盒模型1. 认识盒模型2. 相关的css属性内容区内填充边框外边距3. 怪异和盒模型4. overflow5. 默认样式
1. 认识盒模型
在HTML中，标签都是一个矩形盒子模型，他们包含有内容区（content）、内填充（padding）、边框（border）、外边距（margin），这些特性和日常生活中常见盒子比较相似，所以我们称之为盒模型。每一个HTML标签都可以看做一个盒子。
2. 相关的css属性
盒模型示意图：
按照盒子从里到外的顺序来学习：
内容区
放置内容的部分，可以由盒子中的内容撑开，或者设置 width height 属性来指定固定的大小。
div{width: 100px;height: 100px;background-color: red; /*添加背景色以便于观察*/
}
<div> 标签体 </div>
span{width: 100px;height: 100px;background-color: red; /*添加背景色以便于观察*/
}
<span> 我是span </span>
内填充
相当于内容四周的填充物（例如：泡沫、报纸、气垫等），CSS属性里面称之为内边距padding；
padding属性接收长度值或百分比值，但是不接收负值：
div{padding-top: 10px; /*上内边距*/padding-right: 5px; /*右内边距*/padding-bottom: 5px; /*下内边距*/padding-left:5px; /*左内边距*/
}
padding属性可以使用一个属性表示四个方位的值，接收的值个数不同意思不同：
div{ padding: 10px; } /* 上下左右 全部10px */
div{ padding: 10px 5px; } /* 上下 10px 左右 5px */
div{ padding: 10px 5px 7px; } /* 上 10px 左右 5px 下 7px */
div{ padding: 10px 9px 8px 7px ; } /* 上 10px 右 9px 下 8px 左 7px */
内边距部分会显示盒子背景；
内边距会撑大盒子的整体大小，但是不会影响内容的大小；
这种一个属性有很多子属性的我们称之为复合属性。
边框
相当于盒子的包装本身，CSS属性里面称之为border，是包裹在padding外层的东西；
可由统一的border属性来规定边框大小：
/*三个值分别表示： 四周边框大小 边框线类型 边框线颜色 */
div{ border: 5px solid red; }
边框线类型：(常用的需要记的，已用斜体标出)
值 描述 none 定义无边框。 solid 定义实线。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 double 定义双线。双线的宽度等于 border-width 的值。
border也可由分解属性表示：
div{border-top: 10px solid red;border-right: 5px solid red;border-bottom: 7px solid red;border-left: 8px solid red;
}
还可进一步分解为border-width、border-style、border-color
/* case 1 */
div{border-width: 5px;border-style: solid; border-color: red;
}
/* case 2 */
div{border-top-width: 4px;border-top-style: solid;border-top-color: pink;
}
外边距
相当于盒子和其他盒子之间的间距，CSS属性里面称之为margin；
div{margin-top: 10px; /*上内边距*/margin-right: 5px; /*右内边距*/margin-bottom: 5px; /*下内边距*/margin-left:5px; /*左内边距*/
}
padding属性可以使用一个属性表示四个方位的值，接收的值个数不同意思不同：
div{ margin: 10px; } /* 上下左右 全部10px */
div{ margin: 10px 5px; } /* 上下 10px 左右 5px */
div{ margin: 10px 5px 7px; } /* 上 10px 左右 5px 下 7px */
div{ margin: 10px 9px 8px 7px ; } /* 上 10px 右 9px 下 8px 左 7px */
外边距是在边框外层的，不会显示盒子的背景；
margin属性的值和padding很类似，演示一下~
margin多了左右的auto值，可以用来将盒子在父级中左右居中；
3. 怪异和盒模型
怪异盒模型和标准盒模型的区别在于，width、height所包含的部分不同。标准盒模型width和height只表示content内容区。而怪异盒模型的width、height包含content、padding和border部分。
我们可以使用 box-sizing 属性来指定盒模型类型：
/*标准盒模型*/
.div1{box-sizing: content-box; /*标准盒模型，默认值*/width: 100px;height: 100px;padding: 20px;border: 10px solid green;background-color: red;
}
/*怪异盒模型*/
.div2{box-sizing: border-box; /*开启怪异盒模型*/width: 100px;height: 100px;padding: 20px;border: 10px solid green;background-color: red;
}
4. overflow
overflow属性可以规定盒子超出部分的显示方式
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 超出部分被隐藏。 |
| scroll | 内容不会超出盒子，但是始终会显示滚动条。 |
| auto | 只有当内容超出盒子时，才显示滚动条，不超出则没有滚动条。 |
5. 默认样式
HTML中有很多标签有默认的边距或其他样式，其目的是当没有写css样式的时候，让布局看起来不至于很糟糕。
但是当我们需要按照设计图来写网页时，这些默认样式会干扰我们，所以我们需要清除掉。
/* case 1 最省事，但是最不推荐 */
*{ margin:0; padding:0; list-style:none; border:none;}
/* case 2 相对繁琐，但是是较好选择 */
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul{margin:0;padding:0;list-style:none;}
img{border:none;}