发表于： 2019-06-03 19:45:20
1 772
今天完成的事情和收获：
1：学会了自适应这个方面的内容（margin/padding取值形式为百分比时，left/right/top/bottom都是以父元素width为参照物）感觉这句话很重要；
2：学会了伪元素的after， 必须配合content来使用，content必须有值，至少为空；
- 3：今天还学到了BFC：
- 写CSS样式时，对一个元素设置css,我们首先要知道这个元素是块级元素还是行内元素，而BFC就是用来格式化块级盒子的
<style>
*{
margin: 0px;
padding:0px;
}
.main{
width:100%;
height:100%;
}
/*
第一种方法： 注意这里的padding-top设置的事30%；
.main div{
float:left;
margin-left: 3%;
margin-bottom: 3%;
background-color: orangered;
width: 30%;
padding-top:30%; !*高度用padding撑开*!
border-radius: 2%;
}*/
.main div{
float:left;
background-color: orangered;
width: 30%; /*设定每个div的宽度占30%，三个就是100%，占一行*/
height: 30%;
overflow: hidden; /*触发BFC消除margin折叠*/
margin-left: 3%;
margin-bottom: 3%;
}
.main div::after{
content:'';
display: block;
/*当margin、padding取值形式为百分比是，left、right、top、bottom都是以父元素width为参照物*/
padding-top: 100%; //这里的padding-top设置的事100%
}
</style>
</head>
<body>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
返回列表
评论