HTML+CSS盒子模型

最新推荐文章于 2024-05-12 14:23:18 发布

救救孩子吧8༼⍤༽

最新推荐文章于 2024-05-12 14:23:18 发布

阅读量189

点赞数 3

分类专栏： html+css学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_49553751/article/details/132914644

版权

html+css学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

组成

内容区域-width&height
内边距-padding(出现在内容与盒子边缘之间)
边框线-border
外边距-margin(出现在盒子的外面)

边框线

属性名：border(bd)
属性值：边框线粗细线条样式颜色（不去区分顺序）
常用线条样式：

solid--线条样式

dashed--虚线

dottted--点线

设置单方向边框线

属性名：border-方位名词（bd+方向名词首字母）

属性值：边框线粗细线条样式颜色（不去区分顺序）

代码

<!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: 300px;
            height: 300px;
            background-color: pink;
            /* border: 1px solid #000; */
            /* border: 2px dashed #000; */
            /* border: 3px dotted #000; */

            /* 设置单方向的边框线 */
            border-top: 2px solid #000;
            border-right: 2px dashed #000;
            border-bottom: 2px dotted #000;
            border-left: 2px solid yellow;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

内边距

作用：设置内容与盒子边缘之间的距离
属性名：padding/padding-方位名词
内边距多值写法

代码

<!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: 200px;
            background-color: pink;
            /* padding: 20px; */

            /* padding-top: 20px;
            padding-right: 40px;
            padding-bottom: 80px;
            padding-left: 10px; */

            /* padding多值写法 */
            /* 上 右 下 左 */
            /* padding: 10px 20px 40px 80px; */
            /* 上  左右  下 */
            /* padding: 10px 40px 80px; */
            /* 上下  左右 */
            padding: 10px 80px;

            /* 记忆方法：顺时针从上转一圈，如果当前方位没有数值，取值和对面一样 */
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

尺寸计算

默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
加border/padding会撑大盒子
解决:

手动做减法，减掉border/pading的尺寸

內减模式：box-sizing:border-box

代码

<!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: 200px;
            /* 手动减法 */
            /* width: 160px;
            height: 160px; */
            background-color: pink;
            padding: 20px;

            /* 内减模式：不需要手动减法，加padding和border不会撑大盒子 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

外边距

作用：拉开两个盒子之间的距离
属性名：margin
提示：与padding属性值写法、含义相同
代码

<!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: 200px;
            background-color: 
            pink;
            /* 外边距不会撑大盒子 */
            /* margin: 20px; */
            /* margin-top: 20px;
            margin-right: 20px;
            margin-bottom: 20px;
            margin-left: 20px; */

            /* 多值写法和padding一致 */
        }
    </style>
</head>
<body>
    <div>div 模型</div>
</body>
</html>

救救孩子吧8༼⍤༽

关注

3
点赞
踩
0

收藏

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

属性名：border-方位名词（bd+方向名词首字母）內减模式：box-sizing:border-box。属性值：边框线粗细线条样式颜色（不去区分顺序）手动做减法，减掉border/pading的尺寸。solid--线条样式。dottted--点线。dashed--虚线。
复制链接

扫一扫