CSS学习

CSS(Cascading Style Sheet,层叠样式表,级联样式表,简称样式表),以HTML为基础,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式),图片的设置(宽高、边框样式、边距),以及页面的布局和显示样式。

CSS实现了内容(HTML元素)与表现(CSS样式)的分离;实现了代码的可重用性和可维护性。

CSS与HTML之间的关系:

  • HTML:专门用于搭建网页、构建内容。
  • CSS,专门用于定义页面元素的样式。
  • 使用原则:CSS样式属性与HTML属性相冲突时,w3c建议以CSS为准!

引入方式

通常css样式引入有三种方式。

head中使用style标签进行引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        选择器{
            css属性名称:属性值;
            css属性名称:属性值;
            }
        */
        div{
            font-size: 18px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div>张开,你好</div>
</body>
</html>

行内引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 18px;
            background-color: pink;
        }
    </style>
</head>
<body>
<!-- 行内引入,也叫内联样式,直接将样式写在标签上,优先级高 -->
<div style="background-color: aquamarine;height: 200px;">张开,你好</div>
</body>
</html>

行内标签的优先级更高。

link:外部文件引入

外部文件引入的方式使用的非常多,因为调整样式的代码太多了,都写在一个页面中,显得很臃肿,所以,通常使用外部建立一个以.css结尾的样式文件统一管理。

外部index.css

div{
    font-size: 30px;
    background-color: red;
}

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- <link rel="stylesheet" href="./index.css"> -->
    <style>
        /*
        选择器{ 
            css属性名称:属性值;
            css属性名称:属性值;
            }
        */
        div{
            font-size: 18px;
            /*background-color: pink;*/
        }
    </style>
    <!-- 在head标签中使用link标签引入外部css样式文件 -->
    <!-- 如果style和link同时使用时,同属性的值以下面的为准 -->
    <!-- 在当前示例中,link引入的外部样式会覆盖到上面的(style),反之亦然 -->
    <!-- 但它们的优先级都没有行内样式高 -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div style="background-color: aquamarine;height: 200px;">张开,你好</div>
</body>
</html>

CSS选择器

选择器可以说是CSS中的重中之重了,为了在复杂的HTML标签结构中,精准、便捷的加上样式,选择器就有很多种。

基本选择器

元素选择器

元素选择器也叫做标签选择器,它直接作用于body标签中的所有指定的标签,如下面的示例中,元素选择器将作用于所有的div标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 18px;

        }
    </style>

</head>
<body>
<div>张开,你好</div>
<div>李开,你好</div>
<div>赵开,你好</div>
</body>
</html>

id选择器

id选择器作用于body标签中,具有id属性的标签,注意,在整个html中,必须保证id值的唯一性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 18px;
        }
        /* id选择器,通常使用#号跟id值来加样式,如下 */
        #d1{
            background-color: pink;
        }
        #d2{
            background-color: aquamarine;
        }
    </style>

</head>
<body>
<div id="d1">张开,你好</div>
<div id="d2">李开,你好</div>
<div id="d3">赵开,你好</div>
</body>
</html>

类选择器

类(class)选择器,用于body标签中,具有class属性的标签,注意,class值可以重复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 为所有class属性为 c1 的标签添加指定样式 */
        .c1{
            font-size: 18px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="d1" class="c1">张开,你好</div>
<div id="d2">李开,你好</div>
<div id="d3" class="c1 w1 z1">赵开,你好</div>
</body>
</html>

注意,class属性值可以写多个。

属性选择器

其实id和class也是属性,但由于使用频率高,我们就把它放到了基本选择器中。

而在属性选择器这部分,将主要介绍,如何针对具有自定义属性的标签添加样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 为所有属性为 xx 的标签添加指定样式,注意,此时跟属性对应的值无关 */
        [xx]{
            background-color: pink;
        }
        /* 找到标签属性为 xx 的,且属性值为 oo 的标签,添加指定样式 */
        [xx=oo]{
            background-color: aquamarine;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div id="d1" class="c1" xx="oo">张开,你好</div>
<div id="d2">李开,你好</div>
<div id="d3" class="c1" xx="yy">赵开,你好</div>
</body>
</html>

后代选择器

后代选择器也叫做层级选择器,通常适用于对指定标签内的所有指定的子标签添加样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        后代选择器写法多变,如:
            元素选择器/id选择器/类选择器 元素选择器/id选择器/类选择器
                div a{}
                div span a{}
                div #s1 #a1{}
                #d1 #s1 #a1{}
                .c1 a{}
            上面空格的方式是选择div下所有的子代是指定标签的
            
            下面用>表示的是选择div下直系子代的,所以,也称为子代选择器
                div>span   
        */
        div a{
            font-size: 18px;
        }
    </style>
</head>
<body>
<div id="d1" class="c1" xx="oo">
    <span id="s1">
        <a id="a1" href="javascript:;">百度一下</a>
    </span>
</div>
<div id="d2">
    <span>
        <a href="javascript:;">谷歌一下</a>
    </span>
</div>
<a href="javascript:;">搜狗一下</a>
</body>
</html>

组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 通用选择器* 也叫做通配符选择器 */
        ul * {
            /*background-color: pink;*/
        }

        /* 交集选择器. */
        li.box {
            /*background-color: pink;*/
        }

        /* 并集选择器, 也叫做多元素选择器 */
        ul>span, .box{
            /*background-color: pink;*/
        }

        /* 后代选择器空格,所有后代 */
        ul li{
            /*background-color: pink;*/
        }
        /* 子代选择器> 直系后代 */
        ul>span{
            /*background-color: pink;*/
        }

        /* 毗邻选择器+ */
        .box + li {
            /*background-color: coral;*/
        }

        /* 兄弟选择器~ */
        /* 所有兄弟 ~*  也可以省略*号 */
        .box ~ * {
            /*background-color: red;*/
        }

        /* 截至到某个兄弟 ~元素 */
        .box ~ li {
            /*background-color: red;*/
        }
    </style>
</head>
<body>
<ul>
    <li>AAAAA</li>
    <li class="box">CCCCC</li>
    <li title="hello"><span>BBBBB</span></li>
    <li title="hello"><span>DDDD</span></li>
    <span>EEEEE</span>
</ul>
</body>
</html>

特殊的a标签

一般的,我们给一个标签如div加上字体相关的样式的话,其内的子标签的字体也会应用上(继承),但a标签不会,如上面的实例中,div下的span标签内的字体颜色跟着改变,但div中,span中的a标签内的字体颜色却没有改变。

想要a标签的字体颜色也跟着该改变,就要指定到具体的a标签上才可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1,#d1 a,#d3,#d3 a{
            font-size: 18px;
            background-color: pink;
            color: yellow;
        }
    </style>
</head>
<body>
<div id="d1" class="c1" xx="oo">
    <span id="s1">
        <a id="a1" href="javascript:;">百度一下</a>
    </span>
    <span>Baidu</span>
</div>
<div id="d2">
    <span>
        <a href="javascript:;">谷歌一下</a>
    </span>
    <span>Google</span>
</div>
<div id="d3">
    <span>
        <a href="javascript:;">搜狗一下</a>
    </span>
    <span>Sougou</span>
</div>
</body>
</html>

伪元素选择器

https://www.w3school.com.cn/css/css_pseudo_elements.asp

CSS 伪元素用于设置元素指定部分的样式。

例如,它可用于:

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: aquamarine;
        }
        /* 其中color和font-size都是用来为content值添加样式的 */
        div:after{
            content: " !!!";
            color: red;
            font-size: 18px;
        }
        div:before{
            content: "O-O ";
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div>张开,你好</div>
</body>
</html>

伪类选择器

https://www.w3school.com.cn/css/css_pseudo_classes.asp

伪类用于定义元素的特殊状态。

例如,它可以用于:

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: aquamarine;
        }
        /* 你也可以直接使用 div:hover */
        .c1:hover{
            background-color: yellow;
            cursor: pointer;
            /* 更多cursor属性值,参考:https://www.w3school.com.cn/cssref/pr_class_cursor.asp*/
        }
        
        a{
            text-decoration: none;  /* 清除a标签默认的下划线 */
        }
        /* 链接为被点击时,设置的效果 */
        a:link{
            color: aquamarine;
        }
        /* 鼠标悬浮到连接上时,设置的效果 */
        a:hover{
            color: blue;
        }
        /* 鼠标左键点击链接但未松开时,设置的效果 */
        a:active{
            color: red;
        }
        /* 鼠标左键点击链接后,设置的效果 */
        a:visited{
            color: black;
        }
    </style>
</head>
<body>
<div class="c1">张开,你好</div>
<a href="https://www.baidu.com">点我</a>
</body>
</html>

选择器的优先级

首先,在CSS属性中,有继承的概念,比如子标签会继承父级标签的样式、字体设置。

上面在选择器部分,使用了相关的样式来演示效果,这里在介绍一些常用的样式。

但如果多种选择器同时作用于某个标签,那么到底哪个选择器的样式生效呢?这就要根据权重值来说,权重值是0~1000的数字,不同的选择器的权重值不同,所以,根据权重值来决定谁生效。

一般的:

  • 子标签继承父级标签的样式,那么子标签的样式权重值为0。
  • 元素选择器,权重值为1。
  • 类选择器权重值为10,注意,多个类值中的各个值的权重是一样的,比如class="a1 a2 a3",它们的权重值都是10,谁生效就要看谁在下面了,因为下面的覆盖掉上面的。
  • id选择器的权重值为100。
  • 内联样式,即直接在标签上的style样式,它的权重值是1000。
  • 最后,我就想让某个选择器样式生效,那么就可以用!important属性来忽略权重,直接让标签应用上该属性。但一般不推荐使用,太无敌了!!!不方便后期调试。

注意,当权重值起作用时,无论什么选择器在上在下了,不会出现覆盖问题;只有权重值一样的时候,才会出现覆盖的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
        .s1{
            color: purple!important;
        }
        #ss{
            color: aquamarine;
        }
    </style>
</head>
<body>
<div class="c1">
    我是div中的直属内容
    <div class="c2">
        <span class="s1 s2 s3" id="ss" style="color: black">我是div中最内部的span标签的内容</span>
    </div>
</div>
</body>
</html>

CSS样式

width/height

宽高就不用再详细解释了,为块级标签指定高和宽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 可以按照像素、百分比设置宽高 */
        #d1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #d1 div{
            width: 80%;
            height: 80%;
            background-color: red;
        }
        #s1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            font-size: 12px;
        }
        #s2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="d1">
    <div></div>
</div>
<span id="s1">李开,你好</span>
<span id="s2">王开,你好</span>
</body>
</html>

由上例再次确认,内联标签无法设置宽高,它的宽高有标签内容决定。

字体

关于字体的设置,也无非就是设置字体大小、粗细、颜色这些设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 可以按照像素、百分比设置宽高 */
        div{
            font-size: 20px;
            color: green;  /* 字体颜色 */
            font-family: "楷体";
            /*font-family: "楷体", "宋体";*/  /* 字体样式可以设置多个,如果最左侧的字体样式浏览器不支持,就往后看一位 */
            font-weight: 400;  /* 字体粗细用数字表示,范围100~900,默认400 */
            width: 800px;
            height: 600px;
            background-color: aquamarine;
            /*
            x轴水平方向,默认的,字体在标签中据左上,可以通过text-align属性来决定所在x轴的位置:
                text-align: right;  水平方向居右
                text-align: center; 水平方向居中
                text-align: left;   水平方向居左
            */
            /*text-align: right;*/

            /*
            y轴,默认的,字体在标签中据左上
            通过将line-height属性值设置为和标签高度一致时,字体垂直居中。
            通过和text-align: center;结合可以使字体水平和垂直方向居中
            */
            line-height: 600px;
        }
    </style>
</head>
<body>
默认字体大小是16px
<div id="d1">张开,你好</div>
</body>
</html>

背景

基本的背景颜色

为指定标签设置背景颜色:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 可以按照像素、百分比设置宽高 */
        div{
            width: 200px;
            height: 200px;
            /* 有三种方式设置背景颜色 */
            /* 直接写颜色对用的英文 */
            /*background-color: green; */
            /* 以16色(16进制)的形式写 */
            /*background-color: #ffb7a7; */
            /* 以rgb的形式写,也可以通过opacity来指定标签的透明度,这个透明度影响该标签内容,包括字体、背景图片等 */
            background-color: rgb(255, 183, 167);
            opacity: 0.3;  /* 0~1之间的数字 */
            /* 上面两个属性可以使用rgba来简写 */
            /*background-color: rgba(255, 183, 167, 0.3);*/
        }
    </style>
</head>
<body>
<div id="d1"></div>
</body>
</html>

更多颜色可以参考颜色对照表:RGB颜色参考

背景图片

除了可以指定标签的背景颜色之外,也可以用图片来作为背景:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 可以按照像素、百分比设置宽高 */
        div{
            width: 600px;
            height: 600px;
            /*background-color: aquamarine;*/
            /*background-image: url("./a.png"); !* 可以找一张200px * 200px的图片结合600px * 600px的宽高来看效果 *!*/
            /*
            默认的,如果图片小于实际指定宽高会重复填充,也可以设置background-repeat来限制,它有三种展示形式
                background-repeat: no-repeat;  默认不填充,在左上角。
                background-repeat: repeat-x;  以x轴排列。
                background-repeat: repeat-y;  以y轴排列。
            */
            /*background-repeat: repeat-y;*/
            /*
            在不重复的情况下,可以使用background-position属性来决定图片位于当前标签的哪个位置,这个时候,你可以
            将当前标签"分割成九宫格",然后background-position决定图片在九宫格内的位置,具体设置参考下面的示例。
            九宫格参考下面的图片九宫格图片
            */
            /*background-repeat: no-repeat;*/
            /*background-position: center center;*/
             /* 除了上面的写法之外,background-position还支持数字,比如说距左和居上多少像素 */
            /*background-repeat: no-repeat;*/
            /*background-position: 20px 40px;*/

            /* 上面一个个单独设置的属性,可以使用background来统一设置 */
            background: aquamarine url("./a.png") no-repeat center center;
        }
    </style>
</head>
<body>
<div id="d1"></div>
</body>
</html>

边框

边框也就是为标签指定四边或者任意边线添加边框和样式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            text-align: center;
            line-height: 500px;
            /* 四边框,边框宽度5px solid:实线 边框颜色是red */
            /*border: 5px solid red;*/

            /*
            单独设置某个边框
                border-left: 5px solid red;
                border-top: 5px solid red;
                border-right: 5px solid red;
                border-bottom: 5px solid red;

            也可以这样设置
                border-width: 4px;
                border-color: red;
                border-style: solid;
                    solid是实线边框,其它样式参考:
                    https://www.w3school.com.cn/cssref/pr_border-style.asp
            */
        }
    </style>
</head>
<body>
<div id="d1">张开,你好</div>
</body>
</html>

盒子模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
        #d1{
            border: 5px solid aquamarine;
            /*
            padding和margin都有两种写法,这里以padding为例:
                这里介绍两种写法
                    padding: 10px 10px;   上下 左右
                    padding: 10px 10px 10px 10px; 上 右 下 左
                也可以单独设置某个方向
                    padding-left: 10px;
                    padding-right: 10px;
                    padding-top: 10px;
                    padding-bottom: 10px;
            */
            padding: 10px 10px;
            margin: 10px 10px;
        }
        #d2{
            border: 5px solid deeppink;
            padding: 10px 10px;
            margin: 10px 10px;
        }
    </style>
</head>
<body>
<div id="d1">张开,你好</div>
<div id="d2">李开,你好</div>
</body>
</html>

body的默认margin

细心的你可能注意到了,我们实例中的标签,都距离浏览器的边边还有一些距离,这就是body的默认margin在搞鬼,所以,一般的,我们都会把这个默认的margin给取消掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        div{
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="d1">张开,你好</div>
</body>
</html>

display

https://www.w3school.com.cn/cssref/pr_class_display.asp

display 属性规定元素应该生成的框的类型。它能:

  • 将内联标签转为块级标签display: block;
  • 将块级标签转为内联标签display: inline;
  • 将内联标签转为行内块元素,即不独占一行,也能设置宽高,display: inline-block;
  • 隐藏标签display: none;,注意,标签还在,只是页面中看不见了而已。同时你也可以直接为标签添加一个hidden属性隐藏标签。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #d1{
            background-color: aquamarine;
        }
        #d2{
            background-color: deeppink;
            display: none;
        }
        #s1{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="d1" hidden>张开,你好</div>
<div id="d2">赵开,你好</div>
<span id="s1">李开,你好</span>
</body>
</html>

浮动

浮动主要用于页面布局用。比如说,可以让两个div能同时在一行上。

浮动的元素不独占一行,且可以设置宽高。

另外,浮动的元素,已经脱离里文档流,即在父级标签,飘起来了,当然只能左右飘。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        div div{
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #d1{
            background-color: aquamarine;
            float: left;
        }
        #d2{
            background-color: deeppink;
            float: right;
        }
        #s1{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>
    <div id="d1">张开,你好</div>
    <div id="d2">赵开,你好</div>
</div>
<span id="s1">李开,你好</span>
</body>
</html>

注意:浮动会造成父级标签塌陷问题,即父级标签没有高度了,然后下面的标签就会往上"挤",如何解决呢?

方式1,为父级标签设置高度,高度可以跟其内漂浮的标签最大的高度一致。不推荐,因为其内的标签高度可能是动态的。

方式2,清除浮动,当父级标签没有高度后,下面的标签会往上"挤",然后浮动的标签就叠加在上"挤"的标签上。那清楚浮动是什么意思呢,就是为上"挤"的标签,设置属性,不允许我头上有浮动的标签存在。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        div div{
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #d1{
            background-color: aquamarine;
            /*float: left;*/
        }
        #d2{
            background-color: deeppink;
            float: right;
        }
        #d3{
            width: 100%;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: yellow;
            /*
            不允许我哪个部位不允许有浮动元素
                clear: bottom;
                clear: top;
                clear: left;
                clear: right;
                clear: both;   整个标签上都不允许叠加浮动元素
            */
            clear: bottom;
        }
        #s1{
            background-color: green;
        }
    </style>
</head>
<body>
<div>
    <div id="d1">张开,你好</div>
    <div id="d2">赵开,你好</div>
</div>
<div id="d3">王开,你好</div>
<span id="s1">李开,你好</span>
</body>
</html>

方式3,利用伪元素选择器来清除浮动,用得较多。原理就是为浮动标签的父级标签添加个"空字符串",但这空字符串非常"细",且独占一行,其上也不允许有浮动元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        div div{
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #d1{
            background-color: aquamarine;
            float: left;
        }
        #d2{
            background-color: deeppink;
            float: right;
        }
        #d3{
            width: 100%;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: yellow;
        }
        #s1{
            background-color: green;
        }
        /* 伪元素选择器 */
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div class="clearfix">
    <div id="d1">张开,你好</div>
    <div id="d2">赵开,你好</div>
</div>
<div id="d3">王开,你好</div>
<span id="s1">李开,你好</span>
</body>
</html>

定位

有四种定位:

  • position: static;,静态定位,默认的标签定位方式。
  • position: relative;,相对定位,移动时,按照自己原来的位置进行。
  • position: absolute;,绝对定位,按照父级标签或者祖辈标签(一层层往上找)设置了相对定位的标签位置进行移动,如果这些(父、祖辈)标签都没有设置相对定位,那么就以整个文档的位置进行移动。且当前标签将脱离文档流。
  • position: fixed;,固定定位,按照浏览器窗口的位置进行定位,也是脱离文档流。常见的回到顶部按钮就是使用的固定定位的方式。

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1 div, .c4 {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        .c2{
            background-color: aquamarine;
        }
        .c3{
            background-color: purple;
            /*
            position: relative; 声明该标签为相对定位,相对于原来的位置进行定位
                left: 100px;    以左边为起点,水平向右移动100px
                right: 100px;   以右边为起点,水平向左移动100px
                top: 100px;     以上边为起点,垂直向下移动100px
                bottom: 100px;  以下边为起点,垂直向上移动100px
            */
            position: relative;
            /*left: 100px;*/
            /*right: 100px;*/
            /*top: 100px;*/
            bottom: 100px;
        }
        .c4{
            background-color: deeppink;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">c2</div>
    <div class="c3">c3</div>
</div>
<div class="c4">c4</div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1 div, .c4 {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        .c2{
            background-color: aquamarine;
        }
        /*
        下面的.c3样式中,如果单单对.c3标签设置绝对定位,它的上级标签都没有设置相对定位,那么.c3在移动时
        将以整个文档开始移动,绝对定位也有left、right、top、bottom四个方向,这里不再多表
        .c3{
            background-color: purple;
            position: absolute;
        }
        */

        /*
        而下面的.c3样式中,对.c3标签设置绝对定位,且为它父级标签.c1设置相对定位,那么.c3在移动时
        将以.c1为准,而无论.c1处于哪个位置,.c3都会跟着走
        .c1{
            margin-top: 200px;
            position: relative;
        }
        .c3{
            background-color: purple;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        */
        .c1{
            margin-top: 200px;
            position: relative;
        }
        .c3{
            background-color: purple;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .c4{
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">c2</div>
    <div class="c3">c3</div>
</div>
<div class="c4">c4</div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #backTop{
            height: 25px;
            width: 70px;
            /* 对于固定定位的标签,即使是内联标签,也能设置宽高 */
            position: fixed;
            right: 10px;
            bottom: 20px;
            background-color: aquamarine;
            text-align: center;
            line-height: 25px;
        }
        #backTop a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<div id="top"></div>
<a href="#i1">第1章</a>
<a href="#i2">第2章</a>
<a href="#i3">第3章</a>
<div id="i1" style="height: 1000px;">第1章内容</div>
<div  id="i2" style="height: 1000px;">第2章内容</div>
<div  id="i3" style="height: 1000px;">第3章内容</div>
<span id="backTop">
    <a href="#top">返回顶部</a>
</span>
</body>
</html>

 

posted @ 2022-10-04 18:19  Einewhaw  阅读(41)  评论(0编辑  收藏  举报