最详细的CSS入门-04-盒子模型

盒子模型

所谓的盒子模型就是把HTML中的布局元素看作是一个矩形的盒子


总结

• 盒子是由元素的内容、边框、内外边距组成的
• 盒子的文字和图片就是内容区域
• 盒子的厚度称之为盒子的边框
• 盒子内容于边框的距离 是 内边距
• 盒子于盒子之间的间距是外边距

盒子边框

语法

border:border-width | border-style | border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	定义边框的颜色

边框的样式

• none ：没有边框
• solid：边框为单实线
• dashed : 边框为虚线
• dotted : 边框为点线

border:1px solid red

内边距

padding属性用于设置内边距。边框于内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

语法

padding:10px; /*上下左右的内边距都是10px*/

值得个数	意思
1个值	上下左右
2个值	padding：上下 左右
3个值	padding ：上 左右 下
4个值	padding ： 上 右 下左 顺时针

练习

内盒尺寸计算

宽度
width = content width + padding + border
高度
height = content height + padding + border

加入内边距会导致盒子撑大 解决办法

• 把width减去padding和边框
• 设置 box-sizing：border-box

外边距

margin外边距属性主要是用于控制盒子之间的距离
属性和写法跟padding是一样的

块级盒子水平居中

1. 设置一个宽度
2. 左右的外边距为auto

/*实际工作中常用*/
.header {
width:1200px;
margin:0 auto;
}

清除元素的默认内外边距

 - {
	padding:0;/*清除内边距*/
	margin:0/* 清除外边距 */
	
}

外边距合并
使用margin定义快元素的垂直外边距会出现合并

• 当上下两个盒子相遇，两个盒子都有外边距，则上面的margin-bottom与下面的margin-top重合
• 取两者之间最大的值 这种称之为外边距塌陷
• 
  解决方案 尽量只给一个盒子添加 margin值