CSS盒子模型

最新推荐文章于 2024-09-03 23:03:56 发布

海星船长丶

最新推荐文章于 2024-09-03 23:03:56 发布

阅读量263

点赞数 10

文章标签： css 前端 html5

本文链接：https://blog.csdn.net/2301_80632538/article/details/140253977

版权

CSS（层叠样式表）盒子模型是网页设计中一个重要的概念，它描述了HTML元素如何被渲染，并影响元素的布局和尺寸。在CSS中，每个元素都被视为一个矩形盒子

这个盒子由以下几个部分组成：
1. **内容（Content）**：盒子的中心，显示元素的实际内容，如文本、图片等。内容的尺寸可以通过`width`和`height`属性来指定。

代码演示为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
           width: 200px;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

页面检查效果演示为：

2. **内边距（Padding）**：内容与边框之间的空间。可以通过`padding-top`、`padding-right`、`padding-bottom`、`padding-left`单独设置，或者使用`padding`简写属性一次性设置。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
      border: 5px solid #000;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div>这是一个div</div>
</body>
</html>

页面检查效果演示：

3. **边框（Border）**：围绕内容和内边距的线条。边框的样式、宽度和颜色可以通过`border`相关的属性来设置，例如`border-width`、`border-style`和`border-color`。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
          width: 200px;
          height: 120px;
          border: 10px solid red;
      }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

页面检查效果演示：

4. **外边距（Margin）**：边框外的空白区域，用来分隔元素与相邻元素或容器的距离。外边距可以通过`margin-top`、`margin-right`、`margin-bottom`、`margin-left`单独设置，或者使用`margin`简写属性一次性设置。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
    }
    
    .one{
      margin-bottom: 20px;
    }
    .two{
      margin-top: 20px;
    }
  </style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是一个div</div>
</body>
</html>

页面检查效果演示：（选中第二个div外边距在top边距为20px）

海星船长丶

关注

10
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型

外边距可以通过`margin-top`、`margin-right`、`margin-bottom`、`margin-left`单独设置，或者使用`margin`简写属性一次性设置。可以通过`padding-top`、`padding-right`、`padding-bottom`、`padding-left`单独设置，或者使用`padding`简写属性一次性设置。在CSS中，每个元素都被视为一个矩形盒子。1. **内容（Content）**：盒子的中心，显示元素的实际内容，如文本、图片等。
复制链接

扫一扫