盒子模型以及布局

作者: 山猪打不过家猪 | 来源:发表于2022-10-24 15:55 被阅读0次

盒子模型以及布局
CSS盒子模型
盒子模型
002--css3-flex布局
十六、盒子模型
box-sizing属性使用场景
css源码笔记（四）【爱创课堂专业前端培训】
弹性盒子--Flexbox布局！！
12 CSS中的盒子模型
响应式布局---盒子模型以及FLEX布局

使用margin和padding的原则

margin：
1.需要给盒子border外添加间隙
2.间隙处不需要背景色
3.上下相互连接的盒子需要抵消间隙时，15px+20px将会得到20px的间隙
4.用于两个不相关的元素之间间距
padding：
1.需要在border内添加间距
2.间隙处是有背景的
3.用于元素与内容之间的间隔

作者：学致编程
链接：https://www.zhihu.com/question/395374225/answer/1231999824
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1.margin

image.png

不会改变元素本身的大小，图中蓝色的方块

2.padding

image.png

padding会改变元素的大小，外面的方框加了padding后，他会自动方法，各个边框增加20px像素

3.布局

image.png

#catogory设置
image.png
①先把宽度设为统一
image.png
②增加左右填充
image.png
③再将第一个容器的左padding和最后一个元素的右padding去掉
image.png
主要css选择器加空格和没有空格是不一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #top{
            width: 100%;
            height: 15px;
            background: black;
        }
        #header{
            width: 1005px;
            height: 50px;
            background: #e83828;
            margin: auto;
        }
        #head{
            width: 500px;
            height: 50px;
            background:#D1D3D6;
            margin: auto;
        } 
        #banner{
            width: 1005px;height: 300px;
            background: slateblue;
            margin: auto;
        }
        #wrapper-category{
            width:1005px;height: 150px;
            margin: auto;
        }
        #category{
            width:687px;height: 150px;
            margin: auto;
            background:#D1D3D6;
        }
        #category .item{
            width:100px; height:120px;
            border-right: 1px dashed black;
            margin-top: 15px;
            padding-left: 8px;
            padding-right: 8px;
            float: left;
        }
        #category .item.last{
            border-right: 0;
            padding-right: 0;
        }
        #category .item.first{
         
            padding-left: 0;
        }
        #case{
            width: 1005px;height: 300px;
            margin: auto;
            background: #eeeeee;
        }
        #case .titel-text{
            width: 687px;
            font-size: 30px;
            margin: auto;
            padding-top: 20px;
            padding-bottom: 5px;
        }
        #case .wrapper{
            width: 687px;
            height: 200px;
            margin: auto;
        }
        #case .wrapper .item{
            width: 222px;
            height: 200px;
            background: #9acd32;
            float: left;
        }
        #case .wrapper .item.md{
            margin-left:10px;
            margin-right:10px;
        }
        #case p{
            margin-top: 5px;
            font-size: 15px;
            text-align: center;
        }
        #case p a{
            text-decoration: None;
            color: dimgray;
        }
    </style>
</head>
<body>
    <div id="top"></div>

    <div id="header">
        <div id="head"></div>
    </div>

    <div id="banner"></div>

    <div id="wrapper-category">
        <div id="category">
            <div class="item first"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item last"></div>
        </div>
    </div>
    
    <div id="case">
        <div class="titel-text">Case</div>
        <div class="wrapper">
            <div class="item"></div>
            <div class="item md"></div>
            <div class="item"></div>
        </div>
        <p><a href="">查看更多...</a></p>
    </div>
</body>
</html>