5.2 盒子模型相关属性

2、盒子模型相关属性

2.1 边框属性

border：宽度值 边框样式 边框种颜色；

 .div1{
        border:1px solid red;
      }

2.2 标签边距

margin：上外延边距 右外延边距 下外延边距 左外延边距；
padding：上内延边距 右内延边距 下内延边距 左内延边距；
四种值得情况：
如果规定一种值：比如：div {margin: 50px} - 所有四个外边距都是 50px。
如果规定两种值：比如：div {margin: 50px 10px} - 上外边距和下外-边距是 50px，左外边距和右外边距是 10px。
如果规定三种值：比如：div {margin: 50px 10px 20px}- 上外边距是 50px，左外边距和右外边距是 10px，下外边距是 20px。
如果规定四种值：比如：div {margin: 50px 10px 20px 30px} - 上外边距是 50px，右外边距是 10px，下外边距是 20px，左外边距是 30px。

2.3 常用样式

2.4 box-shadow属性

语法格式：
box-shadow: h-shadow v-shadow blur spread color inset;

div{
        box-shadow: 10px 10px 5px #888888;
    }

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

2.5 box-sizing属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
语法：
box-sizing: content-box|border-box|inherit;