HTML-0618

Starnight55

于 2024-06-19 20:59:42 发布

阅读量627

点赞数 27

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_61743026/article/details/139776205

版权

一.盒子模型

HTML中的盒子模型是指在渲染网页时，将每个元素视为一个矩形盒子，并根据盒子的内容、内边距、边框和外边距等属性来确定元素在页面中的布局和样式。

盒子模型的计算方式有两种：

1 标准盒子模型（Content Box）：元素的宽度和高度仅包括内容区域的大小，不包括内边距、边框和外边距。即，元素的总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距，总高度的计算方式类似。

2. IE盒子模型（Border Box）：元素的宽度和高度包括内容区域、内边距和边框的大小，不包括外边距。即，元素的总宽度 = 内容宽度 + 左边框 + 右边框 + 左内边距 + 右内边距，总高度的计算方式类似。

这两种盒子模型具体内容之后再具体介绍

封装盒子的元素有:

1. 内容区域（Content）2. 内边距（Padding）3. 边框（Border）4. 外边距（Margin）

二.盒子边框(border):

1.1格式: border : border-width || border-style || border-color

1.2语法:

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

2.边框样式(border-style)

属性	作用
none	没有边框即忽略所有边框的宽度（默认值）
solid	边框为单实线(最为常用的)
dashed	边框为虚线
dotted	边框为点线
double	边框为双实线

展示如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            float: left;
        }
        
        .con {
            width: 150px;
            height: 150px;
            /* 边框的粗细,样式,颜色 */
            padding: 10px;
            border: 20px solid red;
            margin: 30px;
        }
        
        .con1,
        .con2,
        .con3 {
            width: 150px;
            height: 150px;
        }
        
        div {
            text-align: center;
        }
        
        .con1 {
            /* 虚线 */
            border: 10px dashed red;
        }
        
        .con2 {
            border: 10px dotted green;
        }
        
        .con3 {
            border: 10px double blue;
        }
    </style>
</head>

<body>
    <!-- 盒子模型组成部分:content(width/height)padding(内边距)border(边框)margin(外边距) -->
    <div class="con">第一部分</div>
    <div class="con">第二部分</div>
    <div class="con1">第3部分</div>
    <div class="con2">第4部分</div>
    <div class="con3">第5部分</div>
</body>

</html>

3.圆角边框

格式: border-radius: 左上角右上角右下角左下角;

例如:

border-radius: 10px;：将所有角的圆角半径设置为相同的值（例如10个像素）。
border-radius: 10px 20px;：设置水平方向上的圆角半径为10px，垂直方向上的圆角半径为20px。
border-radius: 10px 20px 15px 5px;：分别设置左上角、右上角、右下角和左下角的圆角半径。

三.内边距（padding)

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

padding：上下左右边距比如:padding: 3px; 表示上下左右都是3像素
padding: 上下边距左右边距比如: padding: 3px 5px; 表示上下3像素左右 5像素
padding：上边距左右边距下边距比如: padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

四.外边距（margin）

1.格式:margin:上外边距右外边距下外边距左外边

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距

2.1外边距盒子居中

margin:0 auto;

有两个必要条件:

必须是块级元素。

盒子必须指定了宽度（width）

3.外边距合并

3.1相邻元素垂直外边距合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
        }

        /* 1.不要这么写 给一个元素设置margin */
        /* 合并后的外边距为两者中的较大者 */
        .bro1 {
            background-color: blue;
            margin-bottom: 20px;
        }

        .bro2 {
            background-color: red;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="bro1"></div>
    <div class="bro2"></div>

</body>

</html>

3.2嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: red;
            margin-top: 10px;
            /* 1.给父元素设置1px的上边框或者1px 上内边距 */
            /* border-top: 1px solid red; */
            padding-top: 1px;
            /* 2.overflow:hidden; 溢出隐藏 BFC原理*/
            /* 合并后的外边距为两者中的较大者 */
            overflow: hidden;
        }
        
        .son {
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

Starnight55

关注

27
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML-0618

HTML中的盒子模型是指在渲染网页时，将每个元素视为一个矩形盒子，并根据盒子的内容、内边距、边框和外边距等属性来确定元素在页面中的布局和样式。：元素的宽度和高度仅包括内容区域的大小，不包括内边距、边框和外边距。即，元素的总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距，总高度的计算方式类似。：元素的宽度和高度包括内容区域、内边距和边框的大小，不包括外边距。
复制链接

扫一扫