第二弹：走进CSS世界，学习记录

大橙子房2024-05-06 21:24

目录

[1.1. 了解CSS](#1.1. 了解CSS)

[1.2. 放置CSS的几种方式](#1.2. 放置CSS的几种方式)

[1.3. CSS选择器](#1.3. CSS选择器)

[1.3.1. 基本选择器](#1.3.1. 基本选择器)

[1.3.2. 层级选择器](#1.3.2. 层级选择器)

[1.3.3. 属性选择器](#1.3.3. 属性选择器)

[1.3.4. 结构性伪类选择器](#1.3.4. 结构性伪类选择器)

[1.3.5. 状态伪类选择器](#1.3.5. 状态伪类选择器)

[1.3.6. 选择器优先级](#1.3.6. 选择器优先级)

[1.3.7. 文本属性](#1.3.7. 文本属性)

[1.3.8. 背景属性](#1.3.8. 背景属性)

[1.3.9. 尺寸属性](#1.3.9. 尺寸属性)

[1.3.10. 列表属性](#1.3.10. 列表属性)

[1.3.11. 定位属性](#1.3.11. 定位属性)

[1.3.12. calc 计算属性](#1.3.12. calc 计算属性)

[1.3.13. 布局属性](#1.3.13. 布局属性)

[1.3.14. 浮动属性](#1.3.14. 浮动属性)

[1.3.15. 浮动布局实战](#1.3.15. 浮动布局实战)

[1.3.16. 盒子模型](#1.3.16. 盒子模型)

[1.3.17. EWSHOP布局实战](#1.3.17. EWSHOP布局实战)

[1.3.18. 弹性盒模型](#1.3.18. 弹性盒模型)

[1.3.19. CSS3新增属性](#1.3.19. CSS3新增属性)

[1.3.20. 媒体查询](#1.3.20. 媒体查询)

1.1. 了解CSS

  • CSS层叠样式表 cascading style sheet

  • 作用：用于==增强控制网页样式==并且允许==样式信息与内容分离==的一种标记性语言

  • CSS不需要编译，可由浏览器直接解析

  • CSS3是目前被使用最广泛的版本，但是部分特性尚不能得到支持

  • CSS的基本语法

    • CSS定义分别由：选择符、属性、属性取值组成

    • 格式：

      复制代码 
      p{color:yellowgreen}

    • CSS大小写不敏感，推荐使用小写。

    • 属性和值之间用冒号(:)分开，多个属性之间用分号(;)隔开

  • CSS中的注释

    复制代码 
    /*书写注释的内容*/

1.2. 放置CSS的几种方式

  1. 内联样式表(行内引用)

    复制代码 
    <p style=""></p>
    • 内联的样式比其它方式更加灵活，但是需要和展示的内容混在一起，内联样式会失去样式表的优点。

  2. 内嵌样式表(内部引用)

    复制代码 
    <!DOCTYPE html>
<html>
  <head>
    <style></style>
  </head>
</html>
    • 适用于一个HTML文档具有独一无二的样式时。

  3. 外联样式表(外部引用)

    复制代码 
    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="文件地址" />
  </head>
</html>

<!--了解-->
<style>
      @import "CSS文件地址"
</style>
    • 外部样式引用了外接的CSS文件。一般浏览器有缓存的功能所以用户不用每次都下载此CSS文件，并且外部引用相对于内部和内联来说高效的是节省带宽，外部引用是W3C推荐使用的标准。

  4. 多重样式表的叠加

    • 依照后定义的优先，所以优先级最高的是内联样式。连入的外部样式和内部样式表之间是最后定义的优先级高。

    • 案例

      复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>放置CSS的几种方式</title>
        <link rel="stylesheet" href="./style.css" />

        <style>
            /*@import "./style.css";*/
            #one{
                background-color:tomato;
                color:#fff;
                font-size:50px;
            }
        </style>
        <style>
            /*@import "style.css";*/
        </style>
    </head>
    <body>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p style="background-color:blue;color:white">女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <div>唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div id="one" style="font-size:100px">唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div id="two">唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div>唐僧喜欢哪个女孩子只有白龙马知道</div>
    </body>
</html>

      • style.css文件

        #two{
        background-color:yellow;
        color:pink;
        }
        #one{
        font-size:200px;
        color:#000;
        }

1.3. CSS选择器

1.3.1. 基本选择器

  • 类选择器(class选择器)

    • 在css中使用(.)来查找，类选择器可以有多个属性值，使用空格分开即可。

      • 案例：

        基本选择器
        我是第三个元素 我设置的属性是id属性
        我是第四个元素 我设置的属性是id属性

  • 通配符选择器(*)

    • 匹配所有标签

      • 案例

        基本选择器-通配符选择器
        我是第一个div元素
        我是第二个div元素
        我是第三个元素 我设置的属性是id属性
        我是第四个元素 我设置的属性是id属性

        我是p标签

        我是a标签
        • 我是无序列表
        1. 我是有序列表

1.3.2. 层级选择器

  • 组合选择器：选择器1,选择器2 多个选择器之间用逗号分隔。例：div,p

    • 案例

      层级选择器-组合选择选择器

      我是div中的p

      我是div中section里面所包含的p标签

  • 子选择器：选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。例：div > p

    • 案例

      层级选择器-子代选择器

      我是div中的p

      我是div中section里面所包含的p标签

      我是div中div里面的p元素

  • 相邻选择器：选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。例 div + p

    • 案例

      层级选择器-相邻选择器
      我是div元素

      我是P元素

      我是第二个p元素

      我是第二个div元素
      我是a

      我是div中的p

      我是div中section里面所包含的p标签

      我是div之后的p元素

      我是div中div里面的p元素

      我是div之后的a

      我是a后面的p元素

  • 兄弟选择器：选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。 例 div ~ p

  • ~ shift+键盘1键盘的那个键

    • 案例

      层级选择器-兄弟选择器
      我是div元素

      我是P元素

      我是第二个p元素

      我是第二个div元素
      我是a

      我是div中的p

      我是div中section里面所包含的p标签

      我是div之后的p元素

      我是div中div里面的p元素

      我是div之后的a

      我是a后面的p元素

1.3.3. 属性选择器

  • 属性选择器就是根据属性名或者属性值来查找到某个元素

  • E element元素标签 ATT attribute 属性 VAL value 值

  • 标签属性

    1. EATT 匹配所有具有ATT属性的E元素，不考虑属性值。

      • 案例

        属性选择器

        我是一个P标签

        我是第二个P标签

        我是第三个P标签

        我是a标签

        我是最后一个P标签

    2. E[ATT = VAL] 匹配所有ATT属性等于VAL的E元素。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT = VAL] 匹配所有ATT属性等于VAL的E元素。*/
            [title = "this is a test"]{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    3. E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。*/
            p[title ~= 'is']{
                background-color:blue;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    4. E[ATT |= VAL] 匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性。比如：'en-us','en-gb'（了解）。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT |= VAL] 匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素*/
            p[title |= this]{
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <p title="this-is-a-test">我是新增的P</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    5. E[ATT ^= VAL]属性ATT的值以VAL开头的E元素。

      • ^ 英文状态下shift + 6

      • 案例

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT ^= VAL]属性ATT的值以VAL开头的E元素。*/
            p[title ^= 't']{
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <p title="this-is-a-test">我是新增的P</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    6. E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素。

      • $ 英文状态下shift + 4

      • 案例

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素。*/
            p[title $= 's']{
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <p title="this-is-a-test">我是新增的P</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

    7. E[ATT *= VAL] 属性ATT的值中有VAL存在的E元素。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT *= VAL] 属性ATT的值中有VAL存在的E元素。*/
            p[title *= 'a']{
                background-color:tomato;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this is a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
        <p title="this-is-a-test">我是新增的P</p>
        <span title="this is a test">我是span标签</span>
    </body>
</html>

1.3.4. 结构性伪类选择器

  • 伪元素选择器(不是对真正的元素选择)

    1. E:first-line E元素的第一行。

      • 案例

        伪元素选择器

        我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
        我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 我是P标签我是P标签我是P标签我是P标签

    2. E:first-letter E元素的第一个字母。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style>
            /*E:first-letter E元素的第一个字母。*/
            p:first-letter{
                font-size:50px;
            }
        </style>
    </head>
    <body>
        <p>
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 <br>
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签
        </p>
    </body>
</html>

    3. E:before E元素的内容之前。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style>
            /*E:before E元素的内容之前。*/
            div:before{
                content: '小母牛';
                font-size:100px;
                color:tomato;
            }
        </style>
    </head>
    <body>
        <div>迎风劈叉</div>
    </body>
</html>

    4. E:after E元素的内容之后。

      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style>
            /*E:after E元素的内容之后。*/
            div:after{
                font-size:100px;
                content: '->凉快';
                color:purple;
            }
        </style>
    </head>
    <body>
        <div>迎风劈叉</div>
    </body>
</html>

      注意：在使用before或者after时，一定要配合content属性一起来使用

  • 结构性伪类选择器

    • 在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式

      • 四个最基本的结构性伪类选择器

        1. :root 将样式绑定到页面的根元素。

          • 案例

            四个最基本的结构伪类选择器

            我是P标签中的文字颜色

            1. E:not() 对某个结构元素使用样式，但是想排除这个元素下的某个子结构元素。

              • 案例
              html 复制代码 
              <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四个最基本的结构伪类选择器</title>
        <style>
            /*E:not() 对某个结构元素使用样式，但是想排除这个元素下的某个子结构元素。*/
            /*li{*/
            /*    background-color:tomato;*/
            /*}*/
            /*.one{*/
            /*    background-color: tomato;*/
            /*}*/
            li:not(.two){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li class="one">我是第一行有序列表</li>
            <li class="one">我是第二行有序列表</li>
            <li class="two">我是第三行有序列表</li>
            <li class="one">我是第四行有序列表</li>
            <li class="one">我是第五行有序列表</li>
        </ol>
    </body>
</html>

            2. E:empty 匹配所有为空的E元素。

              • 案例
              html 复制代码 
              <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四个最基本的结构伪类选择器</title>
        <style>
            /*E:empty 匹配所有为空的E元素。*/
            li:empty{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li class="one">我是第一行有序列表</li>
            <li></li>
            <li class="one">我是第二行有序列表</li>
            <li></li>
            <li class="two">我是第三行有序列表</li>
            <li></li>
            <li class="one">我是第四行有序列表</li>
            <li></li>
            <li class="one">我是第五行有序列表</li>
        </ol>
    </body>
</html>

            3. :target 代表链接到目标时。（a标签）

              • 案例
              html 复制代码 
              <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四个最基本的结构伪类选择器</title>
        <style>
            /*:target 代表链接到目标时。（a标签）*/
           a:target{
                font-size:50px;
                font-weight: bold;
                color:tomato;
            }
        </style>
    </head>
    <body>
        <a href="#ly">摸柳岩</a>
        <a href="#ty">摸唐嫣</a>
        <ol>
            <li class="one">我是第一行有序列表</li>
            <li></li>
            <li class="one">我是第二行有序列表</li>
            <li></li>
            <li class="two">我是第三行有序列表</li>
            <li></li>
            <li class="one">我是第四行有序列表</li>
            <li></li>
            <li class="one">我是第五行有序列表</li>
        </ol>
        <a id="ly">柳岩</a>
        <a id="ty">唐嫣</a>
    </body>
</html>
        • 其他的结构伪类选择器

          • E:first-child 对一个父元素中的第一个子元素E设置样式。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:first-child 对一个父元素中的第一个子元素E设置样式。*/
            li:first-child{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
        </ol>
    </body>
</html>

          • E:last-child 对一个父元素中的最后一个子元素E设置样式。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:last-child 对一个父元素中的最后一个子元素E设置样式。*/
            li:last-child{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-child(n) 对指定需要的子元素E设置样式。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:nth-child(n) 对指定需要的子元素E设置样式。*/
            li:nth-child(8){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-last-child() 对指定需要的子元素E设置样式。（倒序）

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:nth-last-child() 对指定需要的子元素E设置样式。（倒序）*/
            li:nth-last-child(3){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。*/
            /*不会匹配到*/
            li:nth-child(5){
                background-color: tomato;
            }
            /*仅匹配使用的同种标签元素*/
            li:nth-of-type(5){
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <p>我是列表标签里面放的其它标签</p>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签(倒叙)

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签*/
            li:nth-last-of-type(6){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <p>我是列表标签里面放的其它标签</p>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:nth-child(an+b)循环设置样式

            • a 表示每次循环中间隔几个改变样式。
            • b 表示指定在循环中开始的位置。
            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
           /*E:nth-child(an+b)循环设置样式*/
            /*li:nth-child(2n+1){*/
            /*    background-color: tomato;*/
            /*}*/
            li:nth-of-type(2n+1){
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>风筝大剑五只鸟->寒冰</li>
            <li>卖萌蘑菇快点跑->提莫</li>
            <li>国王三刀真五秒->蛮王</li>
            <li>我还是有序列表项一</li>
            <p>我是列表标签里面放的其它标签</p>
            <li>我还是有序列表项二</li>
            <li>我还是有序列表项三</li>
            <li>我还是有序列表项四</li>
            <li>我还是有序列表项五</li>
            <li>我还是有序列表项六</li>
        </ol>
    </body>
</html>

          • E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
            /*E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。*/
            p:only-child{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <div>
            <p>我是div中的p</p>
        </div>
        <div>
            <p>我是第二个div中的第一个P</p>
            <b>我是第二个div中的第一个B</b>
        </div>
        <div>
            <p>我是第三个div中的第一个P</p>
            <p>我是第三个div中的第二个P</p>
        </div>
    </body>
</html>

          • E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器</title>
        <style>
           /*E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。*/
            p:only-of-type{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <div>
            <p>我是div中的p</p>
        </div>
        <div>
            <p>我是第二个div中的第一个P</p>
            <b>我是第二个div中的第一个B</b>
        </div>
        <div>
            <p>我是第三个div中的第一个P</p>
            <p>我是第三个div中的第二个P</p>
        </div>
    </body>
</html>

          • E:enabled 匹配表单中激活的元素(只要没有disabled都是激活的)

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*E:enabled 匹配表单中激活的元素*/
            input:enabled{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" name="user" value="admin" />
            <br>
            <input type="text" readonly name="user1" value="admin1" />
            <br>
            <input type="text" disabled name="user2" value="admin2" />
        </form>
    </body>
</html>

          • E:disabled 匹配表单中未激活的元素。(有disabled属性)

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*E:disabled 匹配表单中未激活的元素。(有disabled属性)*/
            input:disabled{
                background-color: tomato;
                color:#fff;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" name="user" value="admin" />
            <br>
            <input type="text" readonly name="user1" value="admin1" />
            <br>
            <input type="text" disabled name="user2" value="admin2" />
        </form>
    </body>
</html>

          • E:checked 匹配表单中被选择的radio或者checkbox元素。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*E:checked 匹配表单中被选择的radio或者checkbox元素。*/
            /*input:checked{*/
            /*    width: 100px;*/
            /*    height: 100px;*/
            /*}*/
            input[type=radio]:checked+label{
                font-size:20px;
                font-weight: bold;
            }
            input[type=checkbox]:checked+label{
                color:tomato;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="radio" name="sex" value="0" id="nv"><label for="nv">女</label>
            <input type="radio" name="sex" value="1" id="nan"><label for="nan">男</label>
            <input type="radio" name="sex" value="2" id="baomi"><label for="baomi">保密</label>
            <hr>
            <input type="checkbox" name="hobby[]" value="0" id="one"><label for="one">混球</label>
            <input type="checkbox" name="hobby[]" value="1" id="two"><label for="two">足球</label>
            <input type="checkbox" name="hobby[]" value="2" id="three"><label for="three">篮球</label>
        </form>
    </body>
</html>

          • :focus 设置元素在其获取鼠标焦点的样式。(只有输入域有效)

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*:focus 设置元素在其获取鼠标焦点的样式。*/
            input:focus{
                background-color: tomato;
                color:#fff;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" name="user" value="admin5" />
            <br>
            <input type="text" name="user" value="admin4" />
            <br>
            <input type="text" name="user" value="admin3" />
            <br>
            <input type="text" name="user" value="admin2" />
            <br>
            <input type="text" readonly name="user1" value="admin1" />
            <br>
            <input type="text" disabled name="user2" value="admin2" />
        </form>
    </body>
</html>

          • ::selection 匹配用户当前选中的元素(了解)。

            • 案例
            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其它的结构伪类选择器-表单相关</title>
        <style>
            /*::selection 匹配用户当前选中的元素(了解)。*/
            div::selection{
                background-color: tomato;
                color: white;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" name="user" value="admin5" />
            <br>
            <input type="text" name="user" value="admin4" />
            <br>
            <input type="text" name="user" value="admin3" />
            <br>
            <input type="text" name="user" value="admin2" />
            <br>
            <input type="text" readonly name="user1" value="admin1" />
            <br>
            <input type="text" disabled name="user2" value="admin2" />
            <hr>
            <input type="radio" name="sex" value="0" id="nv"><label for="nv">女</label>
            <input type="radio" name="sex" value="1" id="nan"><label for="nan">男</label>
            <input type="radio" name="sex" value="2" id="baomi"><label for="baomi">保密</label>
            <hr>
            <input type="checkbox" name="hobby[]" value="0" id="one"><label for="one">混球</label>
            <input type="checkbox" name="hobby[]" value="1" id="two"><label for="two">足球</label>
            <input type="checkbox" name="hobby[]" value="2" id="three"><label for="three">篮球</label>
        </form>
        <div>
            我是div中的内容
        </div>
    </body>
</html>

1.3.5. 状态伪类选择器

  1. :link 设置超链接a在未被访问前的样式。

  2. :visited 设置超链接a在其链接地址已经被访问的样式。

  3. :hover 设置元素在鼠标悬停时的样式。(重点)

  4. :active 设置元素在被用户激活时的样式。

    • 案例

      状态伪类选择器 去360
      • aaaaaaaaaaaaaa
      • aaaaaaaaaaaaaa
      • aaaaaaaaaaaaaa
      • aaaaaaaaaaaaaa
      • aaaaaaaaaaaaaa

1.3.6. 选择器优先级

  • 内联样式，优先级1000

  • id选择器，优先级100

  • 类和伪类，优先级10

  • 元素选择器，优先级1

  • 通配符选择器，优先级0

    当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。

    并集(组合)选择器的优先级是单独计算。

    可以在样式的最后添加一个!important,则此时该样式会获得一个最高的一个优先级，将会超过所有样式甚至内联样式，所以在开发中尽量避免使用。

    • 案例
    html \<!DOCTYPE html\> 复制代码 
        <head>
        <meta charset="UTF-8">
        <title>选择器的优先级</title>
        <style>
            #one{
                font-size: 50px;
            }
            .one{
                font-size:30px!important;
                color:tomato;
            }
            .two>.three{
                color:green;
            }
            .two>div{
                color:blue!important;
            }

        </style>
    </head>
    <body>
        <div class="one" id="one">
            我是内容
        </div>
        <div id="two" class="two">
            <div class="three" style="color: purple">我是包含中的div</div>
        </div>
        <div class="two">
            <div class="three">我是包含中的div2</div>
        </div>
    </body>

1.3.7. 文本属性

  • overflow | overflow-x | overflow-y 当内容溢出元素框时隐藏|自动|显示混动条

    • 取值

      • visible： 对溢出内容不做处理，内容可能会超出容器。
      • hidden： 隐藏溢出容器的内容且不出现滚动条。
      • scroll： 隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
      • auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。

    • 案例

      文本属性
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
      复制代码 
            <div class="ellipsis">
          我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
      </div>
  </body>

  • white-space 设置文字是否在同一行显示

    • 取值：

      • normal： 默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。
      • pre： 原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果
      • nowrap： 与normal值一致，不同的是会强制所有文本在同一行内显示。
      • pre-wrap： 与pre值一致，不同的是文字超出边界时将自动换行。
      • pre-line： 与normal值一致，但是会保留文本输入时的换行。

    • 案例

      文本属性

      • 我是第一个P标签，我来测试normal aaaaaa

      • 我是第二个P标签 我来测试pre属性值

      • 我是第三个 p标签 我来测试 pre-wrap

      • 我是第四个 p标标签 我来测试 pre-line hello

      • 我是第五个P标签 我来测试的是nowarp

  • text-align 元素内容对齐方式

    • 取值：

      • left： 内容左对齐。
      • center： 内容居中对齐。
      • right： 内容右对齐。

    • 案例

      文本属性-内容对齐方式
      • 我是第一个li标签，我是左对齐
      • 我是第一个li标签，我是居中对齐
      • 我是第一个li标签，我是右对齐

  • text-decoration 指定文本是否有修饰

    • 取值：

      • none： 指定文字无装饰 （取消修饰）
      • underline： 指定文字的装饰是下划线
      • overline： 指定文字的装饰是上划线
      • line-through： 指定文字的装饰是贯穿线

    • 案例

      文本属性-文本修饰

      文本修饰-取消修饰
      为文本修饰-上划线
      为文本修饰-下划线
      为文本修饰-删除线

  • text-indent 文本首行缩进

    • 取值：用长度值指定文本的缩进，可以为负值

    • 案例

      文本属性-内容对齐方式

      这是HTML中的段落标签，特点与上行文本和下行文本间隔一行

      这是HTML中的段落标签，特点与上行文本和下行文本间隔一行

  • word-wrap 设置当前行超过指定容器的边界时是否换行。

    • 取值：

      • normal： 允许内容顶开或溢出指定的容器边界。
      • break-word： 内容将在边界内换行，如果需要，单词内部允许断行。

    • 案例

      文本属性-内容对齐方式
      aaaaaaaaaaaaaaaaaaaaaaaaa

  • vertical-align 设置对象内容的垂直对齐方式。

    • 取值：

      • baseline： 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
      • sub： 把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
      • super： 把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
      • text-top： 把当前盒的top和父级的内容区的top对齐
      • text-bottom： 把当前盒的bottom和父级的内容区的bottom对齐
      • middle： 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
      • top： 把当前盒的top与行盒的top对齐
      • bottom： 把当前盒的bottom与行盒的bottom对齐

    • 案例

      文本属性-内容垂直对齐方式

  • line-height 设置对象的行高

    • 作用：设置一行的高度用于美化效果，第二个作用可让让内容垂直居中

    • 取值：用长度值指定行高。不允许负值。

    • 案例

      文本属性-行高
      我是div的内容，我的作用可以设置行高也可以设置垂直居中

1.3.8. 背景属性

  • background-color 背景颜色

    • 取值：color设置所有值均可

    • 案例

      背景颜色

  • background-image 背景图片

    • 案例

      背景图片
      复制代码 
            </div>
  </body>

  • background-repeat 背景图片是否重复

    • 取值：

      • repeat-x： 背景图像在横向上平铺
      • repeat-y： 背景图像在纵向上平铺
      • repeat： 背景图像在横向和纵向平铺
      • no-repeat： 背景图像不平铺

    • 案例

      背景图片
      复制代码 
            </div>
  </body>

  • background-size 设置背景图片大小

    • 取值：

      • ： 用长度值指定背景图像大小。不允许负值。
      • ： 用百分比指定背景图像大小。不允许负值。
      • auto： 背景图像的真实大小。
      • cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
      • contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

    • 案例

      背景图片
      复制代码 
            </div>
  </body>

  • background-attachment 背景图片是否随内容滚动

    • 取值

      • fixed： 背景图像相对于视口（viewport）固定。
      • scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

    • 案例

      背景图片
      复制代码 
            </div>
  </body>

  • background 背景属性简写属性(推荐使用)

    • 案例

      背景的简写属性

1.3.9. 尺寸属性

  • width 设置元素的宽度

    • 取值：

      • auto： 无特定宽度值，取决于其它属性值
      • ： 用长度值来定义宽度。不允许负值
      • ： 用百分比来定义宽度。百分比参照包含块宽度。不允许负值

    • 案例

      尺寸属性

  • height 设置元素的高度

    • 取值：

      • auto： 无特定高度值，取决于其它属性值
      • ： 用长度值来定义高度。不允许负值
      • ： 用百分比来定义高度。不允许负值

    • 案例

      尺寸属性

    标尺工具的下载地址：PicPick---NGWIN，一款全功能的设计工具，包含屏幕截图、图片编辑器、颜色选择器、像素标尺和其它更多的功能

  • min-height 设置最小高度

    • 取值：

      • ： 用长度值来定义最小高度。不允许负值
      • ： 用百分比来定义最小高度。不允许负值

    • 案例

      尺寸属性
      我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容

    最小高度属性默认显示最小高度，当内容超过最小高度时，最小高度会随内容大小而增加

  • max-height 设置最大高度

    • 取值：

      • ： 用长度值来定义最小高度。不允许负值
      • ： 用百分比来定义最小高度。不允许负值

    • 案例

      尺寸属性
      我是留言的内容 我是留言的内容 我是留言的内容 我是留言的内容

    最大高度属性默认没有高度，当内容增加时告诉随内容增加，当增加到最大高度时，高度不会在增加

  • min-width 设置最小宽度

    • 取值：
      • ： 用长度值来定义最小高度。不允许负值
      • ： 用百分比来定义最小高度。不允许负值

  • max-width 设置最大宽度

    • 取值：
      • ： 用长度值来定义最小高度。不允许负值
      • ： 用百分比来定义最小高度。不允许负值

    最小高度和最大高度适用于页面布局，最小宽度和最大宽度适用于媒体查询

1.3.10. 列表属性

  • list-style-type 设定列表的符号样式

    • 取值：

      • disc： 实心圆(CSS1)
      • circle： 空心圆(CSS1)
      • square： 实心方块(CSS1)
      • decimal： 阿拉伯数字(CSS1)
      • lower-roman： 小写罗马数字(CSS1)
      • upper-roman： 大写罗马数字(CSS1)
      • lower-alpha： 小写英文字母(CSS1)
      • upper-alpha： 大写英文字母(CSS1)
      • none： 不使用项目符号(CSS1)
      • armenian： 传统的亚美尼亚数字(CSS2)
      • cjk-ideographic： 浅白的表意数字(CSS2)
      • georgian： 传统的乔治数字(CSS2)
      • lower-greek： 基本的希腊小写字母(CSS2)
      • hebrew： 传统的希伯莱数字(CSS2)
      • hiragana： 日文平假名字符(CSS2)
      • hiragana-iroha： 日文平假名序号(CSS2)
      • katakana： 日文片假名字符(CSS2)
      • katakana-iroha： 日文片假名序号(CSS2)
      • lower-latin： 小写拉丁字母(CSS2)
      • upper-latin： 大写拉丁字母(CSS2)

    • 案例

      列表属性
      • 我是无序列表
      • 我是无序列表
      • 我是无序列表
      • 我是无序列表
      1. 我是有序列表
      2. 我是有序列表
      3. 我是有序列表
      4. 我是有序列表

  • list-style-image 使用指定的图片来代替列表的序号

    • 案例

      列表属性
      • 我是无序列表
      • 我是无序列表
      • 我是无序列表
      • 我是无序列表

  • list-style-position 设定列表需要的位置

    • 取值：

      • outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐
      • inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐

    • 案例

      列表属性
      1. 我是有序列表
      2. 我是有序列表
      3. 我是有序列表
      4. 我是有序列表

1.3.11. 定位属性

  • position 设定元素的定位方式

    • static 静态定位(默认)

    • relative 相对定位

      • 以当前元素为参照物，移动指定距离的定位方式

      • 相对定位的元素会占据原有的物理位置

      • 案例

        相对定位

    • absolute 绝对定位

      • 以其它元素为参照物，移动指定距离的定位方式

      • 在绝对定位的时候，被定位的元素不会占据原有物理位置

      • 关于绝对定位参考点

        1. 如果该元素的外层元素中没有任何一个元素采用position定位，那么此时定位的参考元素变为body或者说是页面

          • 案例

            复制代码 
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .one,.two,.three{
            width:100px;
            height:100px;
        }
        .one{
            background:blue;
        }
        .two{
            background:tomato;
            position: absolute;
            left:100px;
            top:100px;

        }
        .three{
            background:green
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

        2. 如果元素的外层元素有定位设置，那么这个外层元素就成为该元素的定位参考点

          • 案例

            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .other{
            width:200px;
            height:200px;
            background:red;
            position: relative;
            left:200px;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: purple;
            position: absolute;
            left:100px;
            top:100px;

        }
    </style>
</head>
<body>
    <div class="other">
        <div class="inner"></div>
    </div>
</body>
</html>

        3. 如果元素的外层元素没有设置position的值，那么该元素将寻找距离自己最近的其它设定过position的外层元素作为参照物(多层嵌套)

          • 案例

            html 复制代码 
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .grand{
            width:300px;
            height:300px;
            background:yellow;
            /*position:relative;*/
            /*left:400px;*/

        }
        .fahter{
            width: 200px;
            height:200px;
            background:beige;
            /*margin-left:20px;*/
            position: relative;
            left:200px;
        }
        .son{
            width:100px;
            height: 100px;
            background:brown;
            position: absolute;
            left:100px;
            top:100px;

        }
    </style>
</head>
<body>
    <div class="grand">
        <div class="fahter">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>
      • 实战百度登录
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百度一下-你就知道</title>
        <style>
            /*头部区域*/
           header>div:first-child{
               position:absolute;
               left:8px;
               top:8px;
           }
           header>span:last-child{
               position: absolute;
               right:10px;
               top:8px;
           }
           /*搜索区域*/
           .center{
                width: 500px;
                height:300px;
                background: tomato;
                position: relative;
                top:100px;
               /*计算属性*/
                left:calc(50% - 250px);
           }
           .list>div:first-child{
               position: absolute;
               top:50px;
               left:0px;
               background: beige;
               width: 250px;
           }
           .list>div:last-child{
               position: absolute;
               top:50px;
               left:250px;
               width: 250px;
               background: cyan;
           }
           /*底部区域*/
            footer{
                width:100%;
                background: tomato;
                position: absolute;
                bottom:10px;
            }
            /*侧边栏*/
            aside{
                width: 30px;
                height: 100px;
                background: purple;
                position: absolute;
                right:10px;
                bottom:80px;
            }
            /*遮罩层*/
            .mask{
                position: absolute;
                background: #ccc;
                opacity: 0.3;
                left:0px;
                right:0px;
                top:0px;
                bottom:0px;
            }
            /*登录*/
            .login{
                width: 600px;
                height: 300px;
                background: white;
                position: absolute;
                top:calc(50% - 150px);
                left:calc(50% - 300px);
            }
        </style>
    </head>
    <body>
        <div id="content">
            <header>
                <span><a href="http://news.baidu.com">新闻</a> hao123 地图 贴吧 视频 图片 网盘 更多</span>
                <span>设置 登录</span>
            </header>
            <div class="center">
                <form action="">
                    <input type="search" name="search" id="">
                    <input type="submit" value="百度一下">
                </form>
                <div class="list">
                    <div class="list_left">左边列表</div>
                    <div class="list_right">右边列表</div>
                </div>
            </div>
            <aside>侧边栏</aside>
            <footer>
                关于百度About Baidu使用百度前必读帮助中心企业推广京公网安备11000002000001号京ICP证030173号信息网络传播视听节目许可证 0110516互联网宗教信息服务许可证编号：京（2022）0000043药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号
                医疗器械网络交易服务第三方平台备案凭证（京）网械平台备字（2020）第00002号
                ©2023 Baidu
            </footer>
        </div>
        <div class="mask"></div>
        <div class="login">
            <form action="">
                登录
            </form>
        </div>
    </body>
</html>

      • fixed 根据窗口定位

        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style>
            header{
                width: 100%;
                height: 80px;
                background: tomato;
                position: fixed;
                top:0px;
            }
            footer{
                width: 100%;
                height: 50px;
                background: cyan;
                position: fixed;
                bottom: 0px;
            }
            .main{
                width: 100%;
                height: 1800px;
                position: absolute;
                top:80px;
                background: antiquewhite;
            }
        </style>
    </head>
    <body>
        <header>
            我是头部内容，我是固定定位到头部
        </header>
        <section class="main">
            我是中间的内容
        </section>
        <footer>
            我是底部内容，我是固定到底部的
        </footer>
    </body>
</html>

      • z-index 设定定位元素Z轴的距离

        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style>
            header{
                width: 100%;
                height: 80px;
                background: tomato;
                position: fixed;
                top:0px;
                /*调整Z轴的距离*/
                z-index: 2;
            }
            footer{
                width: 100%;
                height: 50px;
                background: cyan;
                position: fixed;
                bottom: 0px;
            }
            .main{
                width: 100%;
                height: 1800px;
                position: absolute;
                top:80px;
                background: antiquewhite;
            }
        </style>
    </head>
    <body>
        <header>
            我是头部内容，我是固定定位到头部
        </header>
        <section class="main">
            我是中间的内容
        </section>
        <footer>
            我是底部内容，我是固定到底部的
        </footer>
    </body>
</html>

      • 定位取值

        • left:设定定位元素的水平移动位置(距离左边的距离)
        • top:设定定位元素的垂直移动位置(距离顶部的距离)
        • right:设定定位元素的水平移动位置(距离右边的距离)
        • bottom:设定定位元素的垂直移动位置(距离底部的距离)

1.3.12. calc 计算属性

  • calc()是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

  • calc(）语法：

    • 加 （+）、减（-）、乘（*）、除（/），注意的是：乘数中至少要有一个是 类型的、被除数（/右面的数）必须是 类型的

    • calc()使用通用的数学运算规则，但是也提供更智能的功能：

      • 使用"+"、"-"、"*" 和 "/"四则运算

      • 可以使用百分比、px、em、rem等单位

      • 可以混合使用各种单位进行计算

      • 表达式中有"+"和"-"时，其前后必须要有空格，如"widht: calc(100% + 5px)"

      • 表达式中有"*"和"/"时，其前后可以没有空格，但建议留有空格

  • 案例

    Title

1.3.13. 布局属性

  • 块状元素与行内元素的特点

    • 块状元素：独占一行，具有宽高属性

    • 行内元素：不会独占一行，没有宽高属性

    • 案例

      复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>块状元素和行内元素</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: tomato;
            }
            span{
                background: cyan;
                width: 100px;
                height: 100px;
            }
            a{
                background: antiquewhite;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div>我是块状元素，我独占一行</div>
        <span>我是行内元素，我不会独占一行</span>
        <a href="">是不是也是行内元素</a>
    </body>
</html>

  • display 设置元素的显示方式

    • inline 将元素作为行内元素样式显示

    • block 将元素作为块状元素显示

      • 案例

        布局属性
        我是快转个元素
        我是行内元素

      • inline-block 设定一个元素既可以设定宽高属性，也可以在一行显示。

        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            div{
                width:100px;
                height:100px;
                background:tomato;
                display: inline;
            }
            span{
                width: 100px;
                height: 100px;
                background: cyan;
                display: block;
            }
            section{
                width: 350px;
                height: 450px;
                background: purple;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div>我是快转个元素</div>
        <span>我是行内元素</span>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./o.webp" width="350" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./b.webp" alt="">
            我也是块状元素我是另外一张图片
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>

    </body>
</html>

      • none 设置元素不显示(隐藏元素)

        • 案例
        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            section{
                width: 350px;
                height: 450px;
                background: purple;
                display: inline-block;
            }

            /*设置元素隐藏*/
            .one{
                display: none;
                /*display: inline-block;*/
            }
            .two{
                display: inline-block;
            }
            .two:hover>.one{
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <div class="two">
            aaa
            <section class="one">
                <img src="./o.webp" width="350" alt="">
                我也是块状元素
            </section>
        </div>

        <section>
            <img src="./b.webp" alt="">
            我也是块状元素我是另外一张图片
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>

    </body>
</html>

        使用display:none隐藏元素不会占据原有的物理位置

  • visibility 设置元素是否显示

    • visible 显示
    • hidden 隐藏
    • 案例
    html \<!DOCTYPE html\> 复制代码 
        <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            section{
                width: 350px;
                height: 450px;
                background: purple;
                display: inline-block;
            }

              /*使用visibility设置元素的隐藏和显示*/
              .one{
                  visibility: hidden;

              }
              .two{
                  display: inline-block;
              }
              .two:hover>.one{
                  /*显示*/
                  visibility: visible;
              }
          </style>
      </head>
      <body>
          <section>
              <img src="./a.webp" alt="">
              我也是块状元素
          </section>
          <section>
              <img src="./a.webp" alt="">
              我也是块状元素
          </section>
          <div class="two">
              aaa
              <section class="one">
                  <img src="./o.webp" width="350" alt="">
                  我也是块状元素
              </section>
          </div>
          <section>
              <img src="./b.webp" alt="">
              我也是块状元素我是另外一张图片
          </section>
          <section>
              <img src="./a.webp" alt="">
              我也是块状元素
          </section>
          <section>
              <img src="./a.webp" alt="">
              我也是块状元素
          </section>

      </body>
  </html>
  ```

  > 使用visibility设置元素隐藏后会占据原有的物理位置
  >
  > > 使用visibility隐藏元素不能使用display方式进行显示
  > >
  > > 使用display隐藏的元素也同样不能使用visibility进行显示

1.3.14. 浮动属性

  • float 浮动属性

    • left 设置元素向左浮动

    • right 设置元素向右浮动

    • none 设置元素不浮动(默认值)

    • 案例

      浮动属性一
      浮动属性一
      1 2 3

  • clear 用于清除其他元素的浮动属性对当前元素的影响

    • left 用于抵消float:left效果
    • right 用于抵消float:right效果
    • both 用于清除float效果

  • 案例

    Title

  • 注意：

    • 任何元素一旦使用float属性，那么他的display属性将失效，均可以设置宽高。效果类似于inline-block

    • 当子类浮动后父类感知不到子类高度时，可以给父类设置overflow:hidden，此时父类可以感知到子类高度并且父类没有失去display的特性

      • 案例

        浮动后对父类的影响

    • 当子类浮动后父类感知不到子类高度时，也可以设置父类浮动，让父类跟子类同时到达浮动层感知子类高度，但是此时父类会失去display的特点

      • 案例

        浮动后对父类的影响

    • 当子类浮动后父类感知不到子类高度时，也可以设置父类的宽高，子类浮动不会超过父类宽高

1.3.15. 浮动布局实战

  • 参考页面：EWShop首页 - 欢迎使用EWShop商城系统

  • 案例

    仿制ewshop布局
    顶部元素
    左侧元素
    当前元素
    右侧元素
    底部元素

  • margin 简写属性

    • 四个参数设置四个边的距离 上、右、下、左

    • 三个参数设置四个边的距离 上、右左、下

    • 两个参数设置四个边的距离 上下、右左

    • 一个参数设置四个边的距离(设置设置上右下左)

    • 案例

      外间距
      顶部元素
      左侧元素
      当前元素
      右侧元素
      底部元素

    • margin上下会右合并问题(垂直方向)

      • 取最大的值

      • 案例

        外间距

      • margin可以设置块状元素居中

        • 取值

          • margin-left:auto
          • margin-right:auto

        • 简写

          • margin:0 auto

        • 案例

          html 复制代码 
          <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外间距</title>
        <style>
            .three{
                width: 300px;
                height: 300px;
                background: tomato;
                /*margin-left: auto;*/
                /*margin-right: auto;*/
                margin: 20px auto;
            }
        </style>
    </head>
    <body>
        <div class="three"></div>
    </body>
</html>

  • border 边框

    • 边框样式取值
      • none： 无轮廓。当定义了该值时，border-color将被忽略，border-width计算值为0，除非边框轮廓应用了border-image。
      • hidden： 隐藏边框。
      • dotted： 点状轮廓。
      • dashed： 虚线轮廓。
      • solid： 实线轮廓
      • double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
      • groove： 3D凹槽轮廓。
      • ridge： 3D凸槽轮廓。
      • inset： 3D凹边轮廓。
      • outset： 3D凸边轮廓。
    • border-top 设置顶部边框颜色、样式、宽度
    • border-left 设置左侧边框颜色、样式、宽度
    • border-right 设置右侧边框颜色、样式、宽度
    • border-bottom 设置底部边框颜色、样式、宽度
    • 案例
    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
            .one{
                width:100px;
                height:100px;
                border-top:1px solid red;
                border-bottom: 5px double blue;
                border-left:1px solid tomato;
                border-right:tomato 5px dashed;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

    • 派生类

      • border-top-style 设置顶部边框样式
      • border-top-color 设置顶部边框颜色
      • border-top-width 设置顶部边框宽度
      • border-left-style 设置左侧边框样式
      • border-left-color 设置左侧边框颜色
      • border-left-width 设置左侧边框宽度
      • border-right-style 设置右侧边框样式
      • border-right-color 设置右侧边框颜色
      • border-right-width 设置右侧边框宽度
      • border-bottom-style 设置底部边框样式
      • border-bottom-color 设置底部边框颜色
      • border-bottom-width 设置底部边框宽度
      • border-style:设置四个边的边框样式
      • border-width:设置四个边的边框宽度
      • border-color:设置四个边的边框颜色
      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
             /*单独设定每条边的 样式  颜色   宽度*/
            .two{
                margin-top:10px;
                width: 100px;
                height: 100px;
                border-top-style: solid;
                border-top-color: #000;
                border-top-width: 5px;
                border-left-style:solid;
                border-left-width: 5px;
            }
            /*同时设置四个边的样式 颜色  宽度*/
            .three{
                width: 100px;
                height: 100px;
                margin-top: 20px;
                border-style:solid;
                border-color:tomato;
                border-width: 10px;
            }
        </style>
    </head>
    <body>
        <div class="two"></div>
        <div class="three"></div>
    </body>
</html>

    • border 简写属性

      • border:同时设置四个边框的边框样式、颜色、宽度
      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
            /*同时设置四条边的边框颜色 样式 宽度*/
            .four{
                width: 100px;
                height: 100px;
                border:1px solid red;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="four"></div>
    </body>
</html>

  • padding 内边距

    • 派生类

  • padding-left : 设置距离左边的距离

    • padding-top：设置距离顶部的距离
    • padding-right：设置距离右边的距离
      • padding-bottom：设置距离底部的距离

  • 案例

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内间距</title>
        <style>
            .one{
                width:100px;
                height:100px;
                border:1px solid tomato;
                padding-top:20px;
                padding-left:20px;
                padding-bottom:20px;
                padding-right:20px;
            }
        </style>
    </head>
    <body>
        <div class="one">我是内容</div>
    </body>
</html>

    • padding简写属性

      • 四个参数设置四个边的距离 上、右、下、左
      • 三个参数设置四个边的距离 上、右左、下
      • 两个参数设置四个边的距离 上下、右左
      • 一个参数设置四个边的距离(设置设置上右下左)
      • 案例
      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内间距</title>
        <style>
            .two{
                width: 100px;
                height: 100px;
                border:1px solid red;
                /*四个参数设置四个边的距离 上、右、下、左*/
                /*padding:10px 20px 30px 40px;*/
                /*三个参数设置四个边的距离 上、右左、下*/
                /*padding:10px 20px 10px*/
                /*两个参数设置四个边的距离 上下、右左*/
                /*padding:10px 20px;*/
                /*一个参数设置四个边的距离(设置设置上右下左)*/
                padding:10px;
                margin-bottom: 20px;
            }
            span{
                border:1px solid red;
                margin:20px 20px;
                padding: 10px 20px;
            }
        </style>
    </head>
    <body>
        <div class="two">我是内容</div>
        <span>我是行内元素</span>
    </body>
</html>

      使用padding也能实现元素内容水平垂直居中

  • 关于标准盒模型

    • padding + border 在标准盒模型中会算入元素大小范围内
    • 案例
    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                width: 100px;
                height: 100px;
                background: tomato;
                border:10px solid red;
                padding: 50px;
            }
        </style>
    </head>
    <body>
        <div class="one">我是内容</div>
    </body>
</html>

  • 怪异盒模型

    • box-sizing 定义当前元素使用哪种盒模型

      • border-box（怪异）

      • content-box (标准)

      • 案例

        Title
        我是内容
        怪异盒

    • 1.3.17. EWSHOP布局实战

    • 目录结构

      /ewshop/
      |- index.html 首页
      |- css/ CSS目录
      |- global.css 全局样式
      |- index.css index.html文件样式
      |- img/ 图像资源目录
      |- font/字体图标目录

    • global.css

      • 主要作用：设置全局样式 ，清空默认样式 base.css,设置常用的基础类

        EWshop
        左
        中
        右

    • display:inline-flex 定义父容器时行内弹性盒

      • 案例

        flex a
        左
        中
        右
        a

    • Justify-content 设置活检索弹性盒子元素在(主轴)方向上的对齐方式。

      • flex-start 默认值。项目位于容器的开头

      • flex-end 项目位于容器的结尾

      • center 项目位于容器的中心

      • space-between 项目位于各行之间留有空白的容器内。

      • space-around 项目位于各行之前、之间、之后都留有空白的容器内。

      • 案例

        flex
        复制代码 
              <!--父容器-->
      <div class="one">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>
      <div class="two">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>
      <div class="three">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>
      <div class="four">
          <!--每一个被包含的就是一个项目-->
          <div>左</div>
          <div>中</div>
          <div>右</div>
      </div>

  </body>

    • align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向的对齐方式

      • stretch 默认值，项目被拉伸以适应容器

      • center 项目位于容器的中心

      • flex-start 项目位于容器的开头

      • flex-end 项目位于容器的结尾

      • 案例

        flex
        第一块
        第二快
        第三块

    • flex-wrap 控制flex容器是单行或者多行。

      • nowrap： flex容器为单行。该情况下flex子项可能会溢出容器

      • wrap： flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

      • wrap-reverse： 反转 wrap 排列。

      • 案例

        Title
        1
        2
        3
        4
        5

    • flex-flow:'flex-direction' || 'flex-wrap'

      • 案例

        Title
        1
        2
        3

    1.3.19. CSS3新增属性

    1. 浏览器私有前缀

      • -moz- Firefox
      • -webkit- chrome safari
      • -ms- IE
      • -o- Opear
      • 作用

        • 用于区分不同浏览器的内核，当CSS属性是实验性质的时候，可以加浏览器私有前缀，让对应浏览器兼容

          Title

        • 圆角边框案例(太极)

          Title
          线性渐变

          • radial-gradient 径向渐变

            CSS 复制代码 
            /*形状 大小 as 位置*/
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

          • shape 取值

            • ellipse(默认)：指定椭圆形的径向渐变
            • circle:指定圆形的径向渐变

          • size 取值

            • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
            • closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
            • closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
            • farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

          • position 取值

            • center（默认）：设置中间为径向渐变圆心的纵坐标值。
            • top：设置顶部为径向渐变圆心的纵坐标值。
            • bottom：设置底部为径向渐变圆心的纵坐标值。
            • left:设置左为径向渐变圆心的纵坐标值。
            • right:设置右为径向渐变圆心的纵坐标值。
            • 也可使用百分比

          • 案例

          html 复制代码 
          <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*线性渐变*/
            .one{
                width: 200px;
                height: 200px;
                /*background: linear-gradient(to bottom,red,blue);*/
                /*background: linear-gradient(to top,red,blue);*/
                /*background: linear-gradient(to left,red,blue);*/
                /*background: linear-gradient(to right,red,blue);*/
                /*background-color:linear-gradient(to top,red,blue);*/
                /*background-image:linear-gradient(to right bottom,red,blue);*/
                /*background-image: linear-gradient(120deg,red,green,blue);*/
                background-image: repeating-linear-gradient(red 15%,green 20% ,blue 30%);
            }
            /*径向渐变*/
            .two{
                width: 200px;
                height: 200px;
                border:1px solid #000;
                margin: 50px;
                /*background-image:radial-gradient(ellipse farthest-side,red,orange,blue);*/
                /*background-image: radial-gradient(circle closest-corner at top,red,blue);*/
                /*background-image: radial-gradient(circle closest-corner at left,red,blue);*/
                /*background-image: radial-gradient(circle closest-corner at right,red,blue);*/
                background-image: radial-gradient(circle closest-corner at 50% 50%,red,blue);
                /*background-image: repeating-radial-gradient(circle at 50% 50%,red 10%,green 20%,blue 30%);*/
            }
        </style>
    </head>
    <body>
        <div class="one">线性渐变</div>
        <div class="two">径向渐变</div>
    </body>
</html>

      1. 转换Transform

        • transform2D

          • translate(x,y) 2D转换转换

          • scale(x,z) 2D缩放

          • rotate(angle) 2D旋转

          • skew(x-angle,y-angle) 2D倾斜

          • 案例

            2D转换

      • transform3D

        • translate3d(x,y,z) 定义3D转换

        • translateZ(z) 定义3D转换，只适用Z轴的值

        • scale3d(x,y,z) 定义3D缩放

        • scaleZ(z) 通过设置Z轴的值来定义3D缩放转换

        • rotate3d(x,y,z,angle) 定义3D旋转

        • rotateZ(angle) 定义沿着Z轴的3D旋转

        • perspective(n) 为D3转换元素定义透视视图

          Title

      1. 过渡Transition

        • 过渡指定四要素

          1. transition-property 过渡属性，如background,color等。

          2. transition-duration 过渡所需要时间。

          3. transition-timing-function 过渡函数。既过渡的速度，方式等。

            • ease 默认值，规定慢速开始，然后变快，然后慢速结束过渡效果
            • linear 匀速
            • ease-in 规定以慢速开始，加速效果。
            • ease-out 规定以慢速结束，减速效果。
            • ease-in-out 规定以慢速开始和结束，先加速后减速效果。

          4. transition-delay 过渡延迟时间。表示开始执行的时间。

          5. transition 过渡属性简写属性

            Title

      2. 动画案例

        Title

      1.3.20. 媒体查询

      • 使用Media Query的基本语法

        复制代码 
        @media mediatype and | not | only (media feature) {
    CSS-Code
}
    相关推荐
    暴躁小师兄数据学院17 小时前
    【AI大模型应用开发工程师特训笔记】第04讲（第五章）：条件判断与流程控制
    大数据·人工智能·python·学习
    3DVisionary17 小时前
    混凝土裂纹如何全自动识别？DIC技术在结构裂缝重构的应用
    人工智能·学习·dic技术·混凝土裂缝监测·全场应变分析·三维位移测量·实验力学
    蜡台18 小时前
    VUE 侧边按钮组，可自定义位置
    前端·javascript·css
    魔法阵维护师18 小时前
    从零开发游戏需要学习的c#模块，第二十八章（血条显示 —— 敌人与玩家生命可视化）
    学习·游戏·c#
    AOwhisky18 小时前
    Ceph系列第一期：Ceph分布式存储核心概念与架构初识
    linux·运维·笔记·分布式·ceph·学习·架构
    Bechamz18 小时前
    大数据开发学习Day44
    大数据·学习
    锦鲤521418 小时前
    深度学习与神经网络学习
    深度学习·神经网络·学习
    楼田莉子18 小时前
    C++20现代特性：概念与约束
    开发语言·c++·后端·学习·c++20
    算法channel18 小时前
    实测一个本地知识库：自动学习电脑里的几百个文件，一键导出总结报告！
    学习
    眼眸流转19 小时前
    Dify学习笔记
    笔记·学习·agent·dify
    热门推荐
    01GitHub 镜像站点02DeepSeek V4 + Claude Code thinking mode 400 错误修复方案03Codex 接入 DeepSeek API 完整配置文档04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05【AI】2026 年具身智能模型和世界模型总结06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07CC-Switch & Claude 基于 Linux 服务器安装使用指南08CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）09API Key 登录 Codex 也能用插件了，还支持会话删除和导出10几个好用的ip纯净度检测网站