day01

[Augenstern]

已于 2022-04-12 20:11:58 修改

阅读量377

点赞数

文章标签： html5 html

于 2022-04-12 20:05:36 首次发布

本文链接：https://blog.csdn.net/weixin_44627935/article/details/124131937

版权

这篇博客介绍了HTML的基本结构和常用的div标签，讲解了边框(border)的各种样式，包括实线、虚线、点线等，并探讨了边框对盒模型面积的影响。此外，还详细阐述了内边距(padding)和外边距(margin)的概念，以及在实际布局中可能出现的叠压现象和塌陷问题及其解决方案。最后，通过两个实例展示了如何利用CSS实现图片和奥运五环的显示效果，加深了对选择器权重理解。

摘要由CSDN通过智能技术生成

01 初识html
1、<!DOCTYPE html>：当前文档使用html5的标准进行解析
2、<html></html>：根标签
3、head：引入相关配置、描述文件
4、meta charset=“UTF-8”：使用utf-8的编码规则防止中文乱码
5、body中写正文内容
02_div标签
1、div:无语义
03_border边框
1、soild：实线
2、dashed：虚线
3、dotted：点线
4、double：双线
5、border-radius：圆角
6、transparent：透明色
7、边框会增加盒模型的面积
04_padding内边距
1、盒模型面积：S = (b-l + p-l + w + p-r + b-r) * (b-t + p-t + h + p-b + b-b)
05_margin外边距
1、叠压现象：常态下，两者之间的间距以大值为准
2、塌陷问题：
原因：父级的第一个子级是块标签，并且使用了margin或者margin-top
解决方案：
①、不使用margin，在父级使用padding-top
②、给父级一个border
③、在父级使用overflow：hidden（溢出隐藏）
06_选择器
1、权重：id(100) > class(10) > tag(1)

练习：

1、实现图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lx div</title>
    <style>
        div{
            width: 0;
            height: 0;
            border: 20px solid red;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: gold;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

图片：
div

实现五环：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五环</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 20px solid black;
            border-radius: 50%;
        }
        .d1{
            margin-left: 140px;
            margin-top: -140px;
            border: 20px solid red;
        }
        .d2{
            margin-left: 280px;
            margin-top: -140px;
            border: 20px solid blue;
        }
        .d3{
            margin-left: 70px;
            margin-top: -70px;
            border: 20px solid green;
        }
        .d4{
            margin-left: 210px;
            margin-top: -140px;
            border: 20px solid yellow;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    
</body>
</html>