【前端学习笔记】(五)（CSS布局 盒子模型）

已于 2022-05-02 21:02:02 修改
阅读量1.1k 收藏 8
点赞数 1
分类专栏： 前端 文章标签： 前端
于 2022-04-05 18:11:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48650082/article/details/123961396
版权

目录

盒子模型

1、盒子模型的介绍

（1）盒子的概念
① 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
② 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
（2）盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
盒子模型

2、内容区域的宽度和高度

➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px
盒子内容
例子：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
普通盒子

3、边框（ border ）

3.1 边框（border）- 单个属性

➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：

作用属性名属性值
边框粗细border-width数字+px
边框样式border-style实线 solid、虚线 dashed、点线 dotted
边框颜色border-color颜色取值

例子：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border-width: 5px;
            border-style: dashed;
            border-color: darkorange;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
给盒子设置边框

3.2 边框（border）- 连写形式

➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
➢ 快捷键：bd + tab（在VS Code中）

例子：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border: 10px dotted pink;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子设置边框属性连写

3.3 边框（border）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值

例子：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border-top: 10px dotted pink;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
按方位设置盒子边框

3.4 盒子实际大小初级计算公式

➢ 需求：盒子尺寸 200*200，背景绿色，边框10px 实线 黑色，如何完成？
• 注意点： ① 设置 width 和 height 是内容的宽高！② 设置 border 会撑大盒子！
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
➢ 解决：当盒子被 border 撑大后，如何满足需求？
• 解决：计算多余大小，手动在内容中减去（手动内减）
盒子会被撑大
例子：

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            border: 10px solid black;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子被撑大例子
由图所示，盒子 div 被撑大了，想要的 div 本来是200*200的。

例子（手动内减）：

<!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>
        div {
            width: 180px;
            height: 180px;
            background-color: green;
            border: 10px solid black;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子被撑大手动内减恢复正常大小

4、内边距（ padding ）

4.1 内边距（padding）- 取值

➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 常见取值：

取值示例含义
一个值padding: 10px;上右下左都设置为10px
两个值padding: 10px 20px;上下设置为10px，左右设置为20px
三个值padding: 10px 20px 30px;上设置为10px，左右设置为20px，下设置为30px
四个值padding: 10px 20px 30px 40px;上设置为10px，右设置为20px，下设置为30px，左设置为40px

➢ 记忆技巧：从上开始赋值，然后顺时针赋值，如果没设置赋值的，看对面的！！

例子（一个值）：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子设置padding一个值

例子（三个值）：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding: 10px 20px 30px;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子设置padding三个值

4.2 内边距（padding）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px

例子：

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子按方位设置padding

4.3 盒子实际大小终极计算公式

➢ 需求：盒子尺寸200*200，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 注意点：① 设置 width 和 height 是内容的宽高！② 设置 border 会撑大盒子 ③ 设置 padding 会撑大盒子
➢ 盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被 border 和 padding 撑大后，如何满足需求？
• 自己计算多余大小，手动在内容中减去（手动内减）
关于盒子
例子：

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子加border和padding被撑大例子

由图所示，盒子 div 加了 border 和 padding 被撑大了，想要的 div 本来是200*200的

例子（手动内减）：

<!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>
        div {
            width: 140px;
            height: 140px;
            background-color: pink;
            border: 10px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子加border和padding被撑大手动内减恢复例子

4.4 不会撑大盒子的特殊情况

➢ 不会撑大盒子的特殊情况（块级元素）
（1）如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
（2）此时给子盒子设置左右的 padding 或者左右的border，此时不会撑大子盒子

例子：

<!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>
        .father {
            width: 200px;
            height: 150px;
            background-color: #7FFFD4;
        }
        .son {
            background-color: pink;
            border: 10px solid black;
            padding: 20px;
            }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">这是一个盒子</div>
    </div>
</body>
</html>

效果展示：
盒子不会被撑大的例子

4.5 CSS3盒模型（自动内减）

➢ 需求：盒子尺寸200*200，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置 border 或 padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去

例子：

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid black;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子设置自动内减

5、外边距（margin）

5.1 外边距（margin）- 取值

➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：

取值示例含义
一个值margin: 10px;上右下左都设置为10px
两个值margin: 10px 20px;上下设置为10px，左右设置为20px
三个值margin: 10px 20px 30px;上设置为10px，左右设置为20px，下设置为30px
四个值margin: 10px 20px 30px 40px;上设置为10px，右设置为20px，下设置为30px，左设置为40px

➢ 记忆技巧：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

例子（一个值）：

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: #7FFFD4;
            border: 10px solid black;
            padding: 20px;
            box-sizing: border-box;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子设置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>
        div {
            width: 200px;
            height: 200px;
            background-color: #7FFFD4;
            border: 10px solid black;
            padding: 20px;
            box-sizing: border-box;
            margin: 10px 20px 30px;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
盒子设置margin三个值

5.2 外边距（margin） - 单方向设置

➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px

例子：

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: #7FFFD4;
            border: 10px solid black;
            padding: 20px;
            box-sizing: border-box;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

效果展示：
按方位设置盒子margin

5.3 margin单方向设置的应用

➢ 应用：

方向属性效果
水平方向margin-left让当前盒子往右移动
水平方向margin-right让右边的盒子往右移动
垂直方向margin-top让当前盒子往下移动
垂直方向margin-bottom让下面的盒子往下移动
5.4 清除默认内外边距

➢ 场景：浏览器会默认给部分标签设置默认的 margin 和 padding，但一般在项目开始前需要先清除这些标签默认的
margin 和 padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
➢ 解决方法例子：
①
清除默认外边距1
②
清除默认外边距2

5.5 外边距正常情况

➢ 场景：水平布局的盒子，左右的 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>
        div {
            width: 100px;
            height: 100px;
            background-color: #7FFFD4;
            display: inline-block;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="one">第一个盒子</div>
    <div class="two">第二个盒子</div>
</body>
</html>

效果展示：
水平放置的两盒子间的距离是两盒子margin之和

5.6 外边距折叠现象 – ① 合并现象

➢ 场景：垂直布局 的 块级元素，上下的 margin 会合并
➢ 结果：最终两者距离为 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>
        div {
            width: 100px;
            height: 100px;
            background-color: #7FFFD4;
        }
        .one {
            margin-bottom: 50px;
        }
        .two {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">第一个盒子</div>
    <div class="two">第二个盒子</div>
</body>
</html>

效果展示：
垂直放置的两盒子外边距合并
由图所示，两盒子的外边距合并了，若想给两盒子之间设置间距，设置其中一个盒子的上外边距或者下外边距就可以了。

5.7 外边距折叠现象 – ② 塌陷现象

➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
（1）给父元素设置 border-top 或者 padding-top（分隔父子元素的 margin-top）
（2）给父元素设置 overflow：hidden
（3）转换成行内块元素
（4）设置浮动

例子：

<!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>
        .father {
            width: 200px;
            height: 200px;
            background-color: #7FFFD4;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: coral;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

效果展示：
外边距塌陷例子
解决办法①（给父级添加 border 或者 padding）：

<!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>
        .father {
            width: 200px;
            height: 200px;
            background-color: #7FFFD4;
            /* 解决办法一 */
            border: 1px solid #fff;
            /* 或者padding: 1px; */
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: coral;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

注意：如果设计稿中没有 border 或者 padding，我们就不能使用 border 或者 padding 解决外边距塌陷问题。

解决办法②（给父级添加 overflow: hidden; ）：

<!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>
        .father {
            width: 200px;
            height: 200px;
            background-color: #7FFFD4;
            /* 解决办法二 */
            overflow: hidden;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: coral;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

解决办法③（把父级或者子级变为行内块元素）：

<!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>
        .father {
            width: 200px;
            height: 200px;
            background-color: #7FFFD4;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: coral;
            margin-top: 50px;
            /* 解决办法三 */
            display: inline-block; 
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

解决办法④（给父级或者子级设置浮动 float: left; ）：

<!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>
        .father {
            width: 200px;
            height: 200px;
            background-color: #7FFFD4;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: coral;
            margin-top: 50px;
            /* 解决办法四 */
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

以上四种办法，都能解决外边距的塌陷问题，效果都如下：
外边距塌陷问题解决
建议使用给父元素设置 overflow：hidden 的方法解决外边距的塌陷问题。

5.8 行内元素的margin和padding无效情况

➢ 场景：给行内元素设置 margin 和 padding 时
➢ 结果：
（1）水平方向的 margin 和 padding 布局中有效！
（2）垂直方向的 margin 和 padding 布局中无效！

例子：

<!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>
        span {
            margin: 100px;
            /* padding: 100px; */
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</body>
</html>

效果展示（给行内元素 span 设置 padding: 100px; 效果也如下）：
行内元素的margin和padding垂直方向的设置无效
由图所示，给行内元素 spa n设置 margin 或者 padding 时，水平方向的设置生效了，即 margin-left 和 margin-right（或 padding-left 和 padding-right ）的设置可以生效，而垂直方向的设置无效，即 margin-top 和 margin-bottom（或 padding-top 和 padding-bottom）的设置无效。

➢ 若想改变行内元素垂直方向的位置，可给行内元素添加行高 line-height

例子：

<!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>
        span {
            margin: 100px;
            /* padding: 100px; */
            line-height: 200px;
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</body>
</html>

效果展示：
行内元素margin和padding的垂直方向的设置不生效问题设置行高可改变行内元素垂直方向的位置

香蕉卟NaNa
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS之盒子左右布局
diaoyin8112的博客
04-06 1736
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子左右布局案例</title> <style> .top, .banner, ...
html盒子左右布局,从css盒子与定位到布局
weixin_42514616的博客
07-17 2059
css盒子模型原理：padding,border,margin三者构成一个盒子。图片来自网络Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。w3c标准：总宽度 = margin-left + border-le...
盒子模型
Yang_Xingxing_的博客
05-15 294
盒子模型 页面布局三大核心，盒子模型、浮动和定位。 1. 网页布局 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子Box。 利用CSS设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容。 网页布局的核心本质：就是利用CSS摆盒子。 2. 盒子模型（Box Model）组成 所谓盒子模型：就是把HTML页面中的布局元素看作是 一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，他包括：边框、外边距、内边距和实际内容。 border 边框 c
CSS布局篇之左右布局
最新发布
m0_60666452的博客
04-11 332
left {.right {利用overflow:hidden形成BFC，因为BFC不会与float box重叠。.left {.right {.left {.right {弹性布局。
CSS学习—盒模型和布局模型
我要变强( ¯ □ ¯ )
07-06 2057
盒模型与布局模型是网页设计的基础知识之一，现在将所学的笔记记录于此博客中。
CSS布局三个盒子左中右一排
ONLYSRY的博客
07-29 2646
CSS布局三个盒子左中右一排。
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
前端的学习笔记HTML+css.zip
01-05
前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css...
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
前端学习笔记, html, css, js.zip
01-05
前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习...
前端三件套css学习笔记分享
02-24
前端三件套css学习笔记分享
简单css盒子模型代码,【css】盒子模型(示例代码)
weixin_35945980的博客
08-04 2897
1)盒子模型盒子构成·盒子中装载的内容--content·盒子内边距--padding·盒子边框--border·盒子外边距--margin2)盒子属性一般情况下，在使用盒子的时候，属性分为复合属性(顺序为上右下左)和单一属性在使用盒子的时候：width、style、color缺一不可2.1)尺寸属性：·widthmin-widthmax-width·heightmin-heightmax...
HTML怎么使盒子中的盒子置右/左
热门推荐
m0_52141241的博客
04-30 1万+
#p5{ height: 40px; width: 300px; margin: 15px auto; float: right; } delete from 置左把right换成left就行
CSS盒子模型
From_Ezra的博客
09-13 314
CSS盒子模型
css两个盒子如何定位,前端学习笔记（三）CSS盒模型和CSS定位
weixin_28993425的博客
08-04 612
这两天主要学习了CSS盒模型和CSS定位。学习笔记如下：CSS盒模型盒模型也叫框模型，结构如下：W3school的翻译很好，把margin和padding翻译成外边距和内边距，避免引起混淆。以下是对盒模型中结构的介绍：1.padding内边距：可按照上，右，下，左的顺序分别设置，也可以通过top，right，bottom，left设置。不可以为负值，可以使用px，em，ex，cm，百分比作为单位。...
css 3个元素行排列，前2个元素靠左，第三个元素靠右
LlanyW的专栏
07-19 460
然后让第三个元素自动占满剩余的空间：flex-grow:1，text-align:end。行排列，默认靠左对齐，
html盒子模型怎么平移盒子,从头开始复习css之盒子模型
weixin_35130561的博客
06-07 710
盒子模型这个名词来自英文里面的Box modelmodel。怎么理解盒子模型呢？我认为凡是里面可以盛装其他内容的标签，我们都可以称之为盒子。例如：div,p,span等等标签都可以往里面再添加元素，我们都可以称之为盒子模型，相反例如img，input等等 里面是无法盛装其他元素，我们就能称之为盒子。关于盒子，主要有以下几个要点：width/height：内容的宽高padding：内边距border...
html上左中右下布局,5种css实现左中右布局的方式
weixin_39559333的博客
06-18 1022
本文主要和大家介绍了css布局实现左中右布局的5种方式的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。效果如下：左中右布局content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">Documenthtml *{...
flex布局中实现盒子左对齐，盒子右对齐
Cool_so_cool的博客
03-08 3998
父级元素 display: flex; align-items:center; 需要靠右的子元素 方法 1 flex: 1; text-align: right; 方法 2 margin-left: auto;
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值