2021-11-15webday1

admin • • 前端

今天是web前端教学实习第一天。

所学内容 ：

1. div

 div是一个块标签，默认高度为0，宽度占满父级，独占一行。

2. padding 

padding属性是内边距，会增加盒模型面积，padding的四个值顺序为 上右下左

如

padding:10px 20px 30px 40px;

表示

上内边距是 10px

右内边距是 5px

下内边距是 15px

左内边距是 20px

3. border

border是边框，也会增加盒模型面积。

border 有三个值 分别是线宽 线型 线色

border: 50px solid #ff0000

表示 边框为50像素红色实线

其中线型还可以为dashed 虚线

还有border-radius 圆角 用法同padding

4. margin

margin表示外边距

使用margin时会出现两种情况分别是:叠压和塌陷

叠压:两个div 第一个使用margin-bottom时,若第二个使用margin-top,则会出现叠压情况,margin值大的会盖住margin值小的,最终呈现的效果以大的为准。

塌陷：父级的第一个子级标签是块标签并且使用了margin或margin-top

       解决方案   1. 子级标签不使用margin-top,在父级使用padding-top 并且减少父级height

                        2. 在父级使用border

                        3. 在父级使用overflow:hidden

5. block 块标签

 <h1><h2><h3><h4><h5><h6><ul><ol><p>

6. 课堂案例 五环 

代码与效果如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五环</title>
    <style>
        div{
            width: 80px;
            height: 80px;
            border: 10px solid skyblue;
            border-radius: 50%;
        }
        #d2{
            border-color: black;
            margin-top: -100px;
            margin-left: 110px;
        }
        #d3{
            border-color:tomato;
            margin-top: -100px;
            margin-left: 220px;
        }
        #d4{
            border-color: gold;
            margin-top: -50px;
            margin-left: 55px;
        }
        #d5{
            border-color: yellowgreen;
            margin-top: -100px;
            margin-left: 165px;
        }


    </style>
</head>
<body>
    <div ></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
    <div id="d5"></div>
</body>
</html>

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码

)">
< <上一篇
下一篇>>