用html+css作个简单的九宫格 |
您所在的位置:网站首页 › 九宫格绘制 › 用html+css作个简单的九宫格 |
不废话,直接上代码 HTML代码: task1CSS代码: .box-wrap { text-align: center; background-color: #d4d4f5; overflow: hidden; } .box-wrap>div { width: 31%; padding-bottom: 31%; margin: 1%; border-radius: 10%; float: left; background-color: orange; }结果演示: 注意:为了让页面能跟随页面的缩放而跟着一起缩放,我用了百分比来设置宽高,但此处的高(height)用百分比是不行的,而要用padding-bottom,为什么呢? ↓↓↓↓↓原因↓↓↓↓↓高度height的百分比相对于父元素的高度,父元素默认是没有高度的。如果不给父元素一个高度,子元素也不会有高度。在普通文档流中,块级元素的宽度默认是浏览器的宽度,因此百分比有效。也就是为什么子元素有宽度而没有高度。padding-bottom和padding-top的百分比是相对于父元素的宽度,而不是高度。因此设置了padding-top或者padding-bottom百分比的子元素,其高度就不再依赖于父元素高度了。由于padding-bottom和padding-top的百分比是相对于父元素的宽度,当屏幕大小出现变化时,元素基于padding-top或者padding-bottom的高度也会随着宽度的变化而等比例的缩放。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |