CSS3盒模型

CSS盒模型

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

CSS盒模型属性

width、height属性

1. width表示盒子模型中内容的宽度
2. height表示盒子模型中内容的高度

border属性

1. border:边框的意思，描述盒子的边框

2. 边框有三个要素： 粗细 线性样式 颜色

border :solid     5px  red;
        线性样式   粗细   颜色

padding属性

1. padding是盒子的内边距，即盒子边框内壁到文字的距离

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

   padding-top：上padding

   padding-right：右padding

   padding-bottom：下padding

   padding-left：左padding

3. padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding

   padding:10px 20px 30px 40px
   //分别对应：上  右   下   左
   

4. padding属性如果用三个数值以空格进行设置，表示上、左右、下的padding

5. padding属性如果用两个数值以空格进行设置，表示上下、左右的padding

6. padding属性如果用一个数值以空格进行设置，表示上下左右的padding

margin属性

1. margin是盒子的外边距，即盒子和其他盒子之间的距离

2. margin有四个方向

   margin-top：上margin

   margin-right：右margin

   margin-bottom：下margin

   margin-left：左margin

3. margin的塌陷

   竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准

   当外边距塌陷时外边距之间的计算方式：

   ①若两个值都是正数 则取较大的值
   ②若两个值都是负数 则取绝对值较大的值
   ③若一正一负 则取两个值的和

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

5. 盒子的水平居中

   将盒子左右两边的margin都设置为auto，盒子将水平居中

   .box{
       margin:0 auto;/*上下是0，左右自动*/
   }
   

box-sizing属性（兼容到IE9）

1. 将盒子添加box-sizing：border-box；之后，盒子的width、height数字就表示盒子实际占有的宽高（不含margin），即padding、border变为“内缩”的，不再“外扩”
2. box-sizing属性大量应用于移动网页制作中

行内元素、行内块级元素、块级元素

1. 行内元素：span、strong、b、em、del等

   行内元素特征：

   (1)设置宽高无效

   (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

   (3)不会自动进行换行

2. 行内块元素：img、input等

   行内块状元素特征：

   (1)不自动换行

   (2)能够识别宽高

   (3)默认排列方式为从左到右

3. 块级元素：h1-h6、p、div、ul、ol、li等

   块状元素特征：

   (1)能够识别宽高

   (2)margin和padding的上下左右均对其有效

   (3)可以自动换行

   (4)多个块状元素标签写在一起，默认排列方式为从上至下

元素转换

1. display:inline;转换为行内元素
2. display:block;转换为块级元素
3. display:inline-block;转换为行内块状元素

元素的隐藏

1. display:none;

   可以将元素隐藏，元素将彻底放弃位置，如同没有书写它的标签一样

2. visibility:hidden;

   可以将元素隐藏，但是元素不放弃自己的位置

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

/*CSS样式*/
.box1{
        width: 60px;
        height: 60px;
        padding: 0;
        margin: 20px;
        border:20px;
        background-color: blue;
      }
      .box2{
        width: 60px;
        height: 60px;
        padding: 0;
        margin: 20px;
        background-color: chartreuse;
        /*display:none;*/
        visibility: hidden;
      }
      .box3{
        width: 60px;
        height: 60px;
        padding: 0;
        margin: 20px;
        background-color: rgb(255, 0, 106);
      }

盒模型计算

1. 盒子的实际宽度

   左右padding+左右border+width

2. 盒子的实际高度

   上下padding+上下border+height

3. 若出现box-sizing，盒子实际高度和盒子实际宽度就是width和height