了解盒模型

了解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;表示元素上、右、下、左外边距相等。
通过对盒模型的大致了解，希望能够对大家有所帮助！谢谢！