自学前端第五天~

最新推荐文章于 2024-10-25 15:04:44 发布

弹走鱼尾纹~

最新推荐文章于 2024-10-25 15:04:44 发布

阅读量119

点赞数

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_41575188/article/details/123509266

版权

今天开始学盒子模型了，感觉有点绕，有挺多还不明白的地方。先记录下我学到的东西吧！

盒子这个模型有边框border、内边距padding、外边距margin属性。边框可以设置宽度、样式和颜色，内边距和外边距都是有上下左右四个方向的。一个盒子就像一个装着电脑的快递盒，边框就相当于快递盒的厚度、样式、颜色。内边距就是电脑和快递盒之间的距离，而外边距就是快递盒之间的距离。

边框

border：值有宽度、样式（solid实线、 double双线、dashed虚线、dotted点状线）、颜色,如果直接用border，上下左右的边框都会设置成一样。

也可以设置单方向上的边框值：

border-top: 设置上边框,值有宽度、样式、颜色，将几个样式写在一起;

border-left: 设置左边框，值有宽度、样式、颜色，将几个样式写在一起;

border-right: 设置右边框，值有宽度、样式、颜色，将几个样式写在一起;

border-bottom: 设置下边框，值有宽度、样式、颜色，将几个样式写在一起;

也可以将宽度、样式、颜色拆分来设置边框值：

border-width：设置边框宽度，可以设置上右下左四个方向宽度。

border-style：边框样式，solid实线 double双线 dashed虚线 dotted点状线，可以设置四个方向的样式。

border-color：边框颜色，可以设置四个方向颜色。

内边距

padding：四个值设置在一起，可以设置不同数量的值代表不同方向的内边距

padding 1个值，4个方向一样
padding 2个值，上下左右
padding 3个值，上左右下
padding 4个值，上右下左

也可以按单个方向设置边距：

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

padding不支持负值~

外边距

外间距和内间距大同小异

margin：四个值设置在一起，可以设置不同数量的值代表不同方向的内边距

margin 1个值，4个方向一样
margin 2个值，上下左右
margin 3个值，上左右下
margin 4个值，上右下左

也可以按单个方向设置边距：

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

有一个比较特别的经常会用到：margin：0 auto;可以使盒子居中

margin支持负值~

外边距有很多特别的属性：

1.兄弟盒子。两个盒子上下排列时，div1设置下边距，div2设置上边距时，垂直方向外边距取两个盒子设置的最大的那个边距，而不是两个边距之和。

两个盒子左右排列时，水平方向取外边距之和，div1设置右边距，div2设置左边距时，div1和div2之间的边距为外边距之和。

2.父子盒子。设置在子盒子的外边距，将会作用于外面的父盒子上。

解决：

子margin-top=父的padding-top，注意高度计算
给父盒子加边框
给子盒子加浮动
加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>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
        }
        #box{
            width: 241px;
            height: 335px;
            background: white;
            margin: 0 auto;
            padding:11px 11px 18px ;
        }
        .title{
            width: 235px;
            height: 19px;
            padding-left: 4px;
            border-left:2px solid #254282;
            color:#254282;
            line-height:19px;
            font-size: 14px;
            font-weight: bold;
            margin: 12px;
        }
        .bigpic{
            width: 241px;
            height: 170px;
            margin-bottom: 12px;
        }
        .bigpic p{
            width: 241px;
            height: 26px;
            background-color: #f6f7f8;
            line-height: 26px;
            text-align:center;
            font-size: 12px;
        }
        .bigpic img{
            width: 241px;
        }
        .smallpic{
            width: 241px;
            height: 120px;
        }
        .smallpic img{
            width: 112px;
        }
        .pic1 p,.pic2 p{
            width: 112px;
            background-color: #f6f7f8;
            line-height: 14px;
            text-align:justify;
            font-size: 12px;
            overflow: auto;
        }
        .pic1{
            float:left;
        }
        .pic2{
            float:right;
        }

    </style>
</head>
<body>
    <div id="box">
        <div class="title">百家号</div>
        <div class="bigpic">
            <img src="img/裁员.png" alt="">
            <p>腾讯、阿里被传将裁掉几万人</p>
        </div>
        <div class="smallpic">
            <div class="pic1">
                <img src="img/总裁.png">
                <p>任天堂前总裁雷吉称Facebook并非创新公司</p>
            </div>
            <div class="pic2">
                <img src="img/抛售.png">
                <p>NFT遭遇大规模抛售</p>
            </div>
        </div>
    </div>
</body>
</html>