了解css盒模型
大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识!
什么是盒模型
在CSS中,有着许多的元素,就像你在CSS这个大 “商场”中购买了商品,当然是已经被包装起来了,而盒模型就是作为包装的存在。
盒模型可谓是CSS布局的基石,它规定了网页元素的显示方式以及元素之间的相互关系。CSS里所有的元素都可以拥有像盒子一样的外形和平面空间,即都包含内容区、填充区、边框、边界(外边距)四个部分,这就是盒模型。
盒模型有两种:一种为标准盒模型(box-sizing: content-box),一种为怪异盒模 型(box-sizing: border-box)
盒模型的组成
盒模型的组成:content(内容区)+padding(填充区)+border(边框区)+margin(外边界区)
content即为元素内容所占的宽度和高度;
padding则可以增原有内容区的宽高,若要使其内容区大小不变,那么只需在 原来基础上减去所加的padding值即可。父元素之内包含子元素,padding的存在 不仅可以控制父元素与子元素之间的位置关系,还可控制元素与内容间的位置;
margin指的是元素边框以外的空白区,由此可以控制同级元素间的位置关系, 其取值可正可负,并不影响元素的宽高;
border是元素的边缘,能够将元素包起来的结构;
这些盒模型的组成结构,它们相辅相成,对元素进行了完美的“包装”,能够更好的呈现于页面之上。
使用方法
了解了它的结构,当然要学会使用了
例如:border:1px solid/dashed/double #000:
padding 、margin的使用大同小异,以margin为例:
① margin-top:30px; 上外边距
margin-right:30px; 右外边距
margin-bottom:30px; 下外边距
margin-left:30px; 左外边距
② 复合式写法
当margin后有4个值时: margin:20px 30px 10px 5px;分别表示元素上、右、下、左外边距;
当margin后有3个值时: margin:20px 5px 30px;分别表示元素上、左右、下外边距;
当margin后有2个值时: margin:20px 5px;分别表示元素上下、左右外边距;
当margin后有1个值时: margin: 20px;表示元素上、右、下、左外边距相等。
通过对盒模型的大致了解,希望能够对大家有所帮助!谢谢!