发表于： 2019-06-23 22:23:59
4 762
今天完成的事情：制作出九宫格；了解并学习了Markdown；
明天计划的事情：使用nginx测试；上传github；
遇到的问题：宫格不能排列成3行3列；
收获：基本了解了盒子模型；排列宫格；div居中方法；
1. Doctype
HTML文件里开头的<!DOCTYPE html>声明不是标签，而是指示浏览器关于页面使用 HTML5 版本进行编写的指令。
<!--HTML5--><!DOCTYPE html><html><head><title>Title of the document</title></head><body></body></html>
2. 盒子模型
由content，padding，border，margin构成，其中margin垂直排列时左右可能重叠，写代码时需要计算边距。
3. 排列成3行3列
找到一种设置width为31%的方法。
参考
.box-wrap>div {width: 31%;padding-bottom: 31%;margin: 1%;border-radius: 10%;float: left;background-color: orange;}
不太明白padding-bottom: 31%为什么能使容器成为正方形。
解决办法
百度搜索了解padding属性，发现padding-bottom，padding-top等若用百分比指定大小，均以容器宽度为标准。
将每个宫格的宽度设置成块的1/3即可。
注意：为了让页面能跟随页面的缩放而跟着一起缩放，我用了百分比来设置宽高，但此处的高（height）用百分比是不行的，而要用padding-bottom，为什么呢？
原因：
1.高度height的百分比相对于父元素的高度，父元素默认是没有高度的。如果不给父元素一个高度，子元素也不会有高度。
2.在普通文档流中，块级元素的宽度默认是浏览器的宽度，因此百分比有效。也就是为什么子元素有宽度而没有高度。
3.padding-bottom和padding-top的百分比是相对于父元素的宽度，而不是高度。因此设置了padding-top或者padding-bottom百分比的子元素，其高度就不再依赖于父元素高度了。
4.由于padding-bottom和padding-top的百分比是相对于父元素的宽度，当屏幕大小出现变化时，元素基于padding-top或者padding-bottom的高度也会随着宽度的变化而等比例的缩放。
参考
返回列表
评论