day6 CSS布局2

杰瘦瘦

已于 2022-09-25 19:36:11 修改

阅读量86

点赞数

分类专栏：前端基础笔记文章标签：前端 html css javascript

于 2022-06-13 23:13:26 首次发布

本文链接：https://blog.csdn.net/m0_70619994/article/details/125175250

版权

前端基础笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

（5）给父元素设置overflow : hidden

一、结构伪类选择器

1、作用和优势

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

2、选择器

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

代码示例：

<!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>
        li:first-child{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

展示效果：

二、伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

元素：HTML设置的标签
伪元素：由 CSS 模拟出的标签效果

种类：

注意点：

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

代码示例：

<!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{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .father::before{
           content: '蜡笔'; 
        }
        .father::after{
            content: '小新';
        }
    </style>
</head>
<body>
    <div class="father">与</div>
</body>
</html>

展示效果：

三、标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

四、浮动

1、浮动的作用

早期的作用：用来做图文环绕

现在的作用：用来做网页布局（让垂直布局的盒子变成水平布局，如：一个在左，一个在右）

2、浮动的代码

属性名：float

属性值：

左浮动：float : left
右浮动：float : 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>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: skyblue;
            float: left;
        }
        .two{
            background-color: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

展示效果：

使用的浮动的话就可以让两个块级标签一行排列，并且可以紧挨着

3、浮动的特点

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置（相当于从地面飘到了空中）
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果① 一行可以显示多个 ② 可以设置宽高

注意点：

浮动的元素不能通过text-align:center或者margin:0 auto

4、拓展点：CSS书写顺序

CSS书写顺序：

浮动 / display
盒子模型：margin border padding 宽度高度背景色
文字样式

按上面的书写顺序写，浏览器的执行效率会更高

五、清除浮动

1、清除浮动的介绍

含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：

子元素浮动后脱标 → 不占位置

目的：

需要父元素有高度，从而不影响其他网页元素的布局

2、清除浮动的方法

（1）直接设置父元素高度

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度

（2）额外标签法

操作：

在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear:both

代码示例：

        .cleanfix{
            clear: both;
        }

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

（3）单伪元素清除法

操作：用伪元素替代了额外标签

        .cleanfix::after{
            content: '';
            display: block;
            clear: both;
        }

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

（4）双伪元素清除法

代码示例：

        .cleanfix::before,
        .cleanfix::after{
            content: '';
            display: table;
        }
        .cleanfix::after{
            clear: both;
        }

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

双伪元素清除法其实真正清除浮动的是这段代码

        .cleanfix::after{
            clear: both;
        }

那为什么还要写上面的代码，是因为双伪元素清除法除了清除浮动以外还能解决外边距塌陷问题

外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置

（5）给父元素设置overflow : hidden

操作：直接给父元素设置overflow : hidden

优点：方便

杰瘦瘦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day6 CSS布局2

目录一、结构伪类选择器1、作用和优势2、选择器二、伪元素三、标准流四、浮动1、浮动的作用2、浮动的代码3、浮动的特点4、拓展点：CSS书写顺序五、清除浮动1、清除浮动的介绍2、清除浮动的方法（1）直接设置父元素高度（2）额外标签法（3）单伪元素清除法（4）双伪元素清除法（5）给父元素设置overflow : hidden代码示例：展示效果：伪元素：一般页面中的非主体内容可以使用伪元素区别：种类：注意点：代码示例：展示效果：标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规
复制链接

扫一扫