HTML基础第四课（冲浪笔记4）

最新推荐文章于 2023-01-28 17:36:50 发布

五秒法则

最新推荐文章于 2023-01-28 17:36:50 发布

阅读量271

点赞数 2

分类专栏：前端开发文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_51478745/article/details/124966655

版权

前端开发专栏收录该内容

20 篇文章 6 订阅

订阅专栏

一、CSS继承（常用于：模块区域样式一样的时候，可以写个父级全部继承）

1、文本样式会继承

①代码例子

<!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>Document</title>
    <style>
        .father{
            color: aqua;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="father">
        父级
        <div class="son">
            子级
        </div>
    </div>
</body>
</html>

②效果图：父级的样式继承给了子级

2、布局样式默认不会继承

①代码例子

<!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>Document</title>
    <style>
        .father{
            color: aqua;
            font-size: 24px;
            height: 100px;
            width: 100px;
            background-color: rgb(79, 79, 238);
        }
        .son{
            background-color: rgb(202, 72, 72);
        }
    </style>
</head>
<body>
    <div class="father">
        父级
        <div class="son">
            子级
        </div>
    </div>
</body>
</html>

②效果图：父级的大小没有继承给子级

3、height: inherit;强制继承

①代码例子

<!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>Document</title>
    <style>
        .father{
            color: aqua;
            font-size: 24px;
            height: 100px;
            width: 100px;
            background-color: rgb(79, 79, 238);
        }
        .son{
            background-color: rgb(202, 72, 72);
            height: inherit;
        }
    </style>
</head>
<body>
    <div class="father">
        父级
        <div class="son">
            子级
        </div>
    </div>
</body>
</html>

②效果图：父级所有样式都继承给了子级

二、盒子模型

概念：CSS假定每⼀个标签都是⼀个矩阵，围绕着这个矩阵，从内到外展开⼀系列的属性来描述它，这⼀系列就被称为【盒⼦模型】

组成：content、padding、border、margin

举例：篮球场有⼀个箱⼦📦，箱⼦⾥有⼀颗篮球🏀

篮球场⼜有⼀个箱⼦📦，箱⼦⾥也有⼀颗篮球🏀

1、content：内容，由width、height组成

2、padding：内边距，内容到边框的距离

①上下左右四个方向padding-left/right/top/bottom

a.一个值

b.两个值：1上下，2左右

c.三个值：1上，2左右，3下

d.四个值：顺时针，上右下左

②注意：系统在设置 padding时，默认撑⼤宽⾼，拿出对应的间距作为内间距

如果希望 padding 从宽⾼本身去减⼩的话，设置 box-sizing：border-box 属性

3、border：边框border-top/bottom/left/right

①三部分

a.边框样式：border-style

b.边框颜色：border-color

c.边框粗细：border-width

②可单独设置

border-⽅向-style/color/width

③注意：系统在设置border-width的时候，默认先撑⼤宽⾼，再拿出对应的间距作为边框粗细如果我们希望边框粗细从宽⾼本身去减⼩的话，设置box-sizing：border-box属性

④圆角：border-radius

a.正方形圆角=边长一半时，是圆形

b.可以单独设置某角：border-top/bottom-left/right-radius

4、margin：外间距，边框到边框的距离

同padding一样，四个方向：margin-left/right/top/bottom

补充1：

①背景颜色会自动填充到margin以内的区域

②内容一直在content区域
③属性box-sizing：content-box（默认，宽高只控制content区域，使用boder，padding时会改变整体大小）、border-box（宽高控制整个盒子，在设定的宽高中改变）
④盒子居中 margin: auto （使标签处于所占据⽂档流的正中央）

⑤内容居中text-align： center （使得内容处于他所占据位置的正中央）

⑥height：容器高度、line-height：行高

<!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>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: rgb(25, 144, 223);
            padding: 3px;/* 内间距 */
            box-sizing: border-box;
            border: 5px solid red;/* 边框 */
            border-radius: 50px;
            margin: auto;/* 居中 */
            text-align: center;/* 文本内容居中 */
            line-height: 500px;/* 文本高度居中 */
        }
        
    </style>
</head>
<body>
    <div class="box">内容</div>
</body>
</html>

补充2：盒子模型存在的问题

1、两两标签为父子关系：

（1）子级设置的margin-top等等会传递给父级

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: black;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

（2）解决措施：在父级写属性padding-top: 100px;box-sizing: boder-box;

2、两两标签为兄弟关系：同样的属性会被叠加，取其中的最大值

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: black;
            margin-bottom: 50px;
        }
        .son2{
            width: 200px;
            height: 100px;
            background-color: rgb(215, 37, 37);
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>
</html>

四、转换元素特性：display

1、属性：

（1）none：隐藏（不会显示出来，检查时可找到）
（2）block：转成块级元素（会自动换行h1,div,p）
（3）inline：转成内联元素（不会自动换行span,a）
（4）inline-block：行内块（转换成具有自己大小的且横向排列的元素，块与块之间会有间隙，会占位置）

2、与float的区别：

（1）float浮动：会脱离文档流，不占位置，针对块级元素（left/right）

（2）style="display: none;"占位置

3、float浮动代码举例

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
        }
        .box1{
             background-color: rgb(25, 144, 223);
             float: left;
        }
        .box2{
            background-color: rgb(223, 25, 187);
            float: left;
        }
        .box3{
            background-color: rgb(84, 223, 25);
            float: right;
        }
        .box4{
            width: 300px;
            height: 300px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

五、定位position

1、相对定位：相对于当前的正常位置

position: relative（通常占位置）

2、绝对定位：

①position: absolute（通常不占位置）

父子关系（子元素进行定位，相对于其父级【设置了定位/没有定位而是找到浏览器边缘】的绝对定位）

②fiexd：窗口定位（任何浏览器放大缩小任意窗口时，数值不变）

3、定位的区别

（1）margin-top的效果

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-top: 50px;

        }

        .son1 {
            width: 100px;
            height: 100px;
            background-color: black;
        }
        .son2 {
            width: 100px;
            height: 100px;
            background-color: rgb(212, 134, 24);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1"></div>
    </div>
    <div class="son2"></div>
</body>

</html>

（2）相对定位position: relative的效果

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* margin-top: 50px; */
            position: relative;
            top: 50px;

        }

        .son1 {
            width: 100px;
            height: 100px;
            background-color: black;
        }
        .son2 {
            width: 100px;
            height: 100px;
            background-color: rgb(212, 134, 24);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1"></div>
    </div>
    <div class="son2"></div>
</body>

</html>

（3）绝对定位position: absolute的效果

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* margin-top: 50px; */
            position: absolute;
            top: 50px;

        }

        .son1 {
            width: 100px;
            height: 100px;
            background-color: black;
        }
        .son2 {
            width: 100px;
            height: 100px;
            background-color: rgb(212, 134, 24);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1"></div>
    </div>
    <div class="son2"></div>
</body>

</html>

六、溢出隐藏overflow-x/overflow-y

1、overflow: hidden; 溢出隐藏

代码例子

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="https://img0.baidu.com/it/u=4002835238,1224729013&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
    </div>
</body>
</html>

代码效果图

实际全图

2、overflow: scroll; 滚动条（不管有无溢出）

3、auto：自动识别需不需要滚动条

七、这次给大家展示昵图网的小部分效果

1、昵图网（昵图网_原创素材共享平台www.nipic.com）

<!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>Document</title>
    <style>
        .head {
            width: 1260px;
            height: 800px;
            /* background-color: aqua; */
        }
        .link {
            width: 290px;
            height: 200px;
            position: relative;
            margin-right: 33px;
            float: left;
        }
        .box1 {
            width: 100%;
            height: 50px;
            color: white;
            font-size: 20px;
            line-height: 50px;
            position: absolute;
            text-align: center;
            background-color: rgba(0, 0, 0, .5);
            bottom: 0;
            display: none;
        }
        .link:hover .box1 {
            display: block;
        }
        .btn {
            width: 122px;
            height: 36px;
            font-size: 14px;
            display: inline-block;
            color: #666;
            border: 1px solid #dfdfdf;
            text-align: center;
            line-height: 36px;
            margin-top: 40px;
            margin-right: 20px;
            border-radius: 2px;
            float: left;
        }
        .btn:hover{
            color: #31ccff;
        }
    </style>
</head>

<body>
    <div class="head">
        <div class="box">
            <a class="link" href="https://www.nipic.com/topic/show_27562_1.html" target="_blank">
                <img src="https://pic.ntimg.cn/BannerPic/20220530/original/20220530135257_1.jpg" alt="显示失败">
                <div class="box1">夏季美陈</div>
            </a>
            <a class="link" href="https://www.nipic.com/topic/show_27082_1.html" target="_blank">
                <img src="https://pic.ntimg.cn/BannerPic/20220530/original/20220530135347_1.jpg" alt="显示失败">
                <div class="box1">父亲节</div>
            </a>
            <a class="link" href="https://www.nipic.com/topic/show_27270_1.html" target="_blank">
                <img src="https://pic.ntimg.cn/BannerPic/20220530/original/20220530135413_1.jpg" alt="显示失败">
                <div class="box1">夏至</div>
            </a>
            <a class="link" style="margin-right: 0;"
                href="https://soso.huitu.com/search?kw=%E4%BA%8C%E5%8D%81%E5%A4%A7&from=nipicgd" target="_blank">
                <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606144406_1.jpg" alt="显示失败">
                <div class="box1">党的二十大</div>
            </a>
        </div>

        <div class="text">
            <a href="https://www.nipic.com/topic/show_27202_1.html" target="_blank">
                <div class="btn">星空</div>
            </a>
            <a href="https://www.nipic.com/topic/show_27093_1.html" target="_blank">
                <div class="btn">打折促销海报</div>
            </a>
            <a href="https://www.nipic.com/topic/show_27051_1.html" target="_blank">
                <div class="btn">美食海报</div>
            </a>
            <a href="https://www.nipic.com/topic/show_27071_1.html" target="_blank">
                <div class="btn">旅游海报</div>
            </a>
            <a href="https://www.nipic.com/topic/show_27071_1.html" target="_blank">
                <div class="btn">党建雕塑</div>
            </a>
            <a href="https://www.nipic.com/topic/show_27071_1.html" target="_blank">
                <div class="btn">护肤品广告</div>
            </a>
            <a href="https://www.nipic.com/newpic/1.html" target="_blank">
                <div class="btn">最新图片</div>
            </a>
            <a href="https://www.nipic.com/newpic/1.html" target="_blank">
                <div class="btn">查看更多>></div>
            </a>
        </div>
    </div>
</body>
</html>