CSS基础

最新推荐文章于 2022-11-30 21:37:28 发布

冰烬之沫

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量235

点赞数

分类专栏： # css 文章标签： css

本文链接：https://blog.csdn.net/BingJin_mo/article/details/108203705

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 概述

CSS全称Cascading Style Sheets（层叠样式表单），是一种用来表现HTML或XML等文件样式的计算机语言。
CSS主要用于美化网页。
CSS的版本：CSS1.0–>CSS2.0–>CSS2.1–>CSS3.0

2. CSS引入

行内样式：直接编写标签内的style属性来使用CSS
内部样式：直接在html文件的style标签内写css样式
外部样式：通过链接css文件来使用css样式
优先级：行内样式 > 内部样式 > 外部样式
CSS的语法：
选择器 {
声明1;
声明2;
声明3;
…
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入</title>

    <!-- 内部样式：直接在html文件的style标签内写css样式 -->
    <style>

        /*
        css语法：
        选择器 {
            声明1;
            声明2;
            声明3;
            ...
        }
        */
        h1 {
            color: green;
        }

    </style>

    <!-- 外部样式：通过链接css文件来使用css样式 -->
    <link rel="stylesheet" href="css/style.css"/>

</head>
<body>

<!-- 行内样式：直接编写标签内的style属性来使用CSS -->
<h1 style="color: red;">标题</h1>

</body>
</html>

3. CSS选择器

3.1 基本选择器

标签选择器：选择所有为目标标签名的标签
格式：目标标签名 {…}
id选择器：选择标签中id为目标id的标签
格式：#目标id名 {…}

class类选择器：选择标签中class为目标class名的标签
格式：.目标class名 {…}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>

    <style>

        /*标签选择器*/
        p { /*选择所有的p标签*/

        }

        /*id选择器*/
        #only { /*选择标签中id为only的标签*/

        }

        /*class类选择器*/
        .pp { /*选择标签中class为pp的p标签*/

        }

    </style>

</head>
<body>

<p class="pp" id="only">p1</p>
<p class="pp">p2</p>
<p class="pp">p3</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>
        <p class="qq">p4</p>
        <p name="p5">p5</p>
        <p calss="pp p6">p6</p>
    </li>
    <li>l5</li>
</ul>
<a href="http://www.baidu.com">a1</a>
<a href="1.jpg">a2</a>

</body>
</html>

3.2 层次选择器

后代选择器：选择列出的最后一个标签类型同级及其子级的所有的该类型标签
格式：标签1 标签2 … 标签n {…}
子类选择器：选择列出的最后一个标签类型同级的所有该类型标签
格式：标签1>标签2>…>标签n {…}
相邻兄弟选择器：选择目标标签之后的下一个同级目标类型标签
格式：目标标签 + 目标类型标签 {…}

通用选择器：选择目标标签之后的所有同级目标类型标签
格式：目标标签 ~ 目标类型标签 {…}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>

    <style>
        
        /******层次选择器******/

        /*后代选择器*/
        body p { /*选择body之后所有的p标签，即p1~p6*/

        }

        /*子类选择器*/
        body>p { /*选择body之后一级的所有p标签（不包括li下的），即p1~p3*/

        }

        /*相邻兄弟选择器*/
        .qq + p { /*选择class为qq的标签之后的下一个同级p标签，即p5*/

        }

        /*通用选择器*/
        .qq~p { /*选择class为qq的标签之后的所有同级p标签，即p5、p6*/

        }

    </style>

</head>
<body>

<p class="pp" id="only">p1</p>
<p class="pp">p2</p>
<p class="pp">p3</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>
        <p class="qq">p4</p>
        <p name="p5">p5</p>
        <p calss="pp p6">p6</p>
    </li>
    <li>l5</li>
</ul>
<a href="http://www.baidu.com">a1</a>
<a href="1.jpg">a2</a>

</body>
</html>

3.3 结构伪类选择器

:first-child：选择目标标签的子目标类型的第一个标签
格式：目标标签子目标类型:first-child {…}
:last-child：选择目标标签的子目标类型的最后一个标签
格式：目标标签子目标类型:last-child {…}
:nth-child(n)：择目标标签的父级标签下的第n个标签，且该标签要为目标标签的类型才生效
格式：目标标签:nth-child(n) {…}

:nth-of-type(n)：选择目标标签的父级标签下的第n个目标标签的类型的标签
格式：目标标签:nth-of-type(n) {…}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>

    <style>

        /******结构伪类选择器******/

        ul li:first-child { /*选择ul下的第一个li标签，即l1*/

        }

        ul li:last-child { /*选择ul下的最后一个li标签，即l5*/

        }

        p:nth-child(1) { /*选择p的父级标签下的第1个标签，且标签要为p才生效，即p1*/

        }

        p:nth-of-type(2) { /*选择p的父级标签下的第2个p标签，即p2*/

        }

    </style>

</head>
<body>

<p class="pp" id="only">p1</p>
<p class="pp">p2</p>
<p class="pp">p3</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>
        <p class="qq">p4</p>
        <p name="p5">p5</p>
        <p calss="pp p6">p6</p>
    </li>
    <li>l5</li>
</ul>
<a href="http://www.baidu.com">a1</a>
<a href="1.jpg">a2</a>

</body>
</html>

3.4 属性选择器

属性选择器：选择目标类型标签且标签内的目标属性的值为目标值的标签
格式：目标类型标签[目标属性=“目标值”] {…}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style>

        /******属性选择器******/

        p[name="p5"] { /*选择p标签的name属性值为p5的p标签，即p5*/

        }

        p[class*="p6"] { /*选择p标签的class属性值包含p6的p标签，即p6*/

        }

        a[href^="http"] { /*选择a标签的href属性值开头为‘http’的a标签，即a1*/

        }

        a[href$="jpg"] { /*选择a标签的href属性值结尾为‘jpg’的a标签，即a2*/

        }

    </style>

</head>
<body>

<p class="pp" id="only">p1</p>
<p class="pp">p2</p>
<p class="pp">p3</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>
        <p class="qq">p4</p>
        <p name="p5">p5</p>
        <p calss="pp p6">p6</p>
    </li>
    <li>l5</li>
</ul>
<a href="http://www.baidu.com">a1</a>
<a href="1.jpg">a2</a>

</body>
</html>

4. 网页样式

字体样式

font-family：字体风格
font-size：字体大小
font-weight：字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>

    <style>
        /*字体样式
        font-family：字体风格
        font-size：字体大小
        font-weight：字体粗细
        */
        p {
            font-family: 楷体;
            font-size: 14px;
            font-weight: bold;
        }

    </style>

</head>
<body>

<p>这是一段文字</p>

</body>
</html>

文本样式
- color：文本颜色
- text-align：文本对齐方式（left左对齐 center居中 right右对齐）
- text-indent：段落首行缩进
- background：背景（颜色或图片）
- height：高度
- line-height：文本高度（设置line-height的值与height的值一样为水平居中）
- text-decoration：文本装饰（underline下划线 line-through中划线 overline上划线 none无）
- text-shadow：阴影颜色,水平偏移,垂直偏移,阴影半径

超链接伪类：

a:hover：鼠标悬停生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>

    <style>

        /*文本样式
        color：文本颜色
        text-align：文本对齐方式（左对齐 居中 右对齐）
        text-indent：段落首行缩进
        background：背景（颜色或图片）
        height：高度
        line-height：文本高度（设置line-height的值与height的值一样为水平居中）
        text-decoration：文本装饰（underline下划线 line-through中划线 overline上划线 none无）
        */
        p {
            color: red; /*或#FF0000或rgb(255,0,0)*/
            /*带透明度：color: #FF000088; 或rgba(255,0,0,0.5)*/
            text-align: center;
            text-indent: 2em; /*2em为两个字的距离*/
            background: aliceblue; /*颜色*/
            /*图片背景：background: url(图片路径);*/
            height: 300px;
            line-height: 300px;
            text-decoration: underline;
        }

        /*
        vertical-align: middle;实现img和span中的文本水平对齐
        */
        img,span {
            vertical-align: middle;
        }

        a {
            color: red;
            font-size: 14px;
        }
        /*
        超链接伪类
        */
        a:hover { /*鼠标悬停生效*/
            color: blue;
            font-size: 20px;
        }

        /*阴影
        text-shadow：阴影颜色,水平偏移,垂直偏移,阴影半径
        */
        .tt {
            text-shadow: #098977 10px -10px 2px;
        }

    </style>


</head>
<body>


<p>
    <img src="images/baidu.png" alt="百度">
    <span>这是一段文字</span>
</p>
<a href="http://www.baidu.com">百度</a>
<p class="tt">阴影</p>

</body>
</html>

背景样式

图片背景样式
- background-image背景图片
  - url(图片路径)
- background-repeat背景图片填充样式
  - repeat：平铺（默认）
  - no-repeat：不平铺
  - repeat-x：横向平铺
  - repeat-y：纵向平铺
- background-position背景图片位置
  - 第一个值：以父级左边缘为基准，水平右移多少
  - 第二个值：以父级上边缘为基准，垂直下移多少
渐变背景样式
- background背景
  - linear-gradient
    - 第一个值：渐变角度
    - 第二个值：开始颜色
    - 第三个值：结束颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>

    <style>

        /********图片背景样式********/

        /*background-image
        url()：图片路径
        */
        /*background-repeat背景图片填充样式
        repeat：平铺（默认）
        no-repeat：不平铺
        repeat-x：横向平铺
        repeat-y：纵向平铺
        */
        /*background-position背景图片位置
        第一个值：以父级左边缘为基准，水平右移多少
        第二个值：以父级上边缘为基准，垂直下移多少
        */
        .div1 {
            width: 540px;
            height: 500px;
            border: 1px solid blue;
            background-repeat: no-repeat;
            background-image: url("images/baidu.png");
            background-position: 0px 60px;
        }

        /********渐变背景样式********/

        /*background
        linear-gradient：
            第一个值：渐变角度
            第二个值：开始颜色
            第三个值：结束颜色
        */
        .div2 {
            width: 540px;
            height: 500px;
            border: 1px solid black;
            background: linear-gradient(19deg, rgba(33, 253, 95, 0.99), #21e5ff);
        }

    </style>

</head>
<body>

<div class="div1"></div>
<div class="div2"></div>

</body>
</html>

列表样式

list-style
- none：去掉圆点
- circle：空心圆
- decimal：数字
- square：正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>

    <style>

        /*list-style
        none：去掉圆点
        circle：空心圆
        decimal：数字
        square：正方形
        */
        ul li {
            height: 30px;
            list-style: none;
        }

    </style>

</head>
<body>

<div>
    <h4>商品</h4>
    <ul>
        <li>图书</li>
        <li>电子设备</li>
        <li>美食</li>
    </ul>
</div>


</body>
</html>

5. 盒子模型

在HTML中，所有的元素都可以看作一个盒子，而CSS盒子模型就是就是用把元素看作”盒子“来操作

CSS盒子模型有四个部分：

margin(外边距)：盒子边框与父级内边缘的距离
padding(内边距)：边框与盒子内部内容之间的距离
border(边框)：盒子的边框，处于外边距和内边距之间
content(内容)：盒子的内容，显示文本和图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>

    <style>

        /*padding
        内边距：边框与盒子内部内容之间的距离
        */
        .d1 {
            width: 500px;
            height: 300px;
            margin: 0 auto; /*margin: 0 auto;可以将盒子居中*/
            padding: 30px;
            border: 2px solid red;
            background: #ece448;
        }

        /*border
        边框：盒子的边框
        第一个值：边框的粗细
        第二个值：边框的样式（solid实线与dashed虚线）
        第三个值：边框的颜色
        */
        .d2 {
            width: 496px;
            height: 296px;
            margin: 0;
            padding: 0;
            border: 2px solid blue;
            background: #6df684;
        }

        /*margin
        外边距：盒子边框与父级内边缘的距离
        */
        .d3 {
            width: 450px;
            height: 250px;
            margin: 21px;
            padding: 0;
            border: 2px solid #427ef8;
            background: #ec3ef3;
        }

    </style>

</head>
<body>

<div class="d1">
    <div class="d2">
        <div class="d3"></div>
    </div>
</div>

</body>
</html>

盒子阴影：box-shadow

第一个值：阴影横向偏移量
第二个值：阴影纵向偏移量
第三个值：阴影模糊半径
第四个值：阴影颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>

    <style>

        /*box-shadow盒子阴影
        第一个值：阴影横向偏移量
        第二个值：阴影纵向偏移量
        第三个值：阴影模糊半径
        第四个值：阴影颜色
        */
        div {
            width: 200px;
            height: 200px;
            border: 10px solid blue;
            box-shadow: 10px 10px 100px #55f3e6;
        }

    </style>

</head>
<body>

<div></div>

</body>
</html>

圆角边框：border-radius

第一个值：左上角的弯曲半径
第二个值：右上角的弯曲半径
第三个值：右下角的弯曲半径
第四个值：左下角的弯曲半径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>

    <style>

        /*border-radius圆角边框
        第一个值：左上角的弯曲半径
        第二个值：右上角的弯曲半径
        第三个值：右下角的弯曲半径
        第四个值：左下角的弯曲半径
        */
        div {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background: #427ef8;
            border-radius: 250px 250px 250px 250px;
        }

    </style>

</head>
<body>

<div></div>

</body>
</html>

6. 浮动

6.1 浮动

浮动可以让元素”浮“起来，
浮动的元素不在标准文档流(HTML默认的排版)中
浮动的元素可以向左或向右移动，直到它的外边缘碰到父级元素边缘或另一个浮动元素的边框为止
文字会环绕在浮动的元素周围
浮动的声明：float
- left：向左浮动
- right：向右浮动

浮动的清除属性：clear

left：左边不允许有浮动元素
right：右边不允许有浮动元素
both：左右都不允许有浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动父级边框塌陷处理1</title>

    <style>

        /*直接设置父级边框高度*/

        .box {
            border: 2px solid blue;
            height: 850px;
        }

        .d1 {
            float: left;
            border: 2px dashed #d9e756;
        }

        .d2 {
            float: right;
            border: 2px dashed #bf5375;
        }

        .d3 {
            float: left;
            color: red;
            border: 2px dashed #56e75d;
            clear: both;
        }

    </style>

</head>
<body>

<div class="box">
    <div class="d1"><img src="images/1.jpg" alt="1"></div>
    <div class="d2"><img src="images/2.jpg" alt="2"></div>
    <div class="d3">这是一个div</div>
    这是一段文字
</div>

</body>
</html>

6.2 display属性

display

inline：行内元素
block：块元素
inline-block：既是行元素，又是块元素
none：隐藏，包括元素占位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>

    <style>

        /*display
        inline：行内元素
        block：块元素
        inline-block：既是行元素，又是块元素
        none：隐藏，包括元素占位
        */

        .d1 {
            width: 100px;
            height: 100px;
            border: 2px solid blue;
            display: inline;
        }

        .d2 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            display: inline;
        }

        .d3 {
            display: none;
        }

        .s1 {
            display: block;
        }

        .s2 {
            display: block;
        }

    </style>

</head>
<body>

<div class="d1">div1</div>
<div class="d2">div2</div>
<div class="d3">div3</div>

<span class="s1">span1</span>
<span class="s2">span2</span>

</body>
</html>

6.3 浮动父级边框塌陷处理

浮动父级边框塌陷处理1：直接设置父级边框高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动父级边框塌陷处理1</title>

    <style>

        /*直接设置父级边框高度*/

        .box {
            border: 2px solid blue;
            height: 850px;
        }

        .d1 {
            float: left;
            border: 2px dashed #d9e756;
        }

        .d2 {
            float: right;
            border: 2px dashed #bf5375;
        }

        .d3 {
            float: left;
            color: red;
            border: 2px dashed #56e75d;
            clear: both;
        }

    </style>

</head>
<body>

<div class="box">
    <div class="d1"><img src="images/1.jpg" alt="1"></div>
    <div class="d2"><img src="images/2.jpg" alt="2"></div>
    <div class="d3">这是一个div</div>
    这是一段文字
</div>

</body>
</html>

浮动父级边框塌陷处理2：设置空的div元素在父级最下面，并设置clear: both;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动父级边框塌陷处理2</title>

    <style>

        /*设置空的div元素在父级最下面，并设置clear: both;*/

        .box {
            border: 2px solid blue;
        }

        .d1 {
            float: left;
            border: 2px dashed #d9e756;
        }

        .d2 {
            float: right;
            border: 2px dashed #bf5375;
        }

        .d3 {
            float: left;
            color: red;
            border: 2px dashed #56e75d;
            clear: both;
        }

        .d4 {
            clear: both;
        }

    </style>

</head>
<body>

<div class="box">
    <div class="d1"><img src="images/1.jpg" alt="1"></div>
    <div class="d2"><img src="images/2.jpg" alt="2"></div>
    <div class="d3">这是一个div</div>
    这是一段文字
    <div class="d4"></div>  <!--设置空的div-->
</div>

</body>
</html>

浮动父级边框塌陷处理3：设置父级元素自动溢出overflow: hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动父级边框塌陷处理3</title>

    <style>

        /*设置父级元素自动溢出overflow: hidden;*/

        .box {
            border: 2px solid blue;
            overflow: hidden;
        }

        .d1 {
            float: left;
            border: 2px dashed #d9e756;
        }

        .d2 {
            float: right;
            border: 2px dashed #bf5375;
        }

        .d3 {
            float: left;
            color: red;
            border: 2px dashed #56e75d;
            clear: both;
        }

    </style>

</head>
<body>

<div class="box">
    <div class="d1"><img src="images/1.jpg" alt="1"></div>
    <div class="d2"><img src="images/2.jpg" alt="2"></div>
    <div class="d3">这是一个div</div>
    这是一段文字
</div>

</body>
</html>

浮动父级边框塌陷处理4：增加一个父级伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动父级边框塌陷处理4</title>

    <style>

        /*增加一个父级伪类*/
        .box:after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
            border: 2px solid blue;
            height: 850px;
        }

        .d1 {
            float: left;
            border: 2px dashed #d9e756;
        }

        .d2 {
            float: right;
            border: 2px dashed #bf5375;
        }

        .d3 {
            float: left;
            color: red;
            border: 2px dashed #56e75d;
            clear: both;
        }

    </style>

</head>
<body>

<div class="box">
    <div class="d1"><img src="images/1.jpg" alt="1"></div>
    <div class="d2"><img src="images/2.jpg" alt="2"></div>
    <div class="d3">这是一个div</div>
    这是一段文字
</div>

</body>
</html>

7. 定位

7.1 相对定位

position: relative;相对定位：相对元素本身原来的位置进行定位
top：与原位置的上边缘的距离
bottom：与原位置的下边缘的距离
left：与原位置的左边缘的距离

right：与原位置的右边缘的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>

    <style>

        .box {
            width: 200px;
            height: 200px;
            margin: 0;
            padding: 0;
            border: 2px solid blue;
        }

        .d1 {
            width: 50px;
            height: 50px;
            border: 2px dashed red;

        }

        .d2 {
            width: 50px;
            height: 50px;
            border: 2px dashed green;
            position: relative; /*relative相对定位*/
            top: 54px;  /*距离原位置的上边缘为54px*/
            left: 54px; /*距离原位置的左边缘为54px*/
        }

        .d3 {
            width: 50px;
            height: 50px;
            border: 2px dashed orange;
            position: relative; /*relative相对定位*/
            bottom: 54px;  /*距离原位置的下边缘为54px*/
            right: -54px; /*距离原位置的右边缘为-54px*/
        }

    </style>

</head>
<body>

<div class="box">
    <div class="d1">div1</div>
    <div class="d2">div2</div>
    <div class="d3">div3</div>
</div>

</body>
</html>

7.2 绝对定位

position: absolute;绝对定位：相对浏览器的位置进行定位
top：与浏览器的上边缘的距离
bottom：与浏览器的下边缘的距离
left：与浏览器的左边缘的距离

right：与浏览器的右边缘的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>

    <style>

        .box {
            width: 200px;
            height: 200px;
            margin: 0;
            padding: 0;
            border: 2px solid blue;
        }

        .d1 {
            width: 50px;
            height: 50px;
            border: 2px dashed red;

        }

        .d2 {
            width: 50px;
            height: 50px;
            border: 2px dashed green;
            position: absolute; /*absolute绝对定位*/
            top: 100px; /*距离浏览器的上边缘为100px*/
            left: 10px; /*距离浏览器的左边缘为10px*/
        }

        .d3 {
            width: 50px;
            height: 50px;
            border: 2px dashed orange;
            position: absolute; /*absolute相对定位*/
            bottom: 200px;  /*距离浏览器的下边缘为200px*/
            right: 200px; /*距离原浏览器的右边缘为200px*/
        }

    </style>

</head>
<body>

<div class="box">
    <div class="d1">div1</div>
    <div class="d2">div2</div>
    <div class="d3">div3</div>
</div>

</body>
</html>

7.3 固定定位

position: fixed;固定定位：相对浏览器的位置进行定位并不随浏览器页面的滑动而移动
top：与浏览器的上边缘的距离
bottom：与浏览器的下边缘的距离
left：与浏览器的左边缘的距离

right：与浏览器的右边缘的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>

    <style>

        .d1 {
            width: 200px;
            height: 1000px;
            border: 2px solid blue;
            position: absolute;
            top:200px;
            left: 500px;
        }

        .up {
            width: 50px;
            height: 50px;
            text-align: center;
            background: #55f3e6;
            position: fixed;    /*fixed固定定位*/
            right: 10px;    /*距离浏览器的右边缘为10px*/
            bottom: 10px;   /*距离浏览器的下边缘为10px*/
        }

        a[href="#top"] {
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            font-size: 10px;
            color: red;
        }

    </style>

</head>
<body>

<a name="top">顶部</a>
<div class="d1"></div>
<div class="up">
    <a href="#top">返回顶部</a>
</div>

</body>
</html>

7.4 z-index

z-index为图的层级。当两个图层重合时，层级越高的显示得越在前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>

    <style>

        .d1 {
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
            top: 100px;
            left: 50px;
            z-index: 999;   /*z-index为图的层级，层级越高，显示得越在前面*/
        }

        .d2 {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 75px;
            left: 25px;
            /*opacity: 0.5;*/ /*可以使用opacity透明显示div1*/
        }

    </style>

</head>
<body>

<div class="d1">div1</div>
<div class="d2">div2</div>

</body>
</html>

冰烬之沫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

1. 概述CSS全称Cascading Style Sheets（层叠样式表单），是一种用来表现HTML或XML等文件样式的计算机语言。CSS主要用于美化网页。CSS的版本：CSS1.0–>CSS2.0–>CSS2.1–>CSS3.0  2. CSS引入行内样式：直接编写标签内的style属性来使用CSS内部样式：直接在html文件的style标签内写css样式外部样式：通过链接css文件来使用css样式优先级：行内样式 &gt
复制链接

扫一扫