盒子模型以及布局
2022-10-24 本文已影响0人
山猪打不过家猪
使用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
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>
image.png
3.绝对定位，相对定位，固定定位
image.png
image.png
image.png
