盒模型是css布局的基石,它规定了网页如何显示以及元素间相互关系。盒模型的作用是控制元素和元素之间,或者元素和内容之间的位置关系。
盒模型的组成:content(内容区)+padding(填充区)+border(边框区)+margin(外边界区)
content: 元素的宽和高 border : 盒子的边缘
padding:
作用:用来控制父元素和子元素之间的位置关系; 用来控制元素和内容之间的位置关系的。
特点1:添加了padding值之后,padding值会把元素原有的大小撑大; 如果让元素原本大小不变得话,需要在元素的宽高上减掉所加的padding;
特点2: padding属性对背景图片 是不起作用的,可以说背景图片的位置,是不受padding的影响的。
特点3:背景色会延展到padding区域。
使用方法一 :
padding-top:30px; 上填充
padding-right:30px; 右填充
padding-bottom:30px; 下填充
padding-left:30px; 左填充
方法二:
padding: 1 2 3 4
注:1、上 2、右 3、下 4、左,
margin:
作用:控制同辈元素之间的位置关系。
特点: margin是现在是在元素边框以外的空白区。
注:margin使用方法和padding一样。
盒子模型分为标准盒模型和怪异盒模型。
标准盒模型 的所占位置的组成:宽高(content)+padding+border+margin
元素宽度实际占有的位置大小: 宽+左右padding+左右border+左右margin
元素高度实际占有的位置大小: 高+上下padding+上下border+上下margin
怪异盒模型:比如提交按钮
元素的宽度:width(content+border+padding)+margin
标准盒模型和怪异盒模型之间可相互转换,转换方法为
属性:box-sizing: border-box(怪异盒模型)/content-box(标准盒模型)