HTML与CSS学习第6天

HTML与CSS学习第六天

1. 结构伪类选择器

1.1 作用与优势

作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父元素选择器中的子元素

1.2 选择器

选择器	说明
E:first-child{}	匹配父元素中的第一个子元素，并且是E元素
E:last-child{}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个元素，并且是E元素

注意点

n为0、1、2、3、4、…
通过n可以组成常见公式

功能	公式
偶数	2n，even
奇数	2n+1，2n-1、odd
找到前五个	-n+5
找到从第五个往后	n+5

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

        /* 注意点：两个条件同时满足 第一个子元素 且是li标签 */
        /* 选中第一个子元素 */
        li:first-child
        {
            color: blue;
        }
        /* 选中最后一个子元素 */
        li:last-child
        {
            color: green;
        }

        /* 选中第5个元素 */
        li:nth-child(5)
        {
            color: red;
        }

        /* 选中倒数二个子元素 */
        li:nth-last-child(2)
        {
            color: orange;
        }
    
    </style>
</head>
<body>
    <div>

        <ul>
            <div>666</div>
            <li>我是第1个标签</li>
            <li>我是第2个标签</li>
            <li>我是第3个标签</li>
            <li>我是第4个标签</li>
            <li>我是第5个标签</li>
            <li>我是第6个标签</li>
            <li>我是第7个标签</li>
            <li>我是第8个标签</li>
            <li>我是第9个标签</li>
        </ul>
    </div>
</body>
</html>

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 选中所有的li标签 */
        li:nth-child(n)
        {
            background-color: red;
        }

        /* 选中偶数个li标签 2n even*/
        li:nth-child(2n)
        {
            background-color: blue;
        }

        /* 选中奇数个li标签 2n-1 2n+1 odd */
        li:nth-child(odd)
        {
            background-color: orange;
        }

        /* 选中前五个 */
        li:nth-child(-n+5)
        
        {
            background-color: green;
        }

        /* 选中从5开始的后面全部 */
        li:nth-child(n+5)
        {
            background-color: red;
        }
    </style>
</head>
<body>
    <div>

        <!-- ul->li{我是第$个li标签}*9 -->
        <ul>
            <li>我是第1个li标签</li>
            <li>我是第2个li标签</li>
            <li>我是第3个li标签</li>
            <li>我是第4个li标签</li>
            <li>我是第5个li标签</li>
            <li>我是第6个li标签</li>
            <li>我是第7个li标签</li>
            <li>我是第8个li标签</li>
            <li>我是第9个li标签</li>
        </ul>

    </div>
</body>
</html>

效果图

1.2.2 nth-of-type结构伪类选择器

选择器	说明
E:nth-of-type(n){}	只在父元素的同类型（E）子元素范围内，匹配第n个

nth-child：在所有子元素中数个数
nth-of-type：通过类型找到符合的子元素，再在子元素中数个数

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        

        /* nth-of-type选择器 */
        /* 选中类型为li的第3个子元素 */
        li:nth-of-type(3)
        {
            background-color: blue;
        }

        /* nth-child选择器 */
        /* 第3个标签必须为li标签且为div的子元素 */
        li:nth-child(3)
        {
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <li><a href="">我是第1个li标签</a></li>
        <li><a href="">我是第2个li标签</a></li>
        <div>我是大傻逼</div>
        <li><a href="">我是第3个li标签</a></li>
        <li><a href="">我是第4个li标签</a></li>
        <li><a href="">我是第5个li标签</a></li>
        <li><a href="">我是第6个li标签</a></li>
        <li><a href="">我是第7个li标签</a></li>
        <li><a href="">我是第8个li标签</a></li>
        <li><a href="">我是第9个li标签</a></li>
    </div>
</body>
</html>

效果图

2. 伪元素

伪元素：一般页面的非主体内容（width和height范围外）可以使用伪元素
区别
- 元素：HTML设置的标签（结构）
- 伪元素：css模拟出来的标签效果（样式）
种类

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点

必须设置content属性才能生效
伪元素默认是行内元素

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box
        {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        /* 伪元素 */

        /* 在内容之前添加伪元素 */
        .box::before
        {
            display: inline-block;
            width: 300px;
            height: 100px;
            background-color: green;
            /* content是必加属性 */
            content: "777";
        }

        /* 在内容之后添加伪元素 */

        .box::after{
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: orange;
            content: '999';
        }
    </style>
</head>
<body>
    <div class="box">

        我是一个div标签

    </div>
</body>
</html>

效果图

3. 标准流

定义：标准流又称文档流，是浏览器在渲染显示页面内容时默认采用的一套排版规则，规定了应该以何种方式排版元素
常见标准流排版规则
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素或行内块元素：从左往右，水平布局，空间不够，自动折行

示例


<!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>
    div {
      width: 200px;
      height: 200px;
      background-color: orange;
    }

    span {
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div>我是块级元素div</div>
  <div>我是块级元素div</div>
  <div>我是块级元素div</div>

  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
</body>
</html>

效果图

4. 浮动

4.1 浮动的作用

4.1.1 早期作用：图文环绕

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            line-height: 1;
        }
        /* 左浮动 */
        img{
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        p
        {
           
            width: 400px;
        }
    </style>
</head>
<body>
    <img src="D:\BaiduNetdiskDownload\资料\day06\06-资料\01-上课文件\images/1.jpg" alt="">
    <p>前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
            前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
            前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
            前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
            前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
            前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。</p>

    
    
</body>
</html>

效果图

4.1.2 现在的作用

网页布局
让垂直布局的盒子变成水平布局

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left
        {
            /* 设置左浮动 */
            float: left;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .right
        {
            /* 设置右浮动 */
            width: 300px;
            height: 300px;
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

效果图

4.2 浮动的代码

属性名：float
属性值

属性值效果
left 左浮动
right 右浮动

属性值	效果
left	左浮动
right	右浮动

4.3 浮动的特点

浮动元素会脱离标准流，在标准流中不占位置(但在页面中还是占用位置，没有脱离文本流，图文环绕实现)
- 相当于从地面飘到了空中
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
浮动元素会受到上方元素边界的影响

注意点

浮动元素不能通过text-align或margin:0 auto,让浮动元素本身水平居中

浮动元素覆盖标准流元素示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div
        {
            width: 300px;
            height: 300px;
            /* 三个都浮动-浮动找浮动 下一个浮动会在上一个浮动的后面左右浮动 */
            /* float: right; */
        }

        div.red
        {
            background-color: red;
        }
        div.blue
        {
            /* 设置浮动 */
            /* float: right; */
            background-color: blue;
            height: 200px;
            /* 设置浮动 浮在上方*/
            float: left;
            /* float: right; */
        }
        div.green
        {
            /* height: 400px; */
            background-color: green;
            /* float: right; */
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</body>
</html>

特殊显示效果示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span
        {
            /* 设置浮动后即使没有转换为行内块元素或块元素也可以设置宽高 */
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <span>我是一个span标签</span>
    <span>我是一个span标签</span>
    <span>我是一个span标签</span>
</body>
</html>

效果图

普通浮动示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        div
        {
            width: 200px;
            height: 200px;
            /* background-color: red; */
        }
        div.red
        {
            /* 将盒子设置为行内块元素时 */
            /* blue盒子可以上去 */
            display: inline-block;
            background-color: red;
        }

        div.blue
        {
            /* 因为上方红盒子独占一行，blue盒子不会移到右上角去 */
            float: right;
            background-color: blue;
        }
        div.green
        {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</body>
</html>

效果图

5. 清除浮动

5.1 清除浮动介绍

浮动带来的影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：子元素浮动后脱标，不占位置
目的：需要父元素有高度，从而不影响其他网页元素布局
视频链接：<[前端HTML5+CSS3+移

动Web全套教程，零基础学前端web首选黑马程序员_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1cf4y1j7hL?p=172)>

5.2 清除浮动的方法

5.2.1 直接设置父元素高度

优点：简单，粗暴
缺点：有些布局不能固定父元素高度。

5.2.2 额外标签法

方法
- 在父元素内容的最后添加一个块级元素
- 给添加的块元素设置clear:both
缺点：额外标签是html结构变复杂

5.2.3 单伪元素清除法

方法：用伪元素代替额外标签

写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father
        {
            width: 400px;
            background-color: pink;
            /* 方法二：在.father 标签内容之后添加一个块级元素，设置clear：both属性 */
        }
        .son
        {
            width: 100px;
            height: 400px;
            background-color: red;
            float: left;
        }

        /* .clear
        {
            clear: both;
        } */

        /* 方法三：单伪元素清除法 */

        .clearfix::after
        {
            content: '.';
            display: block;
            clear: both;
            /* 补充代码，在网页中看不到伪元素 */
            height: 0;
            visibility: hidden;
        }


    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
        
    </div>
</body>
</html>

优点：项目中使用，给标签加类即可清除浮动

5.2.4 双伪元素清除法

写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father
        {
            width: 400px;
            background-color: pink;
        }

        .son
        {
            width: 100px;
            height: 400px;
            background-color: red;
            float: left;

        }

        /* 双伪元素清除法 */
        .clearfix::after,
        .clearfix::before
        {
            content: '';
            display: table;

        }
        .clearfix::after
        {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
</body>
</html>

优点：项目中使用，给标签添加类即可
效果图

5.2.5 给父元素设置overflow:hidden

6. BFC介绍

定义：块格式上下文(Block Formatting Context):BFC

是web页面的可视CSS渲染的一部分，是块盒子的布局过程中发生的区域，也是浮动元素与其他元素交互的区域
创建BFC的方法
1. html标签是BFC盒子
2. 浮动元素是BFC盒子
3. 行内块元素是BFC盒子
4. overflow取值不为visible
5. …
BFC盒子常见特点
- BFC盒子会默认包裹住内部子元素，可应用于清除浮动
- BFC盒子本身与子元素之间不存在margin的塌陷现象，解决margin塌陷

7. 网页布局

7.1基本思路

从上到下，从外往里
盒子模型构建
对于一个盒子里中的小盒子，要么横着划分，要么竖着划分（视情况而定）。

posted @ 2022-02-08 12:54 凌歆阅读(28) 评论(0) 收藏举报

刷新页面返回顶部

HTML与CSS学习第6天

HTML与CSS学习第六天

目录

1. 结构伪类选择器

1.1 作用与优势

1.2 选择器

注意点

示例

1.2.2 nth-of-type结构伪类选择器

示例

2. 伪元素

注意点

示例

3. 标准流

4. 浮动

4.1 浮动的作用

4.1.1 早期作用：图文环绕

4.1.2 现在的作用

示例

4.2 浮动的代码

4.3 浮动的特点

注意点

浮动元素覆盖标准流元素示例

特殊显示效果示例

普通浮动示例

5. 清除浮动

5.1 清除浮动介绍

5.2 清除浮动的方法

5.2.1 直接设置父元素高度

5.2.2 额外标签法

5.2.3 单伪元素清除法

5.2.4 双伪元素清除法

5.2.5 给父元素设置overflow:hidden

6. BFC介绍

7. 网页布局

7.1基本思路

公告