盒⼦模型基本概述。
盒⼦模型
1.什么是盒⼦模型。
盒⼦模型是把HTML中元素看作为⼀个矩形盒⼦，相当于⼀个装内容的容器。
2.盒⼦模型的组成。
⼀个盒⼦由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。
3.盒⼦边框（border）
属性：设置盒⼦边框样式（border style）。
1、border-width:  设置边框宽度
2、border-style:    设置边框样式
none    没有边框
solid    实线
dotted    点线
dashed    虚线
3、border-color：设置边框颜⾊
4、borde具体属性设置：
border-top-color:green;
5、去掉边框写法：
padding是外边距还是内边距border:  none;
4.盒⼦内边距（padding）
padding属性⽤于设置内边距。 是指 边框与内容之间的距离。
padding-top：上内边距.
padding-right：右内边距。
padding-bottom：下内边距。
padding-left：左内边距。
5.盒⼦外边距（margin）
外边距实现盒⼦居中
margin属性⽤于设置外边距。 设置外边距会在元素之间创建“空⽩”， 这段空⽩通常不能放置其他内容。
margin-top：上外边距 。
margin-right：右外边距。
margin-bottom：下外边距。
margin-left：上外边距。
margin：上外边距 右外边距 下外边距 左外边。
可以让⼀个盒⼦实现⽔平居中，需要满⾜⼀下两个条件：
必须是块级元素。
盒⼦必须指定了宽度（width）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。