CSS盒模型详解-优快云博客

css-盒子模型

一、盒模型简介
二、内容区（content）
三、边框（border）
四、内边距（padding）
五、外边距
六、行内元素的盒模型
七、盒子大小
八、轮廓、阴影和圆角

一、盒模型简介

1.我们看到的网页其实是布局大大小小的盒子组合而来
2.盒子由以下几部分组成：
（1）内容区（content）
（2）内边距（padding）
（3）边框（border）
（4）外边距（margin）
在这里插入图片描述

二、内容区（content）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;//此处设置的宽度仅为content区的宽度为200px，高度同理
      height: 200px;
    }

  </style>
</head>
<body>
<div class="box">盒子模型</div>

</body>
</html>

三、边框（border）

1.边框会撑开盒子，影响盒子大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{//此时盒子的大小为240px*240px
      width: 200px;
      height: 200px;
      border-width: 20px;
      border-color: red;
      border-style: solid;
      

    }

  </style>
</head>
<body>
<div class="box">盒子模型</div>

</body>
</html>

2.边框属性（不同的浏览器会有不同的默认的boder-width，boder-height）
在这里插入图片描述

在这里插入图片描述
3.表格的细线边框

四、内边距（padding）

1.盒子的内边距会撑开盒子，影响盒子大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      padding: 20px;
      background-color: #00a4ff;
    }
    .inner{
      width: 100%;
      height: 100%;
      background-color: #00b38a;
    }

  </style>
</head>
<body>
<div class="box">//此时盒子大小为260px*260px
  <div class="inner">内容区</div>
</div>

</body>
</html>

在这里插入图片描述

五、外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
    }
    .inner{
      width: 100%;
      height: 100%;
      background-color: #00b38a;
      margin-top: 20px;

    }

  </style>
</head>
<body>
<div class="box">
  <div class="inner">内容区</div>
</div>

</body>
</html>

在这里插入图片描述

1.外边距不会影响盒子可见框的大小，但会影响盒子实际占有空间的大小
2.注意：元素在页面中是按照自左向右的顺序排列的，所以默认情况下，我们设置左和上外边距会移动元素自身，而设置右和下外边距则会移动其他元素
3.外边距可以使块级元素居中但必须满足以下两个条件：
（1）盒子的宽度确定
（2）盒子的左右外边距设为：auto
4.外边距的折叠问题：条件:垂直方向且相邻的盒子
（1）兄弟元素折叠问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
    }
    .first{
      width: 50px;
      height: 50px;
      background-color: #00b38a;
      margin-bottom: 40px;//两元素外边距不叠加，取二者较大值

    }
    .second {
      width: 50px;
      height: 50px;
      background-color: #1c036c;
      margin-top: 40px;
    }

  </style>
</head>
<body>
<div class="box">
  <div class="first">盒子一</div>
  <div class="second">盒子二</div>
</div>

</body>
</html>

运行结果：
在这里插入图片描述

(2)父子元素：父子元素间相邻外边距，子元素的上外边距会传递给父元素
解决折叠问题前：
在这里插入图片描述

解决折叠问题后：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;//解决折叠问题方案一：给父元素加边框
      background-color: #00a4ff;
    }
    .son{
      width: 50px;
      height: 50px;
      background-color: #00b38a;
      margin-top: 40px;

    }

  </style>
</head>
<body>
<div class="box">
  <div class="son">盒子</div>
</div>

</body>
</html>

在这里插入图片描述
解决问题方案：
（1）给子元素添加margin-top
（2）给父元素加边框（这两种方法的本质都是把父元素和子元素隔开，但需修改父元素盒子大小）

六、行内元素的盒模型

1.行内元素不支持设置高度和宽度
2.可为行内元素设置padding、margin、border，但这些样式只会在水平方向影响水平方向的盒子，不会影响垂直方向盒子的布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    span{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
      /*display: inline-block;*/
    }
    div{
      width: 50px;
      height: 50px;
      background-color: #00b38a;

    }

  </style>
</head>
<body>
<span>行内元素</span>
<div>块级元素</div>

</body>
</html>

运行结果：
在这里插入图片描述

3.针对行内元素上述的特征，我们可以使用display将行内元素转换为块级元素，进行样式的设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    span{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
      display: inline-block;//display：inline（转换为行内元素）/block（转换为块级元素）/inline-block（行内块元素）
    }
    div{
      width: 50px;
      height: 50px;
      background-color: #00b38a;

    }

  </style>
</head>
<body>
<span>行内元素</span>
<div>块级元素</div>

</body>
</html>

运行结果：
在这里插入图片描述
4.行内块元素：行内块元素具有块级元素的所有特性，同时行内块元素并不独占一行
5.补充：display还可设置元素的隐藏效果

display
table
none	display属性值设为none时，隐藏元素且不占有位置

6.补充visibility属性

visibility
visible	元素正常显示在页面
hidden	隐藏元素，且占据位置

七、盒子大小

1.box_sizing属性

属性值
content-box	设置height、width属性来设置盒子的内容区大小
border-box	设置height、width属性来设置盒子的可见框大小

八、轮廓、阴影和圆角

1.outline（轮廓）：用法与border一只，与border不同，设置元素的轮廓不会影响其他盒子的布局
2.box-shadow（阴影）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    div{
      width: 100px;
      height: 100px;
      background-color: #00b38a;
      box-shadow: 10px 10px rgba(255,145,223,.3);//水平偏移 数值大小 阴影颜色及透明度
    }

  </style>
</head>
<body>
<div>块级元素</div>

</body>
</html>

运行结果：
在这里插入图片描述
3.border-radius（圆角）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    div{
      width: 100px;
      height: 100px;
      background-color: #00b38a;
      border-radius: 10px;//设置半径大小
    }

  </style>
</head>
<body>
<div>块级元素</div>

</body>
</html>