CSS盒模型和box-sizing

盒模型

1.1宽度

定义

width 属性设置元素的宽度

• auto 元素实际宽度
• length 设置像素级px宽度
• % 基于父级元素的百分比宽度
• inherit 从父级元素继承宽度，也就是等于父级元素的宽度

 用法

.auto {
    width:auto;
}
.length {
    width:200px;
}
.pct {
    width:100%;
}
.inherit {
    width:inherit;
}

 1.2高度

 定义

height属性设置元素的⾼度 注意：height属性不包括填充，边框，或边距 取值：

• auto 元素实际高度
• length 设置像素级px高度
• % 基于父级元素的百分比高度
• inherit 从父级元素继承高度，也就是等于父级元素的高度

 用法

.auto {
    height:auto;
}
.length {
    height:200px;
}
.pct {
    height:100%;
}
.inherit {
    height:inherit;
}

 1.3 CSS内边距（padding）

定义

padding 简写属性在⼀个声明中设置所有内边距属性 

取值：

• auto 自动计算内边距
• length 设置像素级px内边距
• % 基于父级元素宽度的百分比的内边距
• inherit 从父级元素继承内边距

用法 

p {
    /* 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px */
    padding:10px 5px 15px 20px;
    /* 上内边距是 10px 右内边距和左内边距是 5px 下内边距是 15px */
    padding:10px 5px 15px;
    /* 上内边距和下内边距是 10px 右内边距和左内边距是 5px */
    padding:10px 5px;
    /* 4 个内边距都是 10px */
    padding:10px;
}

 1.4 CSS外边距（margin）

 定义

margin 简写属性在⼀个声明中设置所有外边距属性。该属性可以有 1 到 4 个值，与内边距相同 

 注意：允许使⽤负值

取值：

• auto 自动计算外边距
• length 设置像素级px外边距
• % 基于父级元素宽度的百分比的外边距
• inherit 从父级元素继承外边距

 用法

p {
    /* 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px */
    margin:10px 5px 15px 20px;
    /* 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px */
    margin:10px 5px 15px;
    /* 上外边距和下外边距是 10px 右外边距和左外边距是 5px */
    margin:10px 5px;
    /* 4 个外边距都是 10px */
    margin:10px;
}

 1.5 CSS边框 （border）

 定义

border 简写属性在⼀个声明设置所有的边框属性 可以按顺序设置如下属性：

• border-width
• border-style
  • solid 实线
  • dotted 点状线
  • double 双实线
  • dashed 虚线
• border-color

用法 

/* 设置四条边框的样式 */
p {
    border:5px solid #ff0000;
}
/* 设置每⼀条边框的样式 */
p {
    border-top:10px solid red;
    border-left:20px dotted green;
    border-right:30px double orange;
    border-bottom:40px dashed red;
}
/* css画一个三角形 */
div {
    width:0;
    height:0;
    border:10px solid transparent;
    border-top-color:red;
}

 1.6 border-radius

 border-radius 属性是一个简写属性，用于设置四个 border-radius 属性。

border-radius: 1em/5em;

/* 等价于： */

border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em

border-radius: 4px 3px 6px / 2px 4px;

/* 等价于： */
/* 斜杠前水平距离 斜杠后垂直距离 */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
/*第四个角对角是第二个水平距离为3px */

盒模型定义

盒模型通过一个模型来描述元素在页面中占用的空间。 

• W3C 标准模型 元素的设置宽度和设置高度指内容的宽度和高度
  • 元素总宽度=设置宽度+左填充+右填充+左边框+右边框+左边距+右边距
  • 元素总高度=设置高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
• IE模型 元素的设置宽度和设置高度包括内容的宽度和内边距以及边框宽高
  • 元素总宽度=设置宽度+左边距+右边距
  • 元素总高度=设置高度+上边距+下边距

box-sizing属性 

box-sizing 属性允许您以特定的⽅式定义匹配某个区域的特定元素。 取值：

• content-box 指定盒模型为 W3C 标准模型，元素的宽度 = 设置宽度 + 边框宽度 + 内边距
• border-box 指定盒模型为 IE模型，元素的宽度 = 设置宽度 - 边框宽度 - 内边距
• inherit 从父元素继承 box-sizing 属性值

 盒模型用法

/* 设置盒子模型为ie盒⼦模型 */
.container {
    box-sizing:border-box;
}
/* 设置盒子模型为标准盒⼦模型 */
.container {
    box-sizing:content-box;
}

outline内边框 

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width

<style>
    p {
        border: 1px solid #f00;
        outline: 1px solid green;
    }
</style>
<p>hello</p>

 外边距合并

情况一：两个盒子上下并列，上面盒子设置下边距，下面盒子设置上边距，两个距离会合并在一起，两个值不一样，会使用大值

<style>
.div1{
  width: 300px;
  height: 300px;
  background-color: #f00;
  margin-bottom: 30px;
}
.div2{
  width: 300px;
  height: 300px;
  background-color: aqua;
  margin-top: 50px;
}
</style>
<div class="div1"></div>
<div class="div2"></div>

 情况二：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

 

<style>
  .div1{
      width: 300px;
      height: 300px;
      background-color: #f00;
      margin-top: 30px;/*距离外边的盒子30px*/
  }
  .div2{
      width: 100px;
      height: 100px;
      background-color: aqua;
      margin-top: 30px;/*盒子并没有发生改变*/
  }
</style>
<div class="div1">
  <div class="div2"></div>
</div>

 情况三：假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

 

<style>
.div1{
    margin-top: 30px; /*盒子会距离上面30px*/
    margin-bottom: 30px; /*盒子不会改变，距离进行两合并*/
}
.div2{
    width: 100px;
    height: 100px;
    background-color: aqua;
}
</style>
<div class="div1"></div>
<div class="div2"></div>

注意：有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并，所以想要让外边距合并消失，可以设置float属性