发表于: 2018-06-28 17:44:26
1 693
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
九宫格(浮动div)
css代码
<style type="text/css">
html,body{
margin:0;/*浏览器的body会有margin,需要设置一下。*/
height: 100%;}/*height继承父容器的高度,一直到html的高度,中间必须都有高度。*/
.wrap{
background-color: red;
height: 100vw;/*如果用100%,只有网页打开时的部分有背景。*/
width: 100%;
}
.div{
background-color: orange;
width: 0;
height: 0;
padding-left: 31%;/*这里也可以在div中设置子div,div设置宽度,子div用margin-top:100%;*/
padding-top: 31%;
float: left;
border-radius: 10%;/*也可以用数字,border-radius: 3px 4px/5px,椭圆先横轴再竖轴,左上角开始顺时针,对称继承值。*/
margin: 1.16%;
}
</style>
九宫格(display:inline-block)
css代码
<style type="text/css">
html,body{
margin: 0;
height: 100%;
}
.wrap{
text-align: center;
font-size: 0;/*去掉内联元素间的空隙。看到网上有的说Chrome最小字号12px,不明白为什么0却可以。*/
}
.div{
background-color: orange;
display: inline-block;
height: 0;
width: 31%;
margin: 1%; /*值为0时可看到空隙*/
padding-bottom: 31%;
border-radius: 10px;
}
</style>
明天计划的事情:(一定要写非常细致的内容)
配置nginx,学习css使用外联的方式。
遇到的问题:(遇到什么困难,怎么解决的)
去除内联元素间的空隙,
代码写到一行/使用font-size:0。
原因:由于代码换行引起,本质上是加一个换行符
1) 去掉代码间换行符
2) 将换行符的大小设置为0, 因为换行符其实就是和字符一个样的符号,虽然看不见但是真实存在,设置父元素的font-size=0,然后再单独设置内联元素的字体大小
来源:慕课网
其他方法:
用margin为负值。
收获:(通过今天的学习,学到了什么知识)
评论