盒模型

1.盒模型详解

1.初识盒模型

盒模型:css将页面中的每一个元素都看成是一个矩形的盒子。将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置。

每一个盒子都由以下属性构成:

• content(内容区)
• padding(内边距)
• border(边框)
• margin(外边距)

w3c盒子模型:

IE盒子模型:

2.content

content:内容区,元素的所有内容和子元素都在内容区中排列

内容区大小由width和height组成

• width:宽度
• height:高度

3.padding

padding:内容区到边框的距离是内边距

一共有四个方向的内边距

• padding-top
• padding-right
• padding-bottom
• padding-left

内边距的设置影响到盒子的大小,背景颜色会延伸到内边距上。

4.border

border:盒子的边框。边框属于盒子边缘,边框内的属于盒子内部,出了边框就是盒子外部

• 边框的大小影响盒子的大小
• 要设置边框,至少应该设置三个属性
  • 边框的宽度 border-width 默认值是3px
    • 四个值:上 右 下 左
    • 三个值:上 左右 下
    • 两个值:上下 左右
    • 一个值:上下左右
  • 边框的颜色 border-color 默认值是color
  • 边框的样式 border-style 默认值是none
    • solid 实线
    • dotted 点状虚线
    • dashed 虚线
    • double 双线

border属性的简写:border:style width color,没有顺序要求

5.margin

margin:盒子与其他盒子之间的距离。

margin不会影响盒子的可见框大小,但是可以改变盒子的位置。

margin有四个值:

• margin-top 设置正值,元素向下移动
• margin-right 默认情况下设置后不会产生任何效果
• margin-bottom 设置正值,其余元素向下移动
• margin-left 设置正值,元素向右移动
• 因为元素是从左往右排列,所以修改margin-left、top会使元素本身移动,修改margin-bottom、right会使其他元素移动

盒子的可见框大小:content + padding + border

2.盒模型的布局

1.盒模型在水平方向的布局

一个元素在其父元素中,水平布局必须满足以下等式:

margin-left + border-left + padding-left + width+padding-right + border-right + margin-right = 父元素的content宽度.

如果等式不成立,则称为过度约束,浏览器会自动调整等式:

• 1.如果没有值是auto,浏览器会自动调整margin-right的值使等式满足。
• 2.如果某个边距为auto,则会自动调整那个值使等式成立。
• 3.如果宽度为auto,则会将宽度调整为最大。
• 4.如果两个外边距为auto,宽度固定,则会将两个外边距调为相等。

2.水平方向的布局

父元素的高度由子元素撑起来。

溢出:子元素的大小超过父元素,则子元素会从父元素中溢出。

解决溢出:在父元素中设置overflow的值

• visible 默认值

• hidden 隐藏溢出

• scroll 生成滚动条(水平、竖直方向)

• auto 根据需要生成滚动条

3.外边距折叠问题

外边距折叠问题发生在垂直方向且相邻,分为兄弟元素外边距折叠和父子元素外边距折叠。

• 兄弟元素:兄弟元素之间的相邻外边距会取二者较大值

  .box1{
      width: 200px;
      height: 200px;
      background-color: #bfa;
      margin-bottom: 200px;
  }
  .box2{
      width: 200px;
      height: 200px;
      background-color: blue;
      margin-top: 100px;
  }
  

  

  兄弟元素的外边距折叠现象在开发中不是坏事,不需要处理。

• 父子元素:父子元素的相邻外边距,子元素会传递给父元素

  .box3{
      width: 200px;
      height: 200px;
      background-color: yellow;
  }
  .box4{
      width: 100px;
      height: 100px;
      background-color: green;
      margin-top: 100px;
  }
  

父子元素的外边距折叠问题会影响页面的布局,所以得处理。

解决方法:

1.通过加border是父子元素的外边距不相邻

2.修改父元素的外边距

3. 给父元素的伪元素添加内容

   .box1::before{
       content: "";
       display: table;
   }
   

4. 使用clearfix类(终极方法,既可以解决高度塌陷又可以解决外边距重叠的问题)

   /*给父元素添加clearfix类*/
   .clearfix::before,.clearfix::after{
       content: "";
       display: table;
       clear: both;
   }
   

3.行内元素的盒模型

行内元素的宽高只与内容有关

• 行内元素不能设置width、height,即使设置了也不生效
• 行内元素的border、padding、margin,垂直方向不会对页面布局产生影响。

如果想要给行内元素设置宽高?

将行内元素的display设置为inline-block

display常用属性:

• inline 行
• block 块
• inline 行内块(既可以设置宽高,又不会独占一行)
• table 将元素显示为表格
• none 不在页面显示,不占位置 类似的:bisibility:hidden; 不在页面显示,但占位置。

4.盒子的大小

默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定。

属性box-sizing:用来设置盒子尺寸的计算方式(width和height的作用范围)

• content-box 默认值,宽度和高度用来设置内容区的大小(也就是w3c盒子模型)
• border-box 宽度和高度用来设置整个盒子的大小,此时width和height指内容区、内边距、边框的总大小(也就是ie盒子模型)

div{
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid red;
    background-color: #bfa;
    box-sizing: border-box;
}

默认情况下:

修改为border-box后:

5.轮廓、阴影、圆角

1.轮廓

• 轮廓 outline
  • outline和border的设置方式一样,但是outline不会影响盒子的布局和大小

2.阴影

• 阴影 box-shadow

  • box-shadow用来设置元素的阴影效果,不会影响盒子的布局和大小,阴影默认和盒子一样大,被盒子覆盖掉了。

  • box-shadow:x(水平偏移量),y(竖直偏移量),阴影的模糊半径,阴影的颜色

  • 阴影的颜色我们一般用rgba,可以设置透明度,更加好看

    div{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        box-shadow: 10px 10px 20px rgba(0,0,0,.3);
    }
    

    效果如下:

3.圆角

• 圆角 border-radius
  • border-radius用来设置圆角,值是圆周的半径
  • 如果给一个值则是圆,
  • 如果给两个值则是椭圆,两个值之间用/隔开,第一个值代表x方向,第二个值代表y方向
  • border-radius:50%,将矩形转化为正方形。
  • border-radius有四个方向,可以单独设置。

原理如下: