h5学习（css第三天）

最新推荐文章于 2024-10-02 15:35:50 发布

LY__weI

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量650

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/LY__weI/article/details/109585449

版权

今日所学：盒模型
最终结果可以做到在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 650px;
            height: 650px;
            background-color: rgb(255, 109, 93);
            margin: 0 auto;
            border: 1px solid rgb(255, 109, 93);
        }
        
        .d2 {
            width: 416px;
            height: 416px;
            border: 4px dashed white;
            margin: 113px auto;
        }
        
        .d3 {
            width: 346px;
            height: 346px;
            background-color: rgb(255, 136, 124);
            border: 4px solid white;
            margin: 31px auto;
        }
        
        .d4 {
            width: 276px;
            height: 276px;
            background-color: rgb(255, 173, 78);
            border: 4px dashed white;
            margin: 31px auto;
        }
        
        .d5 {
            width: 214px;
            height: 214px;
            background-color: rgb(225, 236, 72);
            border: 4px dashed white;
            margin: 27px auto;
        }
        
        .d6 {
            width: 196px;
            height: 196px;
            background-color: rgb(164, 198, 73);
            border: 4px dashed white;
            margin: 5px auto;
        }
        
        .d7 {
            height: 114px;
            width: 114px;
            background-color: rgb(255, 109, 93);
            border: white 4px dashed;
            margin: 37px auto;
        }
    </style>
</head>

<body>

    <div class="d1">
        <div class="d2">
            <div class="d3">
                <div class="d4">
                    <div class="d5">
                        <div class="d6">
                            <div class="d7"> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

</html>
```“强调border元素对margin元素的影响，若忽略border元素会导致margin元素脱离上一级的束缚“

先是对文档的编辑，包括一些盒模型技巧
![在这里插入图片描述](https://img-blog.csdnimg.cn/202011092032132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xZX193ZUk=,size_16,color_FFFFFF,t_70#pic_center)
关于盒模型：一个元素在页面中真实占据的位置叫做盒模型。
margin：两个盒子之间的距离
border：边框 可以设置样式、粗细、颜色。
padding：内边距内容到边框的距离。

###补充项

## 1.技巧

假如有一个padding/border/margin 与其他的三条边不同，其他三条边一样，这个时候我们设置总体样式，再单独去设置它的样式。
```css
border: 5px solid red; 
/* css：层叠特效 */
border-bottom: 10px dashed green;
``
## 2.清除默认样式
有一些标签会有默认的样式，比如默认的margin。
们可以使用：

```css
*{
      margin: 0;
      padding: 0;
}