第3次课后练习

wangcancan6

已于 2023-12-01 12:11:52 修改

阅读量41

点赞数

文章标签：前端笔记

于 2023-11-17 17:32:49 首次发布

本文链接：https://blog.csdn.net/wangcancan6/article/details/134467687

版权

2023.11.17日今天练习了盒子模型的相关内容

1、CSS盒子模型：

页面中所有的元素都可以看成是一个盒子，并且占据着一定的页面空间。

盒子模型由四部分组成：content内容、padding内边距、margin外边距、border边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>盒子模型</title>
        <style type="text/css">
            div{
                display:inline-block;/*将块元素转换为行内块元素*/
                padding:20px;
                margin:40px;
                border:2px solid red;
                background-color:#FFDEAD;
            }
        </style>
    </head>
    <body>
        <div>绿叶学习网</div>
    </body>
</html>

2、宽高width、height：

只有块元素才可以设置width、height，行内元素是无法设置width、height的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>宽高width、height</title>
        <style type="text/css">
            div,span{
                width:100px;
                height:50px;
            }
            div{border:1px solid red;}
            span{border:1px solid blue;}
        </style>
    </head>
    <body>
        <div>lvyestudy</div>
        <span>lvyestudy</span>
    </body>
</html>

3、边框border：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>边框border</title>
        <style type="text/css">
            div{
                width:100px;
                height:80px;
                border:2px dashed red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

4、内边距padding：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>内边距padding</title>
        <style type="text/css">
            div{
                display:inline-block;/*将块元素转化为inline-block元素*/
                padding:40px 80px;
                margin:40px;
                border:2px solid red;
                background-color:#FFDEAD;
            }
        </style>
    </head>
    <body>
        <div>绿叶学习网</div>
    </body>
</html>

5、外边距margin：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>外边距margin</title>
        <style type="text/css">
            #father{
                display:inline-block;
                border:1px solid blue;
            }
            #son{
                display:inline-block;
                padding:20px;
                margin:20px 40px 60px 80px;
                border:1px solid red;
                background-color:#FFDEAD;
            }
            .brother{
                height:50px;
                background-color:lightskyblue;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div class="brother"></div>
            <div id="son">绿叶学习网</div>
            <div class="brother"></div>
        </div>
    </body>
</html>

知识点：

1、CSS盒子模型：由内容区content、内边距padding、外边距margin、边框border构成

2、宽高width、height：只有块元素才能设置width、height元素

3、边框border：简写形式border：2px dashed red；

4、内边距padding：在边框内部的距离padding：20px 40px 60px 80px;

5、外边距margin：边框到父元素或兄弟元素之间的一部分margin：20px 40px 60px 80px；

2022.11.18日今天练习了浮动布局的相关内容

1、正常文档流normal flow：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>正常文本流</title>
        <style type="text/css">
            /*定义父元素样式*/
            #father{
                width:300px;
                background-color:#0C6A9D;
                border:1px solid silver;
            }
            /*定义子元素样式*/
            #father div{
                padding:10px;
                margin:15px;
                border:2px dashed red;
                background: color #FCD568;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son1">box1</div>
            <div id="son2">box2</div>
            <div id="son3">box3</div>
        </div>
    </body>
</html>

2、浮动float：

左浮动left；右浮动right；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>浮动float</title>
        <style type="text/css">
            #father{
                width:300px;
                background-color:#0C6A9D;
                border:1px solid silver;
            }
            #father div{
                padding:10px;
                margin:15px;
            }
            #son1{
                background-color:hotpink;
                float:left;
            }
            #son2{
                background-color:#FCD568;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son1">box1</div>
            <div id="son2">box2</div>
        </div>
    </body>
</html>

3、clear清除浮动：

清除左浮动left、清除右浮动right、同时清除左右浮动both

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>清除浮动clear</title>
        <style type="text/css">
            #father{
                width:300px;
                background-color:#0C6A9D;
                border:1px solid silver;
            }
            #father div{
                padding:10px;
                margin:15px;
            }
            #son1{
                background-color:hotpink;
                float:left;
            }
            #son2{
                background-color:#FCD568;
                float:right;
            }
            .clear{clear:both;}
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son1">box1</div>
            <div id="son2">box2</div>
            <div class="clear"></div>
        </div>
    </body>
</html>

知识点：

1、正常文档流normal flow：一行排满排下一行

2、浮动float：左浮动left、右浮动right

3、清除浮动clear：清除左浮动left、清除右浮动right、同时清除左右浮动both

2022.11.19日今天练习了定位布局的相关内容

1、固定定位fixed：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>固定定位fixed</title>
        <style type="text/css">
            #first{
                width:120px;
                height:1800px;
                border:1px solid gray;
                line-height:600px;
                background-color:#B7F1FF;
            }
            #second{
                position:fixed;
                top:30px;
                left:160px;
                width:60px;
                height:60px;
                border:1px solid silver;
                background-color:hotpink;
            }
        </style>
    </head>
    <body>
        <div id="first">无定位的div元素</div>
        <div id="second">固定定位的div元素</div>
    </body>
</html>

2、相对定位relative：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>相对定位relative</title>
        <style type="text/css">
            #father{
                margin-top:30px;
                margin-left:30px;
                border:1px solid silver;
                background-color:lightskyblue;
            }
            #father div{
                width:100px;
                height:60px;
                margin:10px;
                background-color:hotpink;
                color:white;
                border:1px solid white;
            }
            #son2{
                position:relative;
                top:20px;
                left:40px;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son1">第一个无定位的div元素</div>
            <div id="son2">相对定位的div元素</div>
            <div id="son3">第二个无定位的div元素</div>
        </div>
    </body>
</html>

3、绝对定位absolute：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>绝对定位absolute</title>
        <style type="text/css">
            #father{
                padding:15px;
                background-color:#0C6A9D;
                border:1px solid silver;
            }
            #father div{padding:10px;}
            #son1{background-color:#FCD568;}
            #son2{
                background-color:hotpink;
                position:absolute;
                top:20px;
                right:40px;
            }
            #son3{background-color:lightskyblue;}
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son1">box1</div>
            <div id="son2">box2</div>
            <div id="son3">box3</div>
        </div>
    </body>
</html>

知识点：

1、固定定位fixed：设置元素相对浏览器的位置

2、相对定位relative：该元素的位置相对于他的原始位置计算而来

3、绝对定位absolute：一个元素是绝对定位元素就已经完全脱离了正常文档流，相对于浏览器而言。