web前端零基础入门（六）

339+

已于 2022-11-08 16:07:45 修改

阅读量150

点赞数

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

于 2022-10-11 18:38:10 首次发布

本文链接：https://blog.csdn.net/m0_47743942/article/details/127268852

版权

web前端开发专栏收录该内容

10 篇文章 5 订阅

订阅专栏

web前端零基础入门

59. 轮廓、阴影和圆角
60. 浮动的简介
61. 浮动的特点
62. 导航条练习
63. 简单的布局
64. 高度塌陷和BFC
65. BFC演示
66. clear
67. after伪类解决高度塌陷
68. clearfix

本章节需要重点掌握浮动并能对高度塌陷和外边距重叠问题进行处理！

59. 轮廓、阴影和圆角

outline：用来设置元素的轮廓线，用法和border一样
轮廓和边框不同的点是轮廓不会影响到可见框的大小，元素位置不变

box-shadow：用来设置元素的阴影效果，不会影响页面布局，默认情况下阴影在元素正下方，需要设置偏移量来显示阴影
第一个值：水平偏移量，正值向右移动，负值向左移动
第二个值：垂直偏移量，正值向下移动，负值向左上移动
第三个值：阴影的模糊半径
第四个值：设置阴影的颜色

border-radius：用来设置圆角，设置圆的半径大小
可以指定四个角的圆角：左上，右上，右下，左下
若只有三个值：左上，右上/左下，右下
若只有两个值：左上/右下，右上/左下

将元素设置为圆形：border-radius：50%；

border-top-left-radius：设置左上角
border-top-right-radius：设置右上角
border-bottom-left-radius：设置左下角
border-bottom-right-radius：设置右下角
例如：border-top-left-radius：50px 100px；设置x轴半径为50px，y轴半径为100px

<!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>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
        .box1:hover{
            outline: 10px red solid;
            /* border: 10px red solid; */
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            box-shadow: 30px 30px 20px rgba(0, 0, 0, 0.3);
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            border-radius: 1px 5px 10px 20px;
        }
        
    </style>
</head>
<body>
    <div class="box1"></div>
    <span>我是span</span>
    <div class="box2"></div>
    <br>
    <div class="box3"></div>
</body>
</html>

在这里插入图片描述

60. 浮动的简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动

使用float属性来设置元素的浮动
none：默认值，元素不浮动
left：元素向左浮动
right：元素向右浮动

【注意】

元素设置浮动之后，水平布局的等式便不需要强制成立
元素设置浮动之后，会完全从文档流中脱离，不在占用文档流的位置，因此元素下边还在文档流的元素会自动向上移动

浮动特点：
浮动元素会完全脱离文档流，不再占据文档流中的位置
设置浮动以后，元素会向父元素的左侧或右侧移动
浮动元素默认不会从父元素中移出
浮动元素向左或向右移动时，不会超过其前边的其它浮动元素
如果浮动元素上边是没有浮动的块元素，则浮动元素无法上移
浮动元素不会超过其上边浮动的兄弟元素，最多平齐

浮动总结：主要作用是让页面中的元素可以水平排列

<!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>
        .box1{
            width:400px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        .box2{
            width:400px;
            height: 200px;
            background-color:blue;
            float: left;
        }
        .box3{
            width:200px;
            height: 200px;
            background-color:brown;
            float: right;
        }
    </style>
</head>
<body>
    <dov class="box1"></dov>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

在这里插入图片描述

61. 浮动的特点

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，因此利用浮动设置文字环绕图片的效果

元素设置浮动以后，将会从文档流中脱离，元素的特点会发生变化

元素脱离文档流特点：
块元素不再独占页面一行，其宽度和高度默认被内容撑开
行内元素会变成块元素，可以设置宽高，且默认被内容撑开

因此脱离文档流后不再需要区分块元素和行内元素

<!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>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }
        .box2{
            float: left;
            background-color: gold;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;/*行内元素浮动后可以设置宽高*/
            
        }
    </style>
</head>
<body>
    <div class="box1">我是div1</div>
    <div class="box2">我是div2</div>
    <span>我是span</span>
</body>
</html>

在这里插入图片描述

62. 导航条练习

<!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>
    <link rel="stylesheet" href="../resetstylesheet/reset.css">
    <style>
        .nav{
            width: 1210px;
            height: 48px;
            background-color: #e2e0de;
            margin: 50px auto;
        }
        .nav li{
            float: left;
            list-style: none;/* 去掉无序列表的点  */
            line-height: 48px;/* 文字垂直居中 */
        }
        .nav a:hover{
            background-color: #3f3f3f;
            color: #e8e7e3;
        }
        .nav a{
            text-decoration: none;/* 去掉超链接的下划线 */
            font-size: 18px;
            color:#777;
            display: block; /* a设置成块元素，可以设置宽、高 */
            padding: 0 39px;
        }
        .nav li:last-child a{
            padding: 0 42px 0 41px;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述

问题：当CSS选择器都可以选中时，优先用什么选择器？

63. 简单的布局

简单布局练习：
在这里插入图片描述

<!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>
    <link rel="stylesheet" href="../resetstylesheet/reset.css">
    <style>
        header,main,footer{
            width: 1000px;
            margin: 50px auto;
        }
        header{
            height: 150px;
            background-color: silver;
        }
        main{
            height: 500px;
            background-color: #bfa;
            margin: 0 auto;
        }
        nav,article,aside{
            float: left;
            height: 100%;
        }
        nav{
            width: 200px;
            background-color: yellow;
        }
        article{
            width: 580px;
            background-color: orange;
            margin: 0 10px;
        }
        div{
            width: 580px;
            height: 245px;
            background-color: chartreuse;
        }
        section{
            width: 580px;
            height: 245px;
            background-color: cornflowerblue;
            margin: 10px 0 0 0;
        }
        h2,h3,h4{
            display: block;
            float: left;
            height: 100%;
        }
        h2{
            width: 180px;
            background-color: cyan;
        }
        h3{
            width: 180px;
            background-color: lightcoral;
            margin: 0 20px;
        }
        h4{
            width: 180px;
            background-color: goldenrod;
        }
        aside{
            width: 200px;
            background-color: pink;
        }
        footer{
            height: 150px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <header></header>
    <main>
        <nav></nav>
        <article>
            <div></div>
            <section>
                <h2></h2>
                <h3></h3>
                <h4></h4>
            </section>
        </article>
        <aside></aside>
    </main>
    <footer></footer>
</body>
</html>

在这里插入图片描述

64. 高度塌陷和BFC

在浮动布局中父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，将无法撑起父元素的高度，导致父元素高度塌陷，父元素高度塌陷后，其下的元素会自动上移，导致页面布局混乱，因此高度塌陷问题必须要解决

BFC（Block Formatting Context）：块级格式化环境
BFC是CSS中的一个隐含的属性，开启BFC的元素会变成一个独立的布局区域
开启BFC特点：
开启BFC后元素不会被浮动元素所覆盖
开启BFC的元素子元素和父元素外边距不会重叠
开启BFC的元素可以包含浮动的子元素

如何开启BFC：（隐含属性，无法直接开启需简介开启，但有副作用）
设置元素浮动
将元素设置为行内块元素
将元素的overflow设置为一个非visible的值（通常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>
        .outer{
            border: 10px red solid;
            overflow: hidden; /* 给outer开启BFC，可以包含浮动元素 */
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;/* 子元素开启浮动，无法撑起父元素高度，导致高度塌陷 */
            
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

65. BFC演示

可以使用Zeal离线文档查看更多BFC内容：
在这里插入图片描述

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: brown;
            /* overflow: hidden;开启BFC */
            /* float: left;开启BFC */
            display: inline-block;/* 开启BFC */
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: coral;
            margin-top: 30px;/* box1开启了BFC,因此上外边距不会对box1起作用 */
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box3"></div>
    </div>
    <div class="box2"></div>

</body>
</html>

在这里插入图片描述

66. clear

如果不希望某个元素因为其它浮动元素的影响而改变位置，可以通过clear属性来清除影响

left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both：清除两侧中最大影响的那侧

原理：设置clear后，浏览器会自动为元素添加一个上外边距，使其不受其它元素影响

<!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>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: right;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: brown;
            clear: both; /* 右侧浮动元素影响大 */
        }
       
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

在这里插入图片描述

67. after伪类解决高度塌陷

高度塌陷问题属于表现上问题，可以使用伪元素来较完美的解决高度塌陷问题

<!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>
        .box1{
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        .box1::after{/* after伪元素解决高度塌陷问题 */
            content: "";
            display: block;
            clear: both;
        }
        
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

68. clearfix

使用clearfix解决外边距重叠和高度塌陷问题

<!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>
        .box1{
            border: 10px red solid;
            background-color: blue;
            
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: brown;
            float: left;
            margin-top: 20px;
        }
        .clearfix::before,.clearfix::after{
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix" >
        <div class="box2"></div>
    </div>
</body>
</html>