九宫格——用html+css制作一个网页

不废话,直接上代码
HTML代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task1title>
    <link rel="stylesheet" type="text/css" href="task1.css">
head>
<body>
    <div class="box-wrap">
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>

html>

CSS代码:

.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;
}

结果演示:
九宫格——用html+css制作一个网页_第1张图片

注意:为了让页面能跟随页面的缩放而跟着一起缩放,我用了百分比来设置宽高,但此处的高(height)用百分比是不行的,而要用padding-bottom,为什么呢?

        ↓↓↓↓↓原因↓↓↓↓↓

高度height的百分比相对于父元素的高度,父元素默认是没有高度的。如果不给父元素一个高度,子元素也不会有高度。在普通文档流中,块级元素的宽度默认是浏览器的宽度,因此百分比有效。也就是为什么子元素有宽度而没有高度。padding-bottom和padding-top的百分比是相对于父元素的宽度,而不是高度。因此设置了padding-top或者padding-bottom百分比的子元素,其高度就不再依赖于父元素高度了。由于padding-bottom和padding-top的百分比是相对于父元素的宽度,当屏幕大小出现变化时,元素基于padding-top或者padding-bottom的高度也会随着宽度的变化而等比例的缩放。

你可能感兴趣的:(HTML+CSS学习相关)