web前端-CSS-盒子模型

web前端-盒子模型

CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。

如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。

我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

盒子一般分为：内容区，内边距，边框，外边距。、

标签大小=内容区+内边距+边框

1.内容区

盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。

width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
width和height属性只适用于块标签(包含行级块)。

如果标签的内边距和边框都没有，那么内容区的大小就等于标签的大小。

2.内边距

标签内容区与边框以内的空间。

内边距会影响整个和盒子的大小。使用padding属性来设置标签的内边距。

padding-left:10px;(内容与左边框的距离10px)
padding-right:10px;(内容与右边框的距离10px)
padding:10px 20px 30px 40px 
(内容与上边框距离10px，其余分别是right(右边)、bottom(底部)、left(左边))
padding:10px;上、下、左、右与边框的距离都是10px。

3.边框

可以在标签周围创建边框，边框是标签可见框的最外部。

可以使用border属性来设置盒子的边框： 
border:1px red solid; 
分别指定边框的宽度、颜色、样式。
border-top/left/right/bottom分别指定上右下左 四个方向的边框

边框的样式：dotted(点线)、dash(虚线)、soild(实线)、double(双线)

groove(槽线)。

设置四个角为圆角边框:{border-radius:10px}

设置左上为圆角边框:{border-top-left-radius:10px}

圆角设置范围为:0-50px。

4.外边距

标签边框与周围标签相距的空间。

使用margin属性可以设置外边距。

margin-top/right/bottom/left 提供了四个方向。

margin的值可以为负值。

margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等。

垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。

外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。

清除浏览器的默认样式

*{
margin: 0;
padding: 0;
}