# 盒模型

作者: 多叉树；转载须注明出处

# 盒模型

所有的HTML标签都可以看成矩形盒子,由width，height，padding，border构成，称为盒模型。

盒子的总宽度 = width + 左右padding + 左右border

盒子的总高度 = height + 上下pading + 上下border

Untitled

# width

表示盒子内容的宽度。

width属性的单位通常是px，也会涉及到百分数、rem等单位。

当块级元素（div，h系列，li 等）没有设置width属性的时候，它将自动撑满，但这并不意味着width可以被继承。

# height

表示盒子内容的高度

height属性的单位通常是px，也会涉及到百分数、rem等单位

当块级元素（div，h系列，li 等）没有设置height属性的时候，它将自动撑满，但这并不意味着height可以被继承。

# padding

padding 是盒子的那边距，即盒子边框内壁到内部文字（或者子元素）的距离

四个方向的padding，可以分别用小属性进行设置

小属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	左padding

<!--小属性demo-->
<style>

    .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        padding-left: 20px;
        padding-top: 30px;
        padding-bottom: 40px;
        padding-right: 50px;
    }

</style>

<div class="box1"></div>

padding 合并写法

<!--padding合并写法-->
<!--      上   右   下   左-->
padding: 10px 10px 10px 10px;

<!--      上  左右  下-->
padding: 10px 20px 10px;

<!--     上下 左右 -->
padding: 10px 20px

# margin

margin 是盒子的外边距，即盒子和其他盒子间的距离。

margin 的四个方向

属性名称	解释
margin-top	上 margin，向上扩展
margin-right	右margin，向右扩展
margin-bottom	下margin，向下扩展
margin-left	左margin，向左扩展

两个盒子之间的，margin 不会叠加，只以大的margin的值为准。

Untitled

一些元素都有默认的margin，在开始制作网页的时候，要清除他们，比如 body、ul、p等

实践：盒子实现水平居中的实现方式

<!-- 主要是 auto属性-->
.box1 {
    margin: 10px auto;
}

# box-sizing 属性

默认值为 content-box ，此时的width和height 表示的是去除掉边框和内边距后剩余的空间。

Untitled

如上图，一个盒子默认情况下，它留给子元素的空间就是宽300像素，高200像素的可用面积。即 width 和 height属性的区域。

box-sizing: border-box

如果添加了如上的属性后，此时留给子元素的可用空间只有宽270px 、高170px了。可用面积面积 = (width - pading * 2 - border * 2) * (height - pading * 2 - border* 2) 。

也就是 width和height 就是盒子的全部高度和宽度

<!--小属性demo, 此时留给孩子的实际可用面积是 宽270px = (300px-(10px*2)-(5px*2)) 高 170px = (200px-(10px*2)-(5px*2)) 了-->
<style>

    .box1 {
        width: 300px;
        height: 200px;
        padding: 10px;
        border: 5px solid red;
        margin: auto;
        box-sizing: border-box;
    }
</style>
<div class="box1">
</div>

# display 属性

块级元素

独占一行，并且有宽高的区域。
特点：如果不设置宽高，会被内容元素自动撑满。
例如：div、section等。

行内元素

可以和其他的行内元素并排显示。
特点：无法设置宽高。
例如 span 等。

行内块

img 是特殊的行内块，他们既能设置宽度和高度，也能并排显示。

行内元素和块级元素的相互转换

元素	规则
display:block	将元素转为块级元素
display:inline	将元素转为行内元素，转为行内元素的情况并不多见
display:inline-block	将元素转为行内块
display:none	隐藏元素，元素会把位置也放弃

将行内元素转块级元素

<!--一个将行内元素转为块级元素的例子-->
.clickA {
    display: block;
    width:200px;
    height: 200px;
    background-color: red;
}

<a href="#" class="clickA">我是点击</a>

隐藏元素的两种写法

<!--一个隐藏元素的例子 display:none-->

<style>

  .clickA {
      display: none;
      width:200px;
      height: 200px;
      background-color: blue;
  }
</style>

<a href="#" class="clickA">我是点击</a>

<!--一个隐藏元素的例子，隐藏但不放弃自己的位置-->

<style>

  .clickA {
      visibility: hidden;
      width:200px;
      height: 200px;
      background-color: blue;
  }
</style>

<a href="#" class="clickA">我是点击</a>

← CSS的继承性浮动 →