CSS自学笔记

咕噜咕噜蛙

已于 2023-03-11 16:39:12 修改

阅读量155

点赞数

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

于 2023-03-11 15:58:55 首次发布

本文链接：https://blog.csdn.net/weixin_61010342/article/details/129230233

版权

笔记同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

img和background-img的区别

介绍：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

通常写到标签<style></style>中，并置于<head></head>中。

<!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>
    </style>
</head>

<body>
</body>

</html>

选择器：

CSS实现对HTML文件中的元素的一对一、一对多和多对一的选择和控制。

标签选择器:对该标签的元素进行控制
类选择器：对相同类的元素进行控制
id选择器：对相同id的元素进行控制
通配符选择器：对所有元素进行控制
后代选择器：对所有后代进行控制
子代选择器：对直接后代进行控制
并集选择器：同时控制多组标签，设置相同样式
交集选择器：
hover伪类选择器（伪类选择器中hover最常见）：选中鼠标悬停在元素上的状态，设置样式

<!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>
        /* 标签选择器 */
        p {
            color: blue;
            font-style: normal;
        }
        /* 类选择器 */
        .green {
            color: green;
        }
        /* id选择器 */
        #id {
            color: skyblue;
            font-size: 40px;
            font-weight: 700;
        }
        /* 通配符选择器(*就是通配符) */
        * {
            color: gray;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>标签选择器</p>
    <p class="green">类选择器</p>
    <p id="id">id选择器</p>
    <!-- 通配符选择器不会设置类选择器和id选择器中未设置的属性 -->
    <h2>通配符选择器</h2>
</body>

</html>

<!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>
        /* 后代选择器，选择器1与选择器2之间用空格隔开 */
        div p {
            color: red;
        }
        /* 子代选择器，选择器1与选择器2之间用逗号隔开 */

    </style>
</head>

<body>
    <div>
        <p>这是div的后代</p>
        <span>
            <p>这也是div的后代</p>
        </span>
    </div>
</body>

</html>

<!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>
        /* 子代选择器，选择器1与选择器2之间用>隔开 */
        div>p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>这是div的直接后代</p>
        <span>
            <p>是div的后代但不是div的直接后代</p>
        </span>
    </div>
</body>

</html>

<!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>
        /* 并集选择器，用逗号隔开 */
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <p>p标签</p>
    <span>span标签</span>
    <div>div标签</div>
</body>

</html>

<!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.jiao {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="jiao">这个是jiao类的div</div>
    <div>这个是div</div>
    <p class="jiao">这个是jiao类的p</p>
</body>

</html>

<!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>
        /* hover伪类选择器 */
        a:hover {
            color: red;
        }
    </style>
</head>

<body>
    /* 图片因截图原因未显示鼠标，实际上鼠标是悬停在文字上的 */
    <a href="#">当鼠标悬停在上面时为红色</a>
</body>

</html>

文字基本样式:

font-size:设置文字大小
font-weight:设置文字粗细
font-style:设置文字是否倾斜

<!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>
        .italic {
            font-style: italic;
        }

        .normal {
            font-style: normal;
        }
    </style>
</head>

<body>
    <div>这是没有倾斜的文字</div>
    <em>这是倾斜的文字</em>
    <div class="italic">这也是倾斜的文字</div>
    <em class="normal">这是没有倾斜的文字</em>
</body>

</html>

字体设置:

<!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>
        .ht {
            font-family: 黑体;
        }

        .yh {
            font-family: 微软雅黑;
        }

        .st {
            font-family: 宋体;
        }

        .explain {
            /* sans-serif是非衬线字体，在网页中一般均采用非衬线字体 */
            font-family: 微软雅黑, 黑体, sans-serif;
        }
    </style>
</head>

<body>
    <p class="ht">这是黑体</p>
    <!-- Windows系统默认微软雅黑，所以此处class="yh"省去效果一样 -->
    <p class="yh">这是微软雅黑</p>
    <p class="st">这是宋体</p>
    <p class="explain">字体样式按顺序，直到找到当前电脑存在的字体</p>
</body>

</html>

层叠性:

后面的覆盖前面的

<!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>
        p {
            color: red;
            color: blue;
        }
    </style>
</head>

<body>
    <p>看看我是红色还是蓝色</p>
</body>

</html>

行高:

<!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>
        p {
            /* line-height: 22px; （写法一）*/
            /* 下面是写法二，表示1.5倍字体高度 */
            line-height: 1.5;
        }
    </style>
</head>

<body>
    <p>行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距行高是字体高度加上间距和下间距
    </p>
</body>

</html>

font复合:

<!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>
        p {
            /* font: style weight size/line-height family; 要省只能省前两个 */
            font: italic 700 22px 黑体;
        }
    </style>
</head>

<body>
    <p>这是一段被复合属性设置过的文字</p>
</body>

</html>

文本样式:

文本缩进:有font-indent:XXpx;和font-indent:Xem;后者更方便更常用

<!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>
        .a {
            /* 几像素 */
            text-indent: 20px;
        }

        .b {
            /* 几个字 */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p class="a">
        文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进
    </p>
    <p class="b">
        文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进
    </p>
</body>

</html>

文本水平对齐方式:text-align:;注意:控制哪个元素就给他的父元素设置该属性,并不限于文本元素(<body><img src="" alt=""></body>,要让图片居中显示则应该给<body></body>设置)

<!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>
        p {
            /* margin:0 auto; 在div h p中写在本标签中也可实现水平居中效果*/
            /* text-align:left; 默认也是左边 */
            /* text-align:right; */
            text-align: center;
        }
    </style>
</head>

<body>
    <p>这是一段平平无奇的文字</p>
</body>

</html>

文本修饰线:text-decoration:;

<!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>
        #a {
            /* 下划线，常用 */
            text-decoration: underline;
        }

        #b {
            /* 删除线，不常用 */
            text-decoration: line-through;
        }

        #c {
            /* 上划线，几乎不用 */
            text-decoration: overline;
        }

        #d {
            /* 常用来去下划线 */
            text-decoration: none;
        }
    </style>
</head>

<body>
    <p id="a">这是一段平平无奇的文字用来演示文本修饰</p>
    <p id="b">这是一段平平无奇的文字用来演示文本修饰</p>
    <p id="c">这是一段平平无奇的文字用来演示文本修饰</p>
    <p id="d">这是一段平平无奇的文字用来演示文本修饰</p>
</body>

</html>

颜色取值:

设置背景图片：

通过background-image:url();来设置背景图片，并且是默认平铺效果

<!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;
            /* 默认平铺效果 */
            background-image: url(images/成长守护平台图标.jpg);
        }
    </style>
</head>

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

</html>

设置平铺效果：

属性background-repeat

background-repeat:repeat;

background-repeat:no-repeat;

background-repeat:repeat-x;

background-repeat:repeat-y;

<!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;
            /* 默认平铺效果 与background-repeat:repeat等价 */
            background-image: url(images/成长守护平台图标.jpg);
            /* 不平铺：background-repeat:no-repeat
            x方向平铺：background-repeat:repeat-x
            y方向平铺：background-repeat:repeat-y */
        }
    </style>
</head>

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

</html>

背景位置：

background-position:水平垂直;

水平和垂直方向的参数既可以是具体的像素值也可以是left/center/right（水平）&top/center/bottom（垂直），如果是前者，则先水平后垂直，先后顺序不能调换，如果是后者，顺序无所谓。

特殊情况：background-position:center; <=> background-position:center center;

<!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: 150px;
            height: 150px;
            background-color: pink;
            background-repeat: no-repeat;
            background-image: url(images/查看更多-圆框.png);
            /* background-position:水平 垂直; */
            background-position: 0 0;
        }
    </style>
</head>

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

</html>

复合属性background：

将background-color、background-image、background-repeat、background-position写进background属性，并且不分先后顺序。

<!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 {
            height: 200px;
            width: 200px;
            background: orange url(images/查看更多-圆框.png) no-repeat right bottom;
        }
    </style>
</head>

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

</html>

img和background-img的区别：

img意为插入图片，background-image意为背景图片，当图片较为重要不可或缺时使用img，当图片不重要时使用background-image。例如：小米商城左上角的logo就是用的background-image，但其商品的图片用的是img。

显示模式：

1、块级元素：

特点：①一行只能有一个，一个占一行

②宽度默认是父级元素的宽度，高度由内容撑开

③宽高可以设置

代表标签：div、p、h、ul、li、dl、dt、dd、form、header、nav、footer……

2、行内元素：

特点：①一行可以有多个

②宽高默认都是由内容撑开

③宽高不可设置

代表标签：a、span、b、u、i、s、strong、ins、em、del

3、行内块元素：

特点：①一行可以有多个

②宽高可设置

代表标签：input、textarea、button、select

特殊情况：img标签由行内块元素特点，但Chrome调试工具中显示结果是inline

4、转换：

三种显示模式的特点各不相同，因此可以在必要时进行转换。

display:block 转换成块级元素

display:inline-block 转换成行内块元素

display:inline 转换成行内元素（几乎不用）

标签嵌套：

块级元素的嵌套：块级元素可以嵌套块级元素、行内元素、行内块元素、文本等……

注：①p标签中不可嵌套p、div、h……（段落中肯定不能嵌套段落、层次、标题什么的呀）

②a标签中除了a不可以，其他都可以嵌套

CSS的特性：

继承性：所有控制文字的属性都可继承，其他都不能继承

层叠性：选择器优先级相同时（这个前提不要落下！），相同属性写在后面的层叠（覆盖）前面的

优先级：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important（权重最高，但不继承）

复合选择器中需要通过权重叠加计算方法来判断最终生效的选择器，权重叠加计算公式：

（行内样式个数，id选择器个数，类选择器个数，标签选择器个数），优先级左至右依次降低，各位不进位

排错：

盒子模型：

概念：

1、页面中的标签可看作一个一个的盒子，通过盒子方便进行布局

2、盒子模型的构成：content（内容）、padding（内边距）、border（边框）、margin（外边距）

border:

<!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: 30px;
            height: 30px;
            border: 10px solid blue;
            /* 边框可以撑大盒子，盒子实际宽高为30+10*2=50px */
        }
    </style>
</head>

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

</html>

padding:

<!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>
            /* 内边距也会撑大盒子 */
        .one {
            width: 30px;
            height: 30px;
            border: 2px solid;
            /* 实线 */
            padding: 10px;
            /* 上下左右10px */
        }

        .two {
            width: 30px;
            height: 30px;
            border: 2px dashed;
            /* 虚线 */
            padding: 10px 20px;
            /* 上下10px，左右20px */
        }

        .three {
            width: 30px;
            height: 30px;
            border: 2px dotted;
            /* 点线 */
            padding: 10px 20px 30px;
            /* 上10px， 左右20px，下30px */
        }

        .four {
            width: 30px;
            height: 30px;
            border: 2px solid;
            padding: 10px 20px 30px 40px;
            /* 上10px，右20px，下30px，左40px */
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>

</html>

內减模式：

<!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.first {
            width: 240px;
            height: 240px;
            border: 10px solid;
            padding: 20px;
            background-color: pink;
        }

        /* first、second效果一样 */
        div.second {
            width: 300px;
            height: 300px;
            border: 10px solid;
            padding: 20;
            background-color: pink;
            /* box-sizing:border-box;自动计算多于大小自动减去，无需手动计算 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="first"></div>
    <br>
    <div class="second"></div>
</body>

</html>

margin:

外边距，设置规则同padding，区别在于在边框外，不撑大盒子。

清除默认样式：

浏览器通常会在盒子模型上产生默认的内外边距，为了精准布局，一般需要清除。

<!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>
    /* 清除前 */
    </style>
</head>

<body>
    <div>div</div>
    <h1>h1</h1>
</body>

</html>

<!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;
        }
    </style>
</head>

<body>
    <div>div</div>
    <h1>h1</h1>
</body>

</html>

版心居中：

margin:0 auto;

解释：上下外边距为0，左右外边距均为auto，也就是说左右外边距要相等，至于到底是多少，根据浏览器页面大小自动调整。

<!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: 800px;
            height: 200px;
            /* 上下外边距为0，左右外边距均为auto，也就是说左右外边距要相等，至于到底是多少，根据浏览器页面大小自动调整 */
            margin: 0 auto;
            background-color: burlywood;
        }
    </style>
</head>

<body>
    <div>这是版心</div>
</body>

</html>

外边距折叠现象：

1、合并现象：垂直布局的块级元素，上下margin会合并，最终两者距离为margin中大的那一个

解决方法：只给其中一个设margin

2、塌陷现象：互相嵌套的块级元素，子元素的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>
        span {
            margin: 20px;
            padding: 50px;
        }
    </style>
</head>

<body>
    <span>span</span>
    <span>span</span>
    <div>div</div>
</body>

</html>

结构伪类选择器：

作用：根据元素在HTML中的结构关系查找元素

优势：减少对于HTML中类的依赖，有利于保持代码整洁

场景：常用于查找某父级选择其中的子元素

<!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: pink;
        }

        /* 最后一个 */
        li:last-child {
            background-color: bisque;
        }

        /* 正数第三个 */
        li:nth-child(3) {
            background-color: rgb(190, 243, 111);
        }

        /* 倒数第二个 */
        li:nth-last-child(2) {
            background-color: cornflowerblue;
        }

        /* 5n */
        li:nth-child(5n) {
            background-color: deepskyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

伪元素：

一般页面中的非主体内容可以使用伪元素，与元素的区别在于：元素是HTML中的标签，而伪元素是用CSS模拟出的标签效果。

伪元素种类：

① ::before 在父元素内容的最前面添加一个伪元素

② ::after 在父元素内容的最后面添加一个伪元素

注意：1、必须设置content属性伪元素才能生效

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>
        /* 添加在父级之前 */
        div::before {
            content: '伪元素一'
        }

        /* 添加在父级之后 */
        div::after {
            content: '伪元素二'
        }
    </style>
</head>

<body>
    <div>父级</div>
</body>

</html>

标准流：

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

常见标准流排版规则：

1、块级元素：从上往下，垂直布局，独占一行

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>
        .one {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .three {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

</html>

（左图不加浮动，右图加了浮动，可以加margin-top使得橙色往下移）

注意：添加了浮动的元素，text-align:center;&margin:0 auto;不会生效

CSS属性书写顺序：

按照下述顺序写，看着舒服，而且浏览器执行效率会更高。

1、定位 / 浮动 / display

2、盒子模型：margin border padding w+h bgc

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>
        .father {
            margin: 0 auto;
            width: 800px;
            height: 300px;
            background-color: yellow;
        }

        .left {
            float: left;
            width: 250px;
            height: 300px;
            background-color: royalblue;
        }

        .right {
            float: right;
            width: 540px;
            height: 300px;
            background-color: peachpuff;
        }

        .bottom {
            height: 100px;
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

<!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 {
            margin: 0 auto;
            width: 800px;
            /* 与上面代码不同之处 */
            /* height: 300px; */
            background-color: yellow;
        }

        .left {
            float: left;
            width: 250px;
            height: 300px;
            background-color: royalblue;
        }

        .right {
            float: right;
            width: 540px;
            height: 300px;
            background-color: peachpuff;
        }

        .bottom {
            height: 100px;
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

方法：

1、父级加height，既然父级不加height会产生影响，加上不就完事了吗（问题是很多情况下不是不相加，而是加不了，比如在购物网站上上划永远刷不到头，你猜他是多高）

2、额外标签法

1、在父级元素内容的最后添加一个块级元素

2、给添加的块级元素设置属性 clear:both;（清除左右两侧浮动的影响）

缺点：添加了标签，使页面的HTML结构变复杂了

<!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 {
            margin: 0 auto;
            width: 800px;
            /* height: 300px; */
            background-color: yellow;
        }

        /* 区别 */
        .clearfix {
            clear: both;
        }

        .left {
            float: left;
            width: 250px;
            height: 300px;
            background-color: royalblue;
        }

        .right {
            float: right;
            width: 540px;
            height: 300px;
            background-color: peachpuff;
        }

        .bottom {
            height: 100px;
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

3、单伪元素

原理同额外标签法，但是是通过CSS添加伪元素

<!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 {
            margin: 0 auto;
            width: 800px;
            /* height: 300px; */
            background-color: yellow;
        }

        /* 区别 */
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .left {
            float: left;
            width: 250px;
            height: 300px;
            background-color: royalblue;
        }

        .right {
            float: right;
            width: 540px;
            height: 300px;
            background-color: peachpuff;
        }

        .bottom {
            height: 100px;
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <!-- 区别 -->
    <div class="father clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
            /* 补充写法，为了兼容性 */
            height: 0;
            visibility: hidden;
        }

4、双伪元素

引用.clearfix类既可解决外边距塌陷，还能清除浮动，一劳永逸。

display:table;同时及解决了外边距塌陷问题，因为当父子级都是块级元素时才有可能产生外边距塌陷问题

<!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 {
            margin: 0 auto;
            width: 800px;
            /* height: 300px; */
            background-color: yellow;
        }

        /* 区别 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .left {
            float: left;
            width: 250px;
            height: 300px;
            background-color: royalblue;
        }

        .right {
            float: right;
            width: 540px;
            height: 300px;
            background-color: peachpuff;
        }

        .bottom {
            height: 100px;
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <!-- 区别 -->
    <div class="father clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

5、父元素设置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>
        .father {
            margin: 0 auto;
            width: 800px;
            /* height: 300px; */
            background-color: yellow;
            /* 区别 */
            overflow: hidden;
        }

        .clearfix::after {
            clear: both;
        }

        .left {
            float: left;
            width: 250px;
            height: 300px;
            background-color: royalblue;
        }

        .right {
            float: right;
            width: 540px;
            height: 300px;
            background-color: peachpuff;
        }

        .bottom {
            height: 100px;
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

网页常见布局方式：

标准流：

块级元素独占一行，垂直布局

行内元素/行内块元素一行显示多个，水平布局

浮动：

可以让原本垂直布局的块级元素变成水平布局

定位：

可以让元素自由摆放在网页任意位置

一般用于盒子之间的层叠情况

定位装饰：

属性名：position

属性值：静态定位——static 相对定位——relative

绝对定位——absolute 固定定位——fixed

偏移值属性：left / right / top / bottom（距离左边/右边/上边/下边的距离，四选二，离哪边近设置哪边），属性值可以是数字+px，也可以是百分数

相对定位：position:relative

特点：

1、相对于自己原来的位置进行移动

2、在页面中占位置，没有脱标

3、left、right都有，left生效；top、bottom都有，top生效

应用场景：

1、子绝父相（子元素用绝对定位absolute，父元素用相对定位relative）

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>
        .one {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            /*  相对定位示例 数字+px */
            left: 50px;
            top: 50px;
        }

        .two {
            width: 150px;
            height: 150px;
            background-color: darkkhaki;
        }

        .three {
            width: 200px;
            height: 200px;
            background-color: wheat;
        }
    </style>
</head>

<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

</html>

<!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>
        .one {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            /*  相对定位示例 百分数 */
            position: relative;
            /* 元素左边贴网页中线 */
            left: 50%;
            top: 50px;
        }

        .two {
            width: 150px;
            height: 150px;
            background-color: darkkhaki;
        }

        .three {
            width: 200px;
            height: 200px;
            background-color: wheat;
        }
    </style>
</head>

<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

</html>

绝对定位：position:absolute

特点：

1、相对于非静态定位的父元素进行定位移动（就近查找父级元素）

2、若所有父级元素都没有定位，则相对于浏览器区域进行移动

3、在页面中不占位置，已经脱标

4、改变标签显示模式，具有行内块的特点，在一行共存且宽高生效

应用场景：子绝父相

<!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>
        .fu {
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }

        .zi {
            position: relative;
            left: 20px;
            bottom: 5px;
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .sun {
            position: absolute;
            right: 10px;

            width: 100px;
            height: 100px;
            background-color: darkkhaki;
        }
    </style>
</head>

<body>
    <div class="fu">
        <div class="zi">
            <div class="sun"></div>
        </div>
    </div>
</body>

</html>

<!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>
        .fu {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }

        .zi {
            /* position: relative;
            left: 20px;
            bottom: 5px; */
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .sun {
            position: absolute;
            right: 10px;

            width: 100px;
            height: 100px;
            background-color: darkkhaki;
        }
    </style>
</head>

<body>
    <div class="fu">
        <div class="zi">
            <div class="sun"></div>
        </div>
    </div>
</body>

</html>

定位居中：

<!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>
        .center {
            /* 只能absolute，不能relative，否则top&margin-top不生效 */
            position: absolute;

            left: 50%;
            margin-left: -250px;

            top: 50%;
            margin-top: -150px;

            width: 500px;
            height: 300px;
            background-color: lightslategray;
        }
    </style>
</head>

<body>
    <div class="center"></div>
</body>

</html>

位移居中： transform:translate();（括号里的参数分别为x轴方向和y轴方向的改变量）

效果同上

<!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>
        .center {
            /* 只能absolute，不能relative，否则top&margin-top不生效 */
            position: absolute;
            left: 50%;
            top: 50%;
            /* -50%，负号不能丢 */
            transform: translate(-50%, -50%);
            width: 500px;
            height: 300px;
            background-color: lightslategray;
        }
    </style>
</head>

<body>
    <div class="center"></div>
</body>

</html>

固定定位：position:fixed

特点：

1、相对于浏览器可视区域进行移动

2、在页面中不占位置，已脱标

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 {
            /* 滚动页面时div固定不动 */
            position: fixed;
            left: 30px;
            top: 30px;

            width: 200px;
            height: 200px;
            background-color: gold;
        }
    </style>
</head>

<body>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位
    <div></div>
    固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位
    </p>
</body>

</html>

层级显示：z-index:整数;

特点：

1、默认情况下，定位的盒子，写在后面的盖在写在前面的元素上方

2、整数取值越大显示顺序越靠上方，默认值为0

3、配合定位才能生效

垂直对齐方式：vertical-align，也可以转块级

注意：浏览器在处理行内标签和行内块标签时，默认按文字进行处理，而文字处理存在基线，用于对齐

也就是说，text-align:center可以用于水平居中

属性值：

1、baseline 默认，基线对齐

2、top 顶部对齐

3、middle 中部对齐

4、bottom 底部对齐

光标类型：

属性名:cursor设置光标在元素上时显示的形状

属性值：

1、default 默认值，通常是箭头

2、pointer 小手效果，提示用户可以点击

3、text 工字形，提示用户可以选择文字

4、move 十字光标，提示用户可以移动

圆角边框：

border-radius:数字+px（或者百分数）

<!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: 300px;
            height: 300px;
            /* 正圆（前提是宽高相等），大于50%也是个正圆 */
            border-radius: 50%;
            background-color: aquamarine;
        }
    </style>
</head>

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

</html>

<!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: 300px;
            height: 200px;
            /* 第一个数是从左上角开始，顺时针，缺少就看对角 */
            border-radius: 10px 30px 50px 70px;
            background-color: aquamarine;
        }
    </style>
</head>

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

</html>

溢出显示效果：

属性名：overflow

属性值：

1、visible 默认值，溢出部分可见

2、hidden 溢出部分隐藏

3、scroll 无论溢出与否，都显示侧边和下底的滚动条

4、auto 根据是否溢出，自动显示或者隐藏滚动条

<!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: 600px;
            height: 300px;
            background-color: palegoldenrod;
            /* 下面这行代码可写可不写，效果一样，都是默认溢出效果 */
            overflow: visible;
        }
    </style>
</head>

<body>
    <div class="box">
        我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果
    </div>
</body>

</html>

<!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: 600px;
            height: 300px;
            background-color: palegoldenrod;
            /* 拦腰斩断，直接隐藏 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果
    </div>
</body>

</html>

<!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: 600px;
            height: 300px;
            background-color: palegoldenrod;
            /* 不管有没有溢出都会有两个滚动条 */
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="box">
        我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果
    </div>
</body>

</html>

<!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: 600px;
            height: 300px;
            background-color: palegoldenrod;
            /* 如果没溢出，没有滚动条
            如果有溢出，右侧有滚动条 */
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果我是一个div，用来测试溢出显示效果
    </div>
</body>

</html>

元素本身隐藏：

应用场景：

1、占位隐藏：visibility:hidden;

2、不占位隐藏：display:none;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .one {
            background-color: bisque;
        }

        .two {
            /* 图一啥也不加，图二加visibility:hidden;图三加display:none; */
            /* visibility: hidden; */
            /* display: none; */
            background-color: silver;
        }

        .three {
            background-color: tan;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>

</html>

元素整体透明：

属性opacity调节元素整体的透明度，属性值取0~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>
        div {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            /* 取值0~1  0是完全透明 */
            opacity: 0.7;
        }

        img {
            width: 100px;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/Xiaomi 13 Pro.png" alt="">
        这是文字，看看有没有变透明一点
    </div>
</body>

</html>

咕噜咕噜蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS自学笔记

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。通常写到标签中，并置于中。
复制链接

扫一扫