• HTML5+CSS3基础笔记（上）

    1.文档声明

    • 背景：网页也有版本，如HTML4,XHTML,HTML5等等
    • 文档声明：表示该网页版本为HTML5，文档声明写在网页最开始的地方。不区分大小写

    2.进制（番外知识）

    十进制：
	- 特点：满10进1
	- 计数：0 1 2 3 4 5 6 7 8 9 
	- 单位位数：10个(0 ~ 9) 
	- 扩展：日常使用就是十进制

二进制：
	- 特点：满2进1 
	- 计数：0 1 10 11 100 101 110 111 
	- 单位位数：2个(0和1）
	- 扩展：
			计算机底层就是使用二进制来存储和计算的
			可以将内存想象成一个有多个小格子的容器，每一个小格只能存0或者1，即1bit
			8 bit  = 1 byte
			1024 byte = 1kb（千字节）
			1024 kb = 1mb（兆字节）
			1024mb = 1gb（吉字节）
			1024gb = 1tb（特字节）
			1024tb = 1pb（拍字节）

八进制：很少用
	- 特点：满8进1 
	- 计数：0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 
	- 单位位数：8个(0 ~ 7) 

十六进制：
	- 特点：满16进1 
	- 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 1a 1b 1c 1d ...
	- 单位位数：16个(0 ~ f) 	

    • 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

    3.字符编码

    为了防止乱码问题的发生，在head标签中通过 指定字符集

    鲁迅 ->>   1001010101 （编码）
1001010101 ->> 鲁迅 （解码）

所有的数据在计算机中都是以二进制形式进行存储的，包括文字、图像等。
所以一段文字在计算机中存储时，都需要转换成二进制编码。
当我们读取这段文字时，计算机会将编码转换成字符，供我们阅读。

- 编码：将字符转换成成二进制的过程
- 解码：将二进制转换成字符的过程
- 字符集：编码和解码所使用的规则称为字符集
- 常用字符集：
	ASCII
	ISO88591
	GB2312
	GBK
	
- 乱码：如果编码和解码所使用的字符集不一致就会造成乱码问题

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    4. 相关插件

    • Zeal：离线文档（包含各大语言文档）
      • 下载地址：https://wwr.lanzoui.com/iQhP5urk3gb
    • vscode上相关插件：
      • chinese简体 ：
      • ayu：主题插件
      • live server：一个展示静态/动态页面的服务器

    5.实体（转义字符）

    • 背景：
      1. 在HTML中多个空格会被解析成一个空格
      2. 有时候我们就是需要特殊的字符比如ac，这个时候就成了标签
    • 需求：如果我们需要展示这些特殊字符，那么就需要使用**实体（转义字符）**来实现
    • 使用说明： 转移字符以&实体名;
    • 查看大多数实体地址：https://www.w3cschool.cn/htmltags/html-symbols.html
    • 示例：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实体title>
head>
<body>

    
    <p>今天天   气真热啊p>

    <p>a<b>cp>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    5. meta标签

    • 定义：meta主要设置网页中的一些元数据，元数据不是给用户看的

    • meta标签常用属性：

      • charset：指定网页的字符集，要与编辑器的字符集相同
      • name：
        • title：标签的内容会作为搜索结果的超链接上的文字
        • description：指定网站描述，对应搜索引擎中描述的部分
        • keywords：网站关键字，可以指定多个关键字，关键字之间用，隔开
          在这里插入图片描述
      • http-equiv：重定向，下面的3代表3秒钟，url="url=https://www.baidu.com" 表示要跳转的url。
        	```


        • 1
        • 2

    • 示例

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <meta name="keywords" content="HTML,CSS3,前端">
    
    <meta name="title" content="磊子解忧百货铺">
    
    <meta name="description" content="这是一个淘宝店铺！商品非常便宜">
    
    <meta http-equiv="refresh" content="3,url=https://www.baidu.com">
    <title>metatitle>
head>
<body>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    6.语义化标签

    • 块元素：在网页中独占一行的元素

      • 常见的块元素：
        • h1~h6：h1元素最重要,h6最不重要
        • p：段落标签
        • hgroup：标题组标签
        • div：万能的块元素
        • blockquote：长引用元素

    • 行内标签：在网页中不独占一行的元素

      • 常见的行内元素：
        • em：表示语音语调的一个加重元素
        • strong：表示强调重要内容的元素
        • span：行内标签
        • q：短引用元素
        • br：换行元素

    • HTML5新出的语义标签：

      • header：页眉
      • main：文档著内容
      • footer：页脚
      • nav：导航标签
      • aside：侧边栏标签
      • article：表示一个独立的文章
      • section：表示一个独立的区块

    • 注意：

      1. 一般在块元素中放行内元素，而不会在行内元素中放块元素
2. p标签中不嵌套任何标签
3. 元素也称为标签，反之亦然。

      • 1
      • 2
      • 3

    7.列表标签

    • 列表标签分为三种：

      • ul(unorder list)：无序列表
        • li(list item)：列表项
      • ol(order list)：有序列表
        • li(list item)：列表项
      • dl(define list)：定义列表（用的相对少）
        • dt(define title)：定义的内容
        • dd(define descrption)：对定义内容的解释

    • 注意：

    列表标签之间可以相互嵌套

    • 1
    • 举例：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签title>
head>
<body>
    <ul>
        <li>结构li>
        <li>表现li>
        <li>行为li>
    ul>
    

    <ol>
        <li>结构li>
        <li>表现li>
        <li>行为li>
    ol>


    <ul>
        <li>
            江苏省
            <ul>
                <li>苏州li>
                <li>无锡li>
                <li>南京li>
            ul>
        li>
    ul>
    <dd>
        <dt>行为dt>
        <dd>不要拖拉,立即去做!dd>
    dd>
body>
html>

    • 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
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    8.超链接标签

    • 超链接：可以让我们从一个页面跳转到其他页面，可以使用a标签来定义
    • 属性：
      • href：指定跳转的目标路径
        • 值可以是一个外部网站地址
        • 也可以是内部页面的地址
    • 举例：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接title>
head>
<body>
    <a href="http://www.baidu.com">点击跳转到百度a>
    <br><br>
    <a href="05列表标签.html">点击跳转到内部页面a>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    9.相对路径

    • 当我们需要跳转页面的时候,可以使用超链接来跳转。跳转的路径形式有两种，一种是相对路径，一种是绝对路径。
    • 在相对路径中有./和../两种写法。
      • ./：表示当前文件所在目录，可以省略
      • ../：表示当前文件所在的上层目录。

    10.超链接的其他用法

    • target属性：
      • _self：在当前页面进行跳转
      • _blank：打开一个新的页面窗口进行跳转
    • 回到顶部：
    • 去底部：本质就是回到网页中最后一个标签，因此给最后一个标签设置id值，通过#id定位该标签所在位置
      • 去底部,其中bottom是最后一个标签的id值
    • 因此去页面中任何位置：只需要给目标标签设置id值，通过#id值来进行当前页面的跳转
    • 无任何跳转的超链接：当我们只需要保留超链接样式，而不想进行任何跳转时就可以通过在href中写上javascript:;

    11.图片标签

    • 图片标签使用img，是一个自结束标签
    • 属性：
      • src：图片地址（相对或者绝对地址）
      • alt：对图片的描述
        • 当图片无法加载时，显示的文字
        • 搜索引擎中搜索图片的关键字即是通过alt属性来搜索的。
      • width：图片宽度（单位是像素）
      • height：图片高度

    12.图片格式

    • jpg(jpeg)：
      • 支持的颜色比较丰富，不支持透明，不支持动图
      • 一般用来显示照片
    • gif：
      • 支持颜色比较少，支持简单透明，支持动图
      • 颜色单一的图片，动图
    • png：
      • 支持的颜色丰富，支持复杂透明，不支持动图
      • 颜色丰富，复杂透明图片（专为网页而生）
    • webp：
      • 这种格式是谷歌新推出来的一种格式。
      • 它具备其他图片格式的所有优点，而且文件特别的小
      • 缺点：兼容性差！
    • base64：
      • 将图片转换成base64编码，这样可以将图片转换成字符，通过字符的形式来引入图片
      • 网址：http://www.jsons.cn/img2base64/
    • 总结：
      • 效果一样，用图片小的！
      • 效果不一样，用效果好的！

    13.内联框架

    • 用于向当前页面引入一个网页，使用标签iframe
    • 属性：
      • width：宽度
      • height：高度
      • frameborder：内联框架边框，0=不显示，非0=显示

    14.音视频标签

    • 音频标签：audio
    • 常用属性：
      • controls：允许用户可以自行控制播放
      • autoplay：自动播放
      • loop：循环播放
      • src：音频路径
    • 常用写法分两种：
      • 第一种：
      • 第二种：
        <audio controls>
        <source src="./source/audio.ogg">
        <source src="./source/audio.mp3">
    audio>

    • 1
    • 2
    • 3
    • 4
    • 视频标签：video
    • 常用属性：
      • controls：允许用户可以自行控制播放
      • autoplay：自动播放
      • loop：循环播放
      • src：音频路径
        <video src="./source/flower.webm" controls autoplay loop>video>

    • 1
    • 古老通用的音视频标签：embed
        <embed src="./source/flower.mp4" type="video/mp4" width="500" height="500">

    • 1

    14. css简介

    • 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式，而最终我们能看到的只是网页的最上边一层
    • CSS：层叠样式表(cascading style sheets )
    • 使用CSS来修改元素样式的方式有三种

      • 使用内联样式(行内样式)：在标签内部通过style属性来设置元素的样式，格式style="key:value;"

        • 缺点：如果要设置一万个相同样式，需要去手动一个一个改。并且后期如果想修改的时候，也需要一个一个改。

      • 使用内部样式表：将样式编写到head标签的style标签中，然后通过CSS选择器来选中元素并为其设置各种样式

        • 优点：
          • 可以同时为多个标签设置同一个样式
        • 缺点：
          • 不能跨网页使用

      • 使用外部样式表（推荐使用）：可以将css样式写到一个.css文件中，然后通过link来引入外部的css文件

        • 优点：
          • 可以在多个文件之间复用

    15. CSS基本语法

    • 基本语法：选择器 声明块
    • 选择器：通过选择器可以选中页面中的指定元素
    • 声明块：
      • 通过声明块为指定元素设置样式
      • 声明块格式：key：value;

    16.常用选择器

    • 元素选择器：
      • 作用：对某一个元素进行样式设置
      • 语法：元素(标签名){}
      • 举例：p{} 、h1{}
    • id选择器：
      • 作用：根据元素的id属性值选中一个元素
      • 语法：#id属性值{}
      • 举例：#box{}、#shoes{}
    • 类选择器（class选择器）：
      • 作用：根据元素的class属性值选中某一个或某一些元素
      • 语法：.class属性值{}
      • 举例：.blue{}、.red{}
    • 通配选择器：
      • 作用：选中页面中的所有元素
      • 语法：*{}
      • 举例：*{}
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用选择器title>
    <style>
        /* 元素选择器 */
        /* p{
            color: tomato;
        } */

        /* id选择器 */
        /* #p1{
            font-size: large;
        } */

        /* 类选择器(class选择器) */
        /* .a1{
            color: blue;
        } */

        /* 通配选择器 */
        *{
            font-size: 30px;
        }
    style>
head>
<body>
    
    <p id="p1">君不见黄河之水天上来，奔流到海不复回。p>
    <p>君不见高堂明镜悲白发，朝如青丝暮成雪。p>
    <p>人生得意须尽欢，莫使金樽空对月。p>
    <p class="a1 b1">天生我材必有用，千金散尽还复来。p>
    <p class="a1 ">烹羊宰牛且为乐，会须一饮三百杯。p>
    <p> 岑夫子，丹丘生，将进酒，杯莫停。p>
    <p>与君歌一曲，请君为我倾耳听。p>
    <p>钟鼓馔玉不足贵，但愿长醉不复醒。p>
    <p>古来圣贤皆寂寞，惟有饮者留其名。p>
    <p>陈王昔时宴平乐，斗酒十千恣欢谑。p>
    <p>主人何为言少钱，径须沽取对君酌。p>
    <p>五花马、千金裘，呼儿将出换美酒p>
    <p>与尔同销万古愁p>
body>
html>

    • 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
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    17.复合选择器

    • 复合选择器一般分为两种：一种是交集选择器，一种是并集选择器
      • 交集选择器：
        • 作用：同时满足多个选择器，每个选择器之间是且的关系
        • 语法：选择器1选择器2选择器3选择器n{}
        • 举例：div.red{} 表示既是div标签并且class属性值为red的元素
      • （选择器分组）并集选择器：
        • 作用：多个选择器中满足其中任意一个选择器即可
        • 语法：选择器1,选择器2,选择器3,选择器n{}
        • 举例：div,red{} 表示选中只要元素是div或者class属性值为red的元素
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器title>

    <style>
        /* 交集选择器 */
        /* 表示 既是div标签并且class属性值为div1的元素 */
        /* div.div1{
            color: red;
        } */

        /* 并集选择器 */
        /* 表示 只要是div元素或者class属性值为div1的元素 */
        p,.div1{
            color:blue;
        }
    style>
head>
<body>
    
    <p>钟鼓馔玉不足贵，但愿长醉不复醒。p>
    <div class="div1">古来圣贤皆寂寞，惟有饮者留其名。div>
body>
html>

    • 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

    18.关系选择器

    • 父元素：直接包含子元素的元素称为父元素
    • 子元素：直接被父元素包含的元素称为子元素
    • 祖先元素：直接或间接包含后代元素的元素称为祖先元素。父元素也是祖先元素
    • 后代元素：直接或间接被祖先元素包含的元素称为后代元素。子元素也是后代元素
    • 兄弟元素：被同一个父元素包含的子元素是兄弟元素

    子元素选择器

    • 作用：选中指定父元素的指定子元素
    • 语法：父元素 > 子元素
    • 举例：A > B
          /* 需求：给div的子元素span元素设置字体颜色为红色 */
        div > span {
            color: red;
        }

    • 1
    • 2
    • 3
    • 4

    后代元素选择器

    • 作用：选中指定祖先元素的指定后代元素
    • 语法：祖先元素 后代元素
    • 举例：A B
           /* 需求：给div中后代元素span设置字体颜色为blue */
        div span {
            color: blue;
        }

    • 1
    • 2
    • 3
    • 4

    兄弟元素选择器

    • 语法：A + B
      • 作用：选择紧接A元素的下一个兄弟元素B（必须是紧接A元素后的第一个兄弟元素，否则不生效）
      • 举例：div + p
      p + span {
            font-size: 50px;
        }

    • 1
    • 2
    • 3
    • 语法：A ~ B
      • 作用：选择紧接A元素后的所有兄弟元素B
      • 举例：div ~ p
          p + span {
            font-size: 50px;
        }

        p ~ span {
            color: blue;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    属性选择器

    • 作用：根据元素的属性值选中一组元素
    • 语法1：[属性名] 选择含有指定属性的元素
    • 语法2：[属性名=属性值] 选择含有指定属性并且还有值为指定值的元素
    • 语法3：[属性名^=xx] 选择含有指定属性名且属性值以xx开头的元素
    • 语法4：[属性名$=xx] 选择含有指定属性名且属性值以xx结尾的元素
    • 语法5：[属性名*=xx] 选择含有属性名且属性值包含xx的元素
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器title>

    <style>
        /* 含有属性title的p元素 */
        p[title] {
            color: orange;
        }

        /* 属性title=abc的p元素 */
        p[title=abc] {
            color: blueviolet;
        }

        /* 属性title的值以a开头的p元素 */
        p[title^=a] {
            font-size: 40px;
        }

        /* 属性title的值以f结尾的p元素 */
        p[title$=f] {
            color: blue;
        }

        /* 属性title的值包含d的p元素*/
        p[title*=d]{
            color: red;
        }
    style>
head>
<body>
    <p title="abc">君不见黄河之水天上来，奔流到海不复回。p>
    <p title="edf">君不见高堂明镜悲白发，朝如青丝暮成雪。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>

    • 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
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    19.伪类选择器

    • 定义：伪类，不存在的类，一种特殊的类。
    • 作用：用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素
    • 伪类一般情况都是使用：开头
    • 常见的伪类有：
      • :first-child：第一个子元素
      • :last-child：最后一个子元素
      • :nth-child()：第n个子元素
        • n：第n个，n的范围从0到正无穷大
        • 2n或even：表示偶数位的元素
        • 2n+1或odd：表示奇数位的元素
      • :fist-of-type：同类型中的第一个子元素
      • last-of-type：同类型中的最后一个子元素
      • nth-of-type： 同类型中的第n个子元素
      • 这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的
      • not()：否定伪类，将符合条件的元素从选择器中排除
    ul > li:first-child {
            color: red;
        }

        ul > li:last-child{
            color: blue;
        }

        ul > li:nth-child(4){
            color:green
        }

        ul > li:first-of-type{
            color: aqua;
        }

        ul > li:not(:nth-of-type(3)) {
            color: yellowgreen;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • :link：未访问的超链接,该伪类只适用于超链接标签
    • :visited：访问过的超链接,该伪类只适用于超链接标签
    • :hover：当鼠标移入时发生的特殊状态(伪类)
    • :active：当鼠标点击时发生的特殊状态(伪类)
    
        a:link{
            color: red;
        }


        a:visited{
            color: blue;
        }


        a:hover{
            color: green;
        }

        a:active{
            font-size: 50px;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    20. 伪元素选择器

    • 伪元素，表示页面中一些特殊的并不真实存在的元素
    • 伪元素以::开头
      • ::first-letter：表示第一个首字母
      • ::first-line：表示第一行
      • ::selection：表示选中的内容
      • ::before：元素第一个字符之前
      • ::after：元素最后一个字符之后
      • ::before和::after必须结合content属性来使用
     p::first-letter {
            font-size: 40px;
        }

        p::first-line {
            color: bisque;
        }

        p::before{
            content: "hello";
        }

        P::after{
            content: "end";
            color: red;
        }

        p::selection{
            color: green;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    21.继承

    • 我们为一个元素设置的样式，同时也会应用到后代元素中。
    • 继承是发生在祖先后代元素之间，是为了方便我们开发的
    • 注意：
      • 不是所有的样式都可以被继承，例如背景和布局相关的就不能被继承
    • 我们可以通过Zeal文档去查看某个属性是否可以被继承，例如backgroud-color
      在这里插入图片描述
      在这里插入图片描述

    22.选择器权重(优先级)

    • 背景：当我们通过不同的选择器选中同一个元素，并且设置相同的样式，但是样式值不同时，这个时候就会出现样式冲突。
    • 选择器权重由大到小分别为：
      • 内联样式(行内样式)：1,0,0,0
      • id选择器：0,1,0,0
      • 类或伪类选择器：0,0,1,0
      • 标签选择器：0,0,0,1
      • 通配选择器：0,0,0,0
      • 继承选择器：没有优先级
    • ** 若两个选择器权重一致，就根据代码的书写顺序来排序**
    • 例如：
        .red{
            background-color: red;
        }

        .blue{
            background-color: yellowgreen;
        }

    
    "box1" class="red blue">我是div
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 比较优先级时，需要将所有的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器(并集选择器)是单独计算的）。
    • 注意：
      • 可以在某个样式后面添加!important ，则此时该样式会获取最高优先级，甚至超过内联样式，因此在开发中慎用！！！

    23.单位

    • 长度单位：
      • 像素：
        • 屏幕（显示器）实际上是由一个一个的小点点构成的
        • 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
        • 所以同样的200px在不同的设备下显示的效果不一样
      • 百分比：
        • 也可以将属性值设置为相对于其父元素属性的百分比
        • 设置了百分比可以使子元素随父元素的改变而改变
      • em：
        • 1em = 1font-size
        • 1font-size = 16个像素
        • em是相对于元素自身字体大小来计算的
        • em会根据字体大小的改变而改变
      • rem：
        • rem是相对于根元素(html元素)字体大小来计算的
          在这里插入图片描述

    24.颜色单位

    • 颜色单位主要分为颜色名，RGB值,RGBA,十六进制
      • 颜色名：在CSS中可以直接使用颜色名来设置各种颜色
        • 比如：red、orange、yellow、blue
        • 但是在css中使用颜色名是非常不方便的
      • RGB值：通过三种颜色的不同浓度调配出不同的颜色
        • R（red）、G（green）、B（blue）
        • 每一种颜色的范围在0 ~ 255（0% - 100%）之间
        • 语法：rgb(红色，绿色，蓝色)
      • RGBA：就是在rgb的基础上增加了一个a表示不透明度
        • R（red）、G（green）、B（blue）、A（不透明度）
        • 1 表示完全不透明、0表示完全透明，5半透明
      • 十六进制的RGB：
        • 语法：#红色绿色蓝色
        • 颜色浓度通过00-ff
        • 如果颜色两位重复可以进行简写（不推荐）
        • 比如： #aabbcc -> #abc
      • HSL
        • H(hue) ：色相，本质是一个圆环，范围是0-360（0和360为红色）
        • S(saturation)：饱和度，范围是0% ~ 100%
        • L(lightness)：亮度，范围是0% ~ 100%

    25. 文档流

    • 背景：网页是多层的结构，是一层摞着一层的。而用户看到的往往是最上面的那一层。在最底下的一层称为文档流，文档流是网页的基础
    • 定义：文档流是一个位置，是网页中最底下的一层。
    • 文档流状态：
      • 在文档流中
      • 不在文档流中（脱离文档流）
    • 元素在文档流中的特点：
      • 块元素：
        • 块元素在网页中独占一行（自上向下排列）
        • 默认宽度：默认宽度是父元素的全部（会把父元素撑满）
        • 默认高度：默认高度是子元素的高度
      • 行内元素：
        • 行内元素在网页中不独占一行（自左向右排列），当行内元素占满会继续下一行自左向右排列
        • 默认宽度：根据内容的宽度来
        • 默认高度：根据内容的高度来

    26.盒子模型

    • 背景：CSS将页面中的所有元素都设置成一个个矩形的盒子
    • 盒子模型：又称为盒模型或框模型
    • 每一个盒子由以下几个部分组成：
      • 内容区（content）：元素中的所有子元素和文本内容都在内容区排列
        • width：设置内容区的宽度
        • height：设置内容区的高度
      • 边框（border）：边框属于盒子边缘
        • border-color：边框颜色
          • border-color：red blue green blue ：依次表示上边框颜色红色，右边框颜色蓝色，下边框颜色绿色，左边框颜色blue
        • border-width：边框宽度（粗or细）
          • border-width：10px 20px 30px 40px四个值（顺时针方向）：表示上宽度10px，右宽度20px，下宽度30px，左宽度40px
          • border-width：10px 20px 30px 三个值：表示上宽度10px ，左右20px，下30px
          • border-width：10px 20px两个值：表示上下10px，左右20px
          • border-width：10px 一个值：表示上右下左都是10px
          • border-xxx-width：
            • border-top-width：上边框宽度
            • border-bottom-width：下边框宽度
            • border-right-width：右边框宽度
            • border-left-width：左边框宽度
        • border-style：边框样式（实线or虚线）
          • solid：实现
          • dotted：点状虚线
          • double：双线
          • dashed：虚线
        • 以上三个可以简写，宽度，颜色，样式（顺序可以调换）：boder: 10px orange solid
          .box1{
            /* 内容区属性 */
            width: 100px;
            height: 100px;
            background-color: #afb;

            /* 边框属性 */
            border-width: 10px;
            border-color: red;
            border-style: solid;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 内边距（padding）：内容区与边框之间的距离
      • 一个盒子的大小由内容区、内边距、边框构成
      • padding-top：上内边距
      • padding-right：右内边距
      • padding-bottom：下内边距
      • padding-left：左内边距
      • padding：10px 20px 30px 40px 四个值：表示上内边距10px，右内边距20px，下内边距30px，左内边距40px
      • padding 10px 20px 30px 三个值：表示上内边距10px，左右内边距20px，下内边距30px
      • padding 10px 20px 两个值：表示上下内边距10px，左右内边距20px
        在这里插入图片描述
    • 外边距（margin）：盒子与外界元素之间的距离
      • 外边距不会影响到可见盒的大小，只会影响到盒子在页面中的位置
      • 外边距有4个方向的属性，分别是：
        • margin-top：上外边距，设置一个正值，自身元素会向下移动
        • margin-right：右外边距，默认情况下不会产生任何效果
        • margin-bottom：下外边距，设置一个正值，会使下面的元素（其他元素）向下移动
        • margin-left：左外边距，设置一个正值，自身元素会向右移动。
      • 外边距属性也可以简写：
        • margin可以设置四个方向的外边距，用法和padding一样
        • margin 100px：四个方向的外边距100px
        • margin 100px 200px 300px 400px：自身元素向下移动100px，向右移动400px，300px会使下面的元素向下移动300px
        • margin 100px 200px 300px ：该元素向下移动100px，向右移动200px，使下面的元素向下移动300px

    27.盒子模型-水平方向布局

    • 盒子水平方向布局主要由以下几个部分组成：
      • margin-left
      • border-left
      • padding-left
      • width
      • padding-right
      • border-right
      • margin-right
    • 一个元素在其父元素中水平布局必须满足下列等式！！
      margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度
    • 以上等式必须满足，如果相加结果使得等式不成立，则称为过度约束
    • 以下几个属性可以设置成auto的：
      • margin-left、margin-right、width
    • 等式调整的几个情况如下：
      • 如果这七个值中没有auto，则浏览器会自动调整margin-right值使等式成立
        100 + 0 + 0 + 200 + 0 + 0 + 0 = 800 ==> 100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
      • 如果这七个值中某个值是auto，则会自动调整auto的那个值使等式成立
      • 如果宽度的值是auto，则会调整宽度最大，其他的没有设置值的外边距会为0
        auto + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 0 + 0 + 0 + 600 + 0 + 0 + 200 = 800
        200 + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 600 + 0 + 0 + 0 = 800
        auto + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 0 + 0 + 0 + 800 + 0 + 0 + 0 = 800
      • 如果宽度的值是固定的，外边距的值为auto，则auto的外边距会自动均匀分配使等式成立
        auto + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 300 + 0 + 0 + 200 + 0 + 0 + 300 = 800
      • 在这有一个特殊的，就是水平居中设置方式：
        • 宽度固定，将margin-left和margin-right设置成auto
        .inner{
            width: 200px;
            height: 200px;
            background-color: #afb;
            margin-left: auto;
            margin-right: auto;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    28.盒子模型-垂直方向布局

    • 元素溢出：子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
    • 可以通过在子元素中设置属性overflow来处理溢出部分的内容，主要有以下三个：

      • visiable：可见的，对于溢出的部分依旧可以看见
        在这里插入图片描述

      • hidden：隐藏，直接隐藏掉溢出的部分
        在这里插入图片描述

      • scroll：以滚动条的形式来展示溢出的内容，这种方式水平垂直都会有滚动条
        在这里插入图片描述

      • auto：根据元素宽度和内容自动调整是否在水平和垂直方向添加滚动条
        在这里插入图片描述
        在这里插入图片描述

    29.外边距折叠（重叠）

    • 外边距重叠（折叠）：相邻的垂直方向的元素设置外边距时可能会发生重叠现象。
    • 如下两个情况的外边距重叠情况：
      • 兄弟元素：
        • 兄弟元素间的相邻，垂直方向外边距(margin-top和margin-bottom)取两者之间的较大值（两者都是正值）
           .box1,.box2{
            width: 100px;
            height: 100px;
        }

        .box1{
            background-color: #afb;
            margin-bottom: 100px;
        }

        .box2{
            background-color: orange;
            margin-top: 100px;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 特殊情况
      • 如果相邻外边距是一正一负，则取两者的和
      • 如果相邻外边距都是负值，则取绝对值较大的那一个。
    • 父子元素：
      • 父子元素间相邻外边距，子元素会传递给父元素（上外边距），这种情况必须要处理！！
      • 处理的思路：一是通过改变内边距方式，二是通过改变外边距方式
      • 第一种处理方式：
        • 修改父元素的内边距，且修改父元素的height属性
         .box3{
            width: 200px;
             /* ②修改子元素的width*/
            height: 100px;
            background-color: #afb;
            /* ①改变父元素的内边距*/
            padding-top: 100px;
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    • 第二种方式：修改子元素的margin-top，且给父元素添加边框
    
        .box3{
            width: 200px;
            height: 200px;
            background-color: #afb;
            /* 添加边框 */
            border: #afb 1px solid;
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 上边距100px */
            margin-top: 100px;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    30. 行内元素的盒子模型

    • 行内元素的盒子模型特点：
      • 行内元素设置了高度和宽度也不生效
      • 行内元素可以设置padding，但是垂直方向上不会生效，水平方向生效
      • 行内元素可以设置margin，但是垂直方向上不会生效，水平方向生效
      • 行内元素可以设置border，但是垂直方向上不会生效。
    • 如果想给行内元素设置对应的宽度和高度，办法还是有的，可以通过display属性将行内元素变成块元素实现：
      • display属性的可选值
        • inline ： 将元素设置成行内元素
        • block ： 将元素设置成块元素
        • inline-block： 将元素设置成行内块元素，既可以设置宽度和高度又可以不独占一行
        • none：完全隐藏元素，即隐藏元素内容和样式
      • visibility属性可选值：
        • visiable：元素可见，默认值
        • hidden：隐藏元素内容，但保留元素样式

    31.去除浏览器默认样式

    • 背景：浏览器会保存一些默认样式，方便用户查看。默认样式的存在会影响到页面的布局，因此通常情况下需要去除浏览器的默认样式。
    • 问题在线：
        <p>我是段落标记p>
    <p>我是段落标记p>
    <p>我是段落标记p>
    <p>我是段落标记p>
    <p>我是段落标记p>
   
    <div>哈哈哈哈哈div>

    <ul>
        <li>11111li>
        <li>11111li>
        <li>11111li>
    ul>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    • F12查看盒子样式
      在这里插入图片描述
      可以看到盒子的外边距是8px。

    • 去除浏览器默认样式的三种方法：

      • 简写方式：
      *{
            margin: 0;
            padding: 0;
            /* 去除列表项的小黑点 */
            list-style: none;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • reset样式：
      • 官方地址：https://meyerweb.com/eric/tools/css/reset/
    "stylesheet" href="assets/reset.css">

    • 1

    在这里插入图片描述

    • reset去除浏览器默认样式源代码：
    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

    • 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
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • normalize样式
      • 官方地址：https://necolas.github.io/normalize.css/8.0.1/normalize.css
      • 源代码：
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

    • 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
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349

    这里并没有去除所有样式，因为normalize的作用不同于reset。reset是将所有默认样式去除，而normalize是将所有默认样式统一，这样在不同的浏览器里显示效果也是统一的

    32 盒子的尺寸

    • 默认情况下，盒子可见框的大小由内容区，边框，内边距组成。
    • box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）
      • 可选值：
        • content-box：默认值， 宽度和高度用来设置内容区的大小
        • border-box： 宽度和高度用来设置盒子的尺寸。

    33 轮廓阴影和圆角

    轮廓

    • outline：用来设置元素的轮廓线，用法和border一样。
    • 轮廓和边框不同点的是轮廓不会影响到页面布局
         .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 轮廓属性 */
            outline: 10px solid red;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    阴影：

    • box-shadow：属性用于在一个元素的框架周边添加阴影效果
    • 语法：box-shadow：水平偏移量 垂直偏移量 阴影的模糊半径 颜色
    box-shadow: 10px 10px 5px orange;

    • 1
    • 效果：
      在这里插入图片描述

    圆角：

    • border-radius： 属性使一个元素的外边框角变圆。
    • 你可以设置一个半径来做圆角，也可以设置两个半径来做椭圆角。
    • border-radius：用来设置圆角，圆角设置的是圆的半径大小。
      • border-top-left-radius
      • border-top-right-radius
      • border-bottom-left-radius
      • border-bottom-right-radius
     border-radius: 10px;

    • 1

    在这里插入图片描述

    • border-radius：可以分别指定四个角的圆角
      • 四个值：左上 右上 右下 左下
      • 三个值：左上 右上/左下 右下
      • 两个值：左上/右下 右上/左下
      • 一个值：表示四个角的圆角一致
      • 这里不需要死记硬背，只要遵循顺时针 + 对角线原则即可

    圆

    • 原理很简单，就是绘制正方形，并将4个圆角设置为正方形边长的一半即可。
           .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 设置圆 */
            border-radius: 50%;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    椭圆

    只需要对圆进行一点点的改动即可，设置width和height属性不相等即可

     .box1{
            width: 300px;
            height: 200px;
            background-color: #bfa;
            border-radius: 50%;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    34.浮动

    • 浮动：通过浮动可以使一个元素向其父元素的左侧或有右侧移动。
    • 通过float属性来指定浮动：
      • 可选值：
        • none：默认值，不浮动
        • left：元素向左浮动
        • right：元素向右浮动
    • 特点：
      • 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置。所以元素下边还在文档流中的元素会向上移动
      • 元素设置浮动以后，水平布局的等式便不需要强制成立
      • 浮动的元素默认不会从父元素中移出。
      • 浮动元素向左或向右移动时，不会超过前边的浮动元素
      • 浮动元素不会超过上边的兄弟浮动元素，最多最多与他一样高。
      • 若浮动元素的上边是一个非浮动元素，那么浮动元素无法上移。
            .box1{
            width: 400px;
            height: 200px;
            background-color: #bfa;
        }

        .box2{
            width: 200px;
            height: 300px;
            background-color: orange;
            float: left;
        }
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    • 浮动元素不会盖住文字，文字会自动环绕在浮动元素周边，所以我们可以利用浮动来设置文字环绕图片的效果。
      在这里插入图片描述
    • 简单总结：
      • 浮动的主要作用：让页面中的元素可以水平排列

    脱离文档流的特点

    • 块元素：
      • 块元素不再独占一行
      • 块元素的宽度和高度默认都被内容撑开
        .box1{
            background-color: #bfa;
            float: left;
        }

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述

    • 行内元素：
      • 行内元素设置浮动属性后，脱离文档流，特点与块元素一样
    

I am a Span

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

  • 相关阅读:
    智能硬件适配测试
    王熙凤穿越到 2022 年，一定会采购的单点登录服务
    直播预告│智汇云舟“数字孪生智慧园区解决方案”专场
    部分产品小汇总
    Java使用selenium入门
    PVE系列教程(十七)、安装Redis服务器
    驱动开发day4（实现通过字符设备驱动的分布实现编写LED驱动，实现设备文件的绑定）
    greenplum源码解析 全局死锁检测ReadMe
    腾讯云轻量应用服务器部署（新手图文教程）
    安装free IPA与CDH6.3.2结合
  • 原文地址：https://blog.csdn.net/w1020471486/article/details/125981799