【前端学习笔记】盒子模型

最新推荐文章于 2024-07-12 16:27:40 发布

爷傲奈我何_m

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量314

点赞数

分类专栏：我的前端之路文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_43841844/article/details/122287589

版权

我的前端之路专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

盒子模型图解
内边距
- 内边距的特点
边框
外边距
- 外边距特性
盒子模型案例

盒子模型图解

在这里插入图片描述

内边距

只设置一个值，4个方向一样
padding: 30px;
设置两个值，上下，左右
padding: 20px, 30px;
3个值，上，左右，下
padding: 20px, 30px，40px;
四个值：上，右，下，左
padding: 20px, 30px，40px, 50px;

内边距的特点

背景色蔓延到内边距
可以设置单一方向
padding-top，padding-bottom，padding-left，padding-right
*{
padding: 0;
}
清掉所有的内边距
内边距不支持负数

边框

代码示例：

<!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>
        .box1{
            width:100px;
            height: 100px;
            background-color: yellow;
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

样式属性：
solid ：实线
double：双实线
dashed：虚线
dotted：点状虚线

背景色也能蔓延到边框

单向的边框：

.box2{
            width: 100px;
            height: 100px;
            background: blue;
            border-top: 5px solid red;
        }

外边距

例如：margin: 50px;
margin-top， margin-bottom，margin-left， margin-right

外边距特性

背景色无法蔓延
*{margin：0}
支持设置负数
屏幕居中：margin：0 auto；横向居中

特性问题：

兄弟关系，两个合租垂直外边距与水外边距问题
- 垂直方向上，外边距取最大值
- 水平方向，外边距会进行合并处理
- 代码示例：

<!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>
        .box1,.box2,.box3,.box4{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: red;
            margin-bottom: 100px;
        }
        .box2{
            margin-top: 50px;
            background-color: yellow;
        }
        .box3{
            float: left;
            background-color: blue;
            margin-right: 100px;
        }
        .box4{
            float: left;
            background-color: green;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

2 . 父子关系，给子加外边距，但作用于父元素身上了，怎么解决
- 子margin-top与负的padding-top相同，注意高度计算
- 给父盒子设置边框
- 设置浮动
- overflow：hidden。构建BFC

盒子模型案例

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
        }
        #box{
            width: 241px;
            height: 335px ;
            /* background-color: yellow; */
            margin: 0 auto;
            padding: 11px 11px 18px
        }
        .title{
            width: 235px;
            height: 19px;
            /* background-color: red; */
            padding-left: 4px;
            border-left: 2px solid #254282;
            color: #254282;
            line-height: 19px;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 12px;
        }
        .bigpic{
            width: 241px;
            height: 170px;
            margin-bottom: 16px;
        }
        .bigpic p{
            width: 241px;
            height:26px;
            background: #f6f7f8;
            font-size: 12px;
            text-align: center;
            line-height: 26px;
        }
        .smallpic{
            width: 241px;
            height: 120px;
        }
        .smallpic p{
            font-size: 12px;
            width:112px;
            background-color: #f6f7f8;
            line-height: 18px;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="title">女人图片</div>
        <div class="bigpic">
            <img src="../../img/big.png" alt="">
            <p>大姐利用“异业联盟”经营美容院”</p>
        </div>
        <div class="smallpic">
            <div class="left">
                <img src="../../img/small1.png" alt="">
                <p>无效化妆，无效穿搭≠内容焦虑</p>
            </div>
            <div class="right">
                <img src="../../img/small2.png" alt="">
                <p>小个子不要怕！"高人一等"的穿搭给你</p>
            </div>
        </div>
    </div>
</body>
</html>

效果图如下：
在这里插入图片描述

爷傲奈我何_m

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记】盒子模型

盒子模型图解内边距只设置一个值，4个方向一样padding: 30px;设置两个值，上下，左右padding: 20px, 30px;3个值，上，左右，下padding: 20px, 30px，40px;四个值：上，右，下，左padding: 20px, 30px，40px, 50px;内边距的特点背景色蔓延到内边距可以设置单一方向padding-top，padding-bottom，padding-left，padding-right*{padding:
复制链接

扫一扫