CSS盒子模型、Boder基础

最新推荐文章于 2022-08-19 15:51:45 发布

YYHHStarry

最新推荐文章于 2022-08-19 15:51:45 发布

阅读量496

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/YYHHStarry/article/details/121779300

版权

本文详细介绍了CSS盒模型的基本概念，包括边距、边框和填充的作用，以及如何通过border-style、border-width、border-color和margin、padding属性进行精确控制。实例演示了HTML元素如何通过盒模型实现灵活布局。

摘要由CSDN通过智能技术生成

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

CSS 边框属性

border-style 值:

none: 默认无边框、dotted: 定义一个点线边框、dashed: 定义一个虚线边框、solid: 定义实线边框、double: 定义两个边框。两个边框的宽度和 border-width 的值相同

border-width 属性为边框指定宽度

border-color属性用于设置边框的颜色

border-style：属性1，属性2，属性3，属性4

上->右->下->左

border-style：属性1，属性2，属性3

上->左右->下

border-style：属性1，属性2

上下->左右

border-style：属性1

上下左右属性相同

CSS margin(外边距)

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

可能的值：auto-设置浏览器边距、length-定义一个固定的margin、%-定义一个使用百分比的边距

margin属性可以有一到四个值：

margin:25px 50px 75px 100px；

上边距为25px、右边距为50px、下边距为75px、左边距为100px

margin:25px 50px 75px;

上边距为25px、左右边距为50px、下边距为75px

margin:25px 50px;

上下边距为25px、左右边距为50px

margin:25px;

所有的4个边距都是25px

padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

length-定义一个固定的填充

%-使用百分比值定义一个填充

padding-简写属性

padding-bottom-设置元素的底部填充

padding-left-设置元素的左部填充

padding-right-设置元素的右部填充

padding-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>
    <link href="./box.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="header">
        头部
        <div class="logo"></div>
        <div class="nav"></div>
    </div>
    <div class="conten">
        主体
        <div class="conten_left"></div>
        <div class="middle"></div>
        <div class="content_right"></div>
    </div>
    <div class="footer">
        脚部
        <div class="footer_left"></div>
        <div class="footer_right"></div>
    </div>
</body>

</html>

.header {
    width: 100%;
    height: 100px;
    background-color: aqua;
    text-align: center;
}

.conten {
    width: 100%;
    height: 500px;
    background-color: blue;
    margin-top: 10px;
    text-align: center;
}

.footer {
    width: 100%;
    height: 100px;
    background-color: indigo;
    margin-top: 10px;
    text-align: center;
}

YYHHStarry

关注

1
点赞
踩
1

收藏

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

CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(.
复制链接

扫一扫