CSS – Akun

CSS全名是‘Cascading Style Sheets’,中文名”层叠样式表”。

用于定义网页样式和布局的样式表语言。

通过CSS，可以指定页面中各个元素的颜色，字体，大小，间距，边框背景等样式，从而实现更精准的页面设计。

1. CSS语法

CSS通常由选择器、属性、和属性值组成，多个规则可以组合在一起，以便同时应用多个样式

选择器{
  属性1：属性值1；
  属性2：属性值2；
}

1.选择器的声明可以写无数条属性。
2.声明的每一行属性，都需要以英文分号结尾。
3.声明中的所有属性和值都是以键值对这种形式出现的。

示例：

/* 这是一个p标签选择器 */
 p{
  color:blue;
  font-size:16px;
}

上述示例表示所有p标签的都应用了这个样式。

2. CSS导入方式

CSS的导入方式有三种，分别为：

内联样式（Inline Style）
内部样式表（Internal Stylesheet）
外部样式表External Stylesheet)

三种导入方式的优先级：内联样式>内部样式表>外部样式表

2.1 内联样式

内联样式就是把CSS样式直接放在HTML元素的标签中。因为每个HTML标签都有一个style属性，可以直接定义样式。

2.2 内部导入（内部样式表）

内部样式表就是把CSS样式放在HTML文档的头部，即head标签中。

2.3 外部样式表

外部样式表是把CSS样式单独放在一个CSS文件中，然后再head中使用link标签来把他链接到HTML文档中。如：

<link rel="stylesheet" href="/css/style.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导入方式</title>
    <link rel="stylesheet" href="/css/style.css">

    <style>
        p{
            color:blue;
            font-size: 26px;
        }
        h2{
            color: red;
            font-size: 26px;
        }
    </style>

</head>
<body>
    <p>这是一个应用了CSS样式的文本</p>
    <br>
    <!-- 内联样式 -->
     <h1 style="color: brown;font-size: 52px;">这是一个一级标题，应用了内联样式</h1>
     <h2>这是一个二级标题，应用了内部样式</h2>
     <h3 style="color: burlywood;">这是一个三级标题，应用了外部样式。</h3>
</body>
</html>

3.选择器

选择器是CSS中的关键部分，他允许你针对特定元素或一组元素定义样式。

全部选择器：*
元素选择器
类选择器：根据类名选择。
ID选择器：根据ID选择。
通用选择器：对所有元素选择。通用选择器是一种特殊的选择器，它使用星号（*）来表示，能够匹配文档中的任意元素。无论这些元素是段落、标题、链接还是其他任何HTML元素，通用选择器都能够选中它们。
子元素选择器
后代选择器（包含选择器）
并集选择器
伪类选择器
伪元素选择器

3.1 全部选择器

css
    <style>
        *{
            color: red;
        }
    </style>

html
<body>
    <h1>这是一个全部选择器示例1，使用h1标签</h1>
    <p>这是一个全部选择器示例2，使用p标签</p>
    <span>这是一个全部选择器示例3，使用span标签</span>
</body>

可以发现，全部选择器可以选择所有标签并改变所有标签的样式。

3.2 元素选择器

使用元素选择器可以修改指定的元素的样式。如：h1-h6,span,p,div等元素。

css
<style>
        h1{
            color: red;
        }
        p{
            color: aqua;
        }
        span{
            color: brown;
            background-color: yellowgreen;
        }
</style>

html
<body>
    <h1>这是一个元素选择器示例1，使用h1标签</h1>
    <p>这是一个元素选择器示例2，使用p标签</p>
    <span>这是一个元素选择器示例3，使用span标签</span>
</body>

元素选择器还可以对多个元素定义同一样式:

css
        h1,p,span{
            background-color: blueviolet;
        }

3.3 类选择器

通过使用类选择器，可以以一种独立于文档元素的方式来指定样式。

语法：.类名{样式}

快速创建标签并添加类：<标签>.类名。如快速给h1标签添加类，h1.highlight

 css
    <style>
        h1{
            color: red;
        }
        .lei1{
            color: blue;
            background-color: black;
        }
        p{
            color: blueviolet;
        }
        .lei2{
            color: aqua;
            background-color: black;
        }
        span{
            color: cadetblue;
        }
        .lei3{
            color: brown;
            background-color: yellowgreen;
        }
    </style>

<body>
    <h1 class="lei1">这是一个类选择器示例1，使用h1标签</h1>
    <p class="lei1">这是一个类选择器示例2，使用p标签</p>
    <span class="lei3">这是一个类选择器示例3，使用span标签</span>
</body>

可以发现，

当标签在使用了元素选择器基础上，又使用了类选择器，那么原来的样式会被类选择器的样式覆盖。
不同元素可以定义同一个类名，这样在页面上会显示同样的样式，如第二行的h1标签和第四行的p标签。

3.4 ID选择器

ID选择器可以通过设定元素的ID属性来选中并样式化特定的html元素。

id选择器具有以下特点：

语法：#id名。如#header，会选择id为”header“的元素
快速给h1标签添加一个id：h1#header
唯一性：在html种，每个id的值必须是唯一的，即每个id只能使用一次。这才能确保id选择器能够精准地选中页面上的单个元素。
优先级：id选择器在css具有较高的优先级，当id选择器与类选择器或其他选择器冲突时，id选择器的样式会覆盖其他选择器的样式。
使用场景：id选择器通常用于页面中关键元素的样式化，如页眉、页脚、导航栏等。由于其唯一性，id选择器也常用于JavaScript中作为唯一标识。
注意事项：虽然id选择器非常强大，但应避免过度使用，以免html文档变得复杂难以维护。在可能的情况下，应优先考虑使用类选择器，特别是在需要服用样式时。

在前面的基础上添加id标签，对比显示效果：

css
    <style>
        #id1{
            color: tomato;
            background-color: grey;
        }
       
        #id2{
            color: orange;
            background-color: gray;
        }
       #id3{
           color:red;
           background-color:black
    </style>

html
<body>
    <h1>1 这是一个元素选择器示例，使用h1标签，</h1>
    <h1 class="lei1"> 2 这是一个类选择器示例，使用h1标签,</h1>
    <h1 id="id1"> 3 这是一个id选择器示例，使用h1标签。</h1>
    <p>4 这是一个元素选择器示例，使用p标签,</p>
    <p class="lei1">5 这是一个类选择器示例，使用p标签,</p>
    <p id="id2">6 这是一个类选择器示例，使用p标签。</p>
    <span >7 这是一个类选择器示例3，使用span标签</span>
    <span class="lei3">8 这是一个类选择器示例，使用span标签</span>
    <span id="id2">9 这是一个类选择器示例，使用span标签</span>
</body>

可以发现，以1、2、3为例，都是h1标签，而3同时定义了id和类，由于id选择器的优先级更高，3最终显示了id选择器的样式。

再看6和9，他们两个都定义了同一个id，因此最终显示的样式相同。

id3选择器由于没有对应的元素可选择，因此没有显示。

3.5 子元素选择器和后代选择器

子元素选择器：
使用大于号（>）作为连接符号。
只选择指定元素的直接子元素，不包括孙元素或其他更深层级的后代。
例如，div > p只会选择div元素的直接子元素p，而不包括p的子元素。
适用于需要精确控制样式，只对直接子元素生效的场景。

后代元素选择器=包含选择器：
使用空格作为连接符号。
选择指定元素的所有后代元素，包括子元素、孙元素等所有层级的关系。
例如，div p会选择div元素内的所有p元素，无论它们嵌套多深。
适用于需要为某个元素的所有后代应用样式的场景。

相邻元素选择器=兄弟元素选择器：
使用加号（+）作为组合符。
选择紧接在另一个元素后的元素，且这两个元素有相同的父元素。
将两个选择器连接起来。例如，h1 + p 选择器会选择所有紧接在元素后的元素。
相邻元素选择器可以与后代选择器、子选择器等其他选择器结合使用，以实现更复杂的样式化需求。
这种选择器在样式化文档时非常有用，尤其是在需要针对特定布局进行精细调整时。

/* 子元素选择器 */
        .father > .son{
            color: yellowgreen;
        }
/* 后代选择器 */
        .father p{
            color: brown;
        }
/* 相邻元素选择器=兄弟元素选择器 */
        h3 + p{
            background: red;
        }
        ······

    <!--//快速创建div标签并添加类：.father// -->
     <div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <div>
            <p class="grandson">这是一个后代选择器示例</p>
        </div>
     </div>  
     
     <p>这是一个普通的p标签</p>
     <h3>这是一个相邻兄弟选择器</h3>
     <p>这是另一个p标签</p>

3.6 并集选择器

并集选择器是CSS中的一种选择器，它允许开发者通过逗号分隔多个选择器，从而同时选择多个标签或元素，并设置共同的样式属性。这种选择器的主要优点是简化代码、提高效率，并且可以缩小样式表的体积。

并集选择器的语法非常简单，就是在多个选择器之间使用英文逗号（,）进行连接。例如：

css
div, #myId, .myClass {
    color: blue;
    font-weight: bold;
}

在这个例子中，div、#myId和.myClass是三个不同的选择器，它们通过逗号连接在一起，形成了一个并集选择器。这个选择器会将所有的元素、id为myId的元素以及class为myClass的元素的文本颜色设置为蓝色，并加粗显示。

注意事项
选择器的多样性：并集选择器可以包含任何形式的选择器，包括元素选择器、类选择器、ID选择器等。
样式的统一性：所有被并集选择器选中的元素将应用相同的样式声明。
代码的优化：使用并集选择器可以减少重复的样式声明，从而优化CSS代码。
可读性与维护性：并集选择器可以提高代码的可读性和维护性，尤其是在处理多个具有相同样式的元素时。

假设我们有以下HTML结构：

<div>HTML</div>
<div>React</div>
<p id="myId">CSS</p>
<span class="myClass">jQuery</span>

如果我们想要将这些元素的文本都设置为蓝色，并加粗显示，可以使用并集选择器：

css
div, #myId, .myClass { 
  color: blue; 
  font-weight: bold; 
}

3.7 伪类选择器

选择HTML文档元素的特定状态或者位置，不仅仅是这个元素本身的属性。

以”:”开头，通常就是给用户交互文档结构，或者其他条件下的元素应用样式。

比如，鼠标悬停状态。

<!-- 伪类选择器 -->
   #element:hover{
        back-groundcolor:black
       }

<!-- 伪类选择器示例 -->
   <h3 id="element" >这是一个伪类选择器示例，把鼠标悬停在我这看看效果。</h3>

比如，通过伪类选择器来选择

:first-child 父元素中的第一个子元素。
:nth-child() 第n个子元素。
:active 链接的状态。
:link 未访问的链接
:visited已访问的链接。

3.8 伪元素选择器

::after
::before
用于创建一个虚拟元素，并且样式化他们。
不是选择实际存在的元素。
在选择的元素之前或者之后插入虚拟的内容。

4. CSS常用属性

CSS属性有很多，可以参考相关文档：https://www.runoob.com/cssref/css-reference.html

以字体（font）为例，字体属性有很多，如

font 在一个声明中设置字体的所有属性，是一种复合属性。
font-family 设置文本的字体，如楷体。
font-size 设置设置文本的字体尺寸。
font-style 设置文本的字体样式。
font-variant 设置文本的字体样式。
font-weight 这是字体的粗细。
··· ···

font属性

常用，font属性是CSS复合属性，可一次性定义多个字体样式，也可分别定义。

html
<!-- 使用font属性设置字体样式，如粗细，字体，行间隔 -->
<h1 style="font:bolder 25px 'KaiTi';">这是一个 font 复合属性的使用</h1>
<h1 style="font-weight:bolder;font-family:'KaiTi';">这是一个 font-weight font-family属性的使用</h1>
<!-- 上面两种写法最终显示效果相同 -->

line-height属性

常用，用来设置行高。

 <p>这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>
     <!-- 添加line-height属性后，行间距变高 -->
     <p style="line-height: 40px;">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>

width属性、height属性

对比一下在块元素、行内元素、行内块元素中使用的特点。

css
<style>
        .block{
            background: aqua;
            width: 200px;
            height: 100px;

        }
        .inline{
            background: brown;
            width: 200px;
            height: 200px;
        }
        .inline-block{
            width: 100px;
            height: 150px;
        }
</style>

    html

     <div class="block">这是一个块级元素</div>
     <div class="block">这是另一个块级元素</div>
     <span class="inline">这是一个行内元素</span>
     <img src="/pic/藤原自用.png" alt="logo" class="inline-block">
     <img src="/pic/藤原自用.png" alt="logo" class="inline-block">
     <img src="/pic/藤原自用.png" alt="logo" class="inline-block">

块元素独占一行，添加另一个块元素会另起一行，修改了宽度和高度和背景颜色后，依旧独占一行。

行内元素可以和多个行内元素在同一行排列，图中的三个图片就和行内元素span在同一行。修改行内元素的宽和高和背景颜色发现没有变化，可知行内元素不受宽度高度修改的影响，而修改三个图片的高和宽有变化。

display属性

display用于控制元素如何在页面上显示。

他决定了元素是块级元素、内联元素还是其他类型的布局方式。

常用值：

block：将元素设置为块级元素，块级元素会独占一行，并且可以设置宽度和高度。
inline：将元素设置为行内元素，行内元素不会独占一行，而是与其他行内元素并排显示。
inline-block：结合了block和inline的特点，元素可以并排显示，默认宽度和高度是文本的宽度和高度，同时可以自定义宽度和高度。
none：隐藏元素，不占任何空间，类似于元素从未存在过。
flex：将元素设置为弹性盒子（flexbox），可以灵活地进行布局和对其。
grid：将元素设置为网格容器，可以创建二维网络布局。

css
<style>
.div-inline{
            display: inline;
            background-color: aqua;
        }
        .span-inline-block{
            display: inline-block;
            background-color: blueviolet;
            width: 300px;
        }
</style>

html
<h2>display</h2>
<div style="background-color: aqua;">这是一个普通的div标签</div>
<span style="background-color: burlywood;">这是一个普通的span标签</span><br>
<div class="div-inline">这是一个转换成行内元素的div标签</div>
<span style="display: block;background: burlywood;">这是一个转换成块元素的span标签</span>
<div class="div-inline">这是一个转换成行内元素的div标签</div>
<span class="span-inline-block" style="border: solid;">这是一个转换成行内块元素的span标签    </span>

5. CSS盒子模型

盒子模型是CSS中常用于布局的基本概念，他描述了文档中的每个元素，都可以被看出是一个矩形的盒子，这个盒子内包含了

内容（content）：盒子包含的实际内容，比如文本、图片等等。
文本边框（border）：围绕着内边距的外部，是盒子的边界。可以使用’border‘属性来设置。
内边距（padding）：围绕在内部的内容，是内容与边框之间的空间。可以使用’padding‘属性来设置。
外边距（margin）：围绕在边框的外部，是盒子与其他属性之间的空间。可以使用’margin‘属性来设置。
pdding，border和margin都是复合属性，可以通过一个属性设置多个样式。

border（边框）

border：简写属性，用于把针对四个边的属性设置在一个声明。
border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width：简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color：简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color：设置元素的下边框的颜色。
border-bottom-style：设置元素的下边框的样式。
border-bottom-width：设置元素的下边框的宽度。
border-left：简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color：设置元素的左边框的颜色。
border-left-style：设置元素的左边框的样式。
border-left-width：设置元素的左边框的宽度。
border-right：简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color：设置元素的右边框的颜色。
border-right-style：设置元素的右边框的样式。
border-right-width：设置元素的右边框的宽度。
border-top：简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color：设置元素的上边框的颜色。
border-top-style：设置元素的上边框的样式。
border-top-width：设置元素的上边框的宽度。
border-radius：设置圆角的边框。

padding（填充）

padding：使用简写属性设置在一个声明中的所有填充属性
padding-bottom：设置元素的底部填充
padding-left：设置元素的左部填充
padding-right：设置元素的右部填充
padding-top：设置元素的顶部填充

margin（外边距）

margin：简写属性。在一个声明中设置所有外边距属性。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。
margin-right：设置元素的右外边距。
margin-top：设置元素的上外边距。

6. 浮动和定位（页面布局方式）

传统页面布局方式有5种

标准流（普通流，文档流）：按照传统的书写顺序依次排序页面。
浮动
定位
Flexbox和Grid（自适应布局）

标准流是由块级元素和行内元素按照默认规定的方式来排序，块级就是占一行，行内元素一行放多个元素。

面对复杂一点的排列方式，就需要用到浮动。

在网页的开发中，都是以多种布局方式参杂在一起开发的。

6.1 浮动

浮动可以让元素脱离文档流，根据开发者的意愿漂浮到网页的任意方向。

’浮动‘属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使元素进行浮动。

语法：

选择器{
      float:left/right/none;
      }

注意：浮动是相对于父元素浮动，只会在父元素的内部移动。

浮动最典型的应用，就是让多个块级元素在同一行内排列显示。

那么浮动和行内块（inline-block）有什么区别？：区别就是浮动元素就是相互贴靠在一起，不会由缝隙。如果父级宽度装不下这些浮动的盒子，多出去的盒子就会另起一行。而如果使用行内块元素（inline-block）的话，他们彼此直接是由缝隙的，不如浮动方便。

浮动的三大特性：

脱标：脱离标准流。设置了浮动后，这个盒子就会脱离标准流的控制，移动端指定的位置，浮动的盒子就不再保留原来所占的位置，就行漂浮再空中一样。
一行显示，顶部对齐。
具备行内块元素特性。不管原先是什么模式的元素，添加了浮动后，都会有和行内块元素相似的特性。

未添加浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .father{
            background: aquamarine;
            height: 150px;
        }
        .left-son{
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        .right-son{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
    
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
</body>
</html>

添加浮动：给left-son添加左浮动，给right-son添加右浮动。

css
<style>
        .father{
            background: aquamarine;
            height: 150px;
        }
        .left-son{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }
        .right-son{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: right;
        }
    </style>

可以看到，左浮动盒子移动到了最左边，右浮动盒子移动到了最右边。

现在，把左浮动和右浮动盒子多复制几个，看看超出一行的变化效果。

复制多个后，发现浮动盒子和行内块元素类似，先占满一行，占满一行之后接着排在下一行。

但是有一点需要注意，这里给父元素设置过高度，其实如果不设置高度的话，背景颜色就消失了。

或者给父元素设置一个边框，border：3px solid brown；高度恢复150px，这时边框就包裹着所有元素

现在再来去掉父元素高度，这时边框就没有包裹浮动盒子。这是因为，这两个浮动盒子处于浮动中，不受其他元素的影响。

这时候再在父元素外添加内容的话，会发现文本出现在了两个浮动元素的中间。

这时候，就需要清除浮动，否则后面的布局，就会受到这两个浮动的影响。

最常用的清除浮动的方式有两种：

第一种就是在浮动元素的父元素样式中添加属性overflow:hidden;
第二种就是用伪元素清除法，在浮动元素的父元素样式样式添加伪元素.father::after{}

css
##第一种overflow:hidden;
.father{
            background: aquamarine;
            /* height: 150px; */
            border: 3px solid brown;
            overflow: hidden;
        }

##第二种.father::after{}
.father::after{
            content: "";
            display: table;
            clear: both;
        }

通过上述两种清除浮动的方法，最终在父元素外添加的元素会在新的块中显示。

当然，清除浮动的方式不止这两种，只是这两种是最简单好用的。

6.2 定位(position)

定位布局可以做到精准定位，但缺乏灵活性。

定位方式：

’相对定位‘(relative)：相对于元素在文档流种的正常位置进行定位。
’绝对定位‘(absolute)：相对于其最近的已定位祖先元素进行定位，不占据文档流。
’固定定位‘(fixed)：相对于浏览器窗口进行定位，不占据文档流，固定在屏幕上的位置，不随滚动而移动。

相对定位（position:relative）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .box1{
            height: 350px;
            background: aqua;
        }
        .box-normal{
            width: 100px;
            height: 100px;
            background: purple;
        }
        .box-relative{
            width: 100px;
            height: 100px;
            background-color: pink;
            position:relative
        }
    </style>
</head>
<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>
</body>
</html>

此时，虽然给box-relative设置了相对定位，但是位置还没有变化。因为相对位置是根据文档流进行排列的，当前位置和文档流位置一样因此没有变化。

如果要改变其位置，就需要设置相应的属性和值：

left：距离左边偏移。
right：距离右边偏移。
top：距离上边偏移。
bottom：距离下边偏移。

比如，让相对定位盒子从左向右偏移40px,从上向下偏移20px：

CSS
.box-relative{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            left: 40px;
            top: 20px;
        }

效果如下：

绝对定位(position:absolute)

css
.box2{
            height: 350px;
            background-color: yellow;
            margin-bottom: 300px;
        }
        .box-absolute{
            width: 100px;
            height: 100px;
            background: yellowgreen;
            position:absolute;
        }

html
<h1>绝对定位</h1>
    <div class="box2">
        <div class="box-normal"></div>
        <div class="box-absolute"></div>
        <div class="box-normal"></div>
    </div>

添加position:absolute后，下面的紫色元素消失，这是因为绿色元素变成了绝对定位，脱离了正常的文档流，下面的自身元素上浮了，来到了绿色元素的位置，只是被挡住了。

这时修改绿色元素的位置，就可以看见被挡住的紫色元素。

.box-absolute{
            width: 100px;
            height: 100px;
            background: yellowgreen;
            position:absolute;
            left: 40px;
            bottom: 100px;

        }

注意，绝对定位是相对于已经定位的父级元素进行定位的，如果没有已经定位的父级元素，他就相对于这个html标签进行定位。绝对位置参考的是参考对象的上下左右边框，根据实际情况进行定位。

固定定位(position:fixed)

固定定位也是脱离了正常的文档流，他是相对于浏览器的窗口进行定位的。即使页面滚动，固定定位的位置还是保持着窗口的固定位置不动。

css
.box-fixed{
            width: 100px;
            height: 100px;
            /position:fixed;*/
            background: black;
            /* right: 0; */
            /* bottom: 400px; */
        }

html
<h1>固定定位</h1>
    <div class="box-fixed">
        <div class="box-fixed"></div>
    </div>

没有设置固定定位元素属性，如下

设置固定元素属性position:fixed后，黑色方块消失，去到了默认位置，左上角。如下：

修改固定定位值后，如下：

css
.box-fixed{
            width: 100px;
            height: 100px;
            position:fixed;
            background: black;
            right: 0;
            bottom: 400px;
        }

M	T	W	T	F	S	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

1. CSS语法

2. CSS导入方式

2.1 内联样式

2.2 内部导入（内部样式表）

2.3 外部样式表

3.选择器

3.1 全部选择器

3.2 元素选择器

3.3 类选择器

3.4 ID选择器

3.5 子元素选择器和后代选择器

3.6 并集选择器

3.7 伪类选择器

3.8 伪元素选择器

4. CSS常用属性

font属性

line-height属性

width属性、height属性

display属性

5. CSS盒子模型

border（边框）

padding（填充）

margin（外边距）

6. 浮动和定位（页面布局方式）

6.1 浮动

6.2 定位(position)

相对定位（position:relative）

绝对定位(position:absolute)

固定定位(position:fixed)

End

Send Comment Edit Comment

1. CSS语法

2. CSS导入方式

2.1 内联样式

2.2 内部导入（内部样式表）

2.3 外部样式表

3.选择器

3.1 全部选择器

3.2 元素选择器

3.3 类选择器

3.4 ID选择器

3.5 子元素选择器和后代选择器

3.6 并集选择器

3.7 伪类选择器

3.8 伪元素选择器

4. CSS常用属性

font属性

line-height属性

width属性、height属性

display属性

5. CSS盒子模型

border（边框）

padding（填充）

margin（外边距）

6. 浮动和定位（页面布局方式）

6.1 浮动

6.2 定位(position)

相对定位（position:relative）

绝对定位(position:absolute)

固定定位(position:fixed)

End

Send Comment Edit Comment

Related Posts