[散修弟子]CSS-9666|2022年12月31日的日报-技能树.IT修真院

发表于： 2022-12-31 21:55:18

0 11430

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

1、学习float

W3C解释：

看了之后很是模糊，不太懂，除了说的几个属性以为，所以直接上手

查了一下之后float需要和clear属性一起用

html：

<!doctype html>
    <head>
        <link rel="stylesheet"  href="./CSSdemo/floatbox01.css" type="text/css">
        <meta charset="utf-8">
        <title>demo</title>
    </head>
    <body>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
        <div class="box9">9</div>
    </body>
</html>

CSS：

*{
    margin: 0px;
    padding: 0px;
}
.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8,
.box9 {
    border: 1px solid black;
    border-radius: 10px;
    margin: 2px;
    width: 100px;
    height: 100px;
    background: orange;
    float: left;
}
.box4 {
    clear: left;
}

.box7 {
    clear: left;
}