CSS盒模型

最新推荐文章于 2024-04-28 17:46:18 发布

BigData_0504

最新推荐文章于 2024-04-28 17:46:18 发布

阅读量58

点赞数

分类专栏：前端 # HTML+CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_42447364/article/details/125124437

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

HTML+CSS

8 篇文章 0 订阅

订阅专栏

一. 标准盒模型

1. 标准盒模型组成

CSS盒子由content、padding、border、margin三个部分组成，我们可以将其理解为快递

content：我们购买的商品

padding：商品和盒子之间的空隙

border：快递盒子📦

margin：快递和快递之间的距离

**给盒模型设置的背景色会平铺到非margin区域**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1{
      width: 100px;
      height: 100px;
      padding: 10px;
      margin: 10px;
      background-color: aqua;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  
</body>
</html>

2.块级盒子和内联级盒子

常见的块级盒子比如<div>,内联级盒子如<strong>、<span>等

块级盒子特性：

对各种样式都会生效，比如设置的宽度和高度
独占一行
在不写宽度时，块级盒子宽度和父元素相同

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1{
      height: 100px;
      padding: 10px;
      margin: 10px;
      background-color: aqua;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  
</body>
</html>

所占有的形状为矩形

内联级盒子特性：

在排列中不会独占一行
所占有的形状不一定是矩形
并不是所有样式都会生效，比如对<span>设置宽度和高度
内联级盒子的宽度由内容决定
设置内联标签之间由一定的距离

3. 盒模型存在的问题

margin-top传递问题，盒子一是盒子二的父元素，当我们给盒子二设置margin-top时，可以观察到盒子一的margin-top值也发生了变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div1{
      width: 200px;
      height: 150px;
      background-color: red;
      /* margin-top: 10px; */
    }
    .div2{
      width: 100px;
      height: 150px;
      background-color: purple;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="div1">
    <div class="div2">盒子二</div>
  </div>

我们可以通过padding或者是border来解决这个问题，padding设置给父元素或者是BFC，后面会专门发文章详细解析BFC

设置margin数值时，会出现重叠，取二者像素的最大值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div1{
      width: 200px;
      height: 150px;
      background-color: red;
      margin-bottom: 30px;
    }
    .div2{
      width: 100px;
      height: 150px;
      background-color: purple;
      margin-top: 80px;    
    }
  </style>
</head>
<body>
  <div class="div1">
    盒子一
  </div>
  <div class="div2">盒子二</div>
  
</body>
</html>