HTML5+CSS3基础笔记（上）_w3cschool html离线文档-优快云博客

本文链接：https://blog.youkuaiyun.com/w1020471486/article/details/125981799

1.文档声明

背景：网页也有版本，如HTML4,XHTML,HTML5等等
文档声明：<!doctype html>表示该网页版本为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)

3.字符编码

为了防止乱码问题的发生，在head标签中通过<meta charset="utf-8"> 指定字符集

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

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

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

4. 相关插件

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

5.实体（转义字符）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实体</title>
</head>
<body>

    <!-- 实体(转义字符)：以&实体名; -->
    <p>今天天&nbsp;&nbsp;&nbsp;气真热啊</p>

    <p>a&lt;b&gt;c</p>
</body>
</html>

5. meta标签

定义：meta主要设置网页中的一些元数据，元数据不是给用户看的
meta标签常用属性：
- charset：指定网页的字符集，要与编辑器的字符集相同
- name：
  - title：标签的内容会作为搜索结果的超链接上的文字
  - description：指定网站描述，对应搜索引擎中描述的部分
  - keywords：网站关键字，可以指定多个关键字，关键字之间用，隔开
- http-equiv：重定向，下面的3代表3秒钟，url="url=https://www.baidu.com" 表示要跳转的url。
```
	<meta http-equiv="refresh" content="3,url=https://www.baidu.com" />```
```
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 关键字 -->
    <meta name="keywords" content="HTML,CSS3,前端">
    <!-- 搜索结果中超链接的文字 -->
    <meta name="title" content="磊子解忧百货铺">
    <!-- 搜索结果中每一条超链接对应的描述 -->
    <meta name="description" content="这是一个淘宝店铺！商品非常便宜">
    <!-- http-equiv：重定向，3秒钟后跳转到百度 -->
    <meta http-equiv="refresh" content="3,url=https://www.baidu.com">
    <title>meta</title>
</head>
<body>
    
</body>
</html>

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. 元素也称为标签，反之亦然。

7.列表标签

列表标签分为三种：
- ul(unorder list)：无序列表
  - li(list item)：列表项
- ol(order list)：有序列表
  - li(list item)：列表项
- dl(define list)：定义列表（用的相对少）
  - dt(define title)：定义的内容
  - dd(define descrption)：对定义内容的解释
注意：

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

举例：

<!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>

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>

9.相对路径

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

10.超链接的其他用法

target属性：
- _self：在当前页面进行跳转
- _blank：打开一个新的页面窗口进行跳转
回到顶部：
- <a href="#">回到顶部</a>
去底部：本质就是回到网页中最后一个标签，因此给最后一个标签设置id值，通过#id定位该标签所在位置
- <a href="#bottom">去底部</a>,其中bottom是最后一个标签的id值
因此去页面中任何位置：只需要给目标标签设置id值，通过#id值来进行当前页面的跳转
<a href="javascript:;">无任何跳转的超链接</a>：当我们只需要保留超链接样式，而不想进行任何跳转时就可以通过在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 src="./source/audio.mp3" controls autoplay loop></audio>
- 第二种：

    <audio controls>
        <source src="./source/audio.ogg">
        <source src="./source/audio.mp3">
    </audio>

视频标签：video
常用属性：
- controls：允许用户可以自行控制播放
- autoplay：自动播放
- loop：循环播放
- src：音频路径

    <video src="./source/flower.webm" controls autoplay loop></video>

古老通用的音视频标签：embed

    <embed src="./source/flower.mp4" type="video/mp4" width="500" height="500">

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>

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>

18.关系选择器

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

子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
举例：A > B

      /* 需求：给div的子元素span元素设置字体颜色为红色 */
        div > span {
            color: red;
        }

后代元素选择器

作用：选中指定祖先元素的指定后代元素
语法：祖先元素后代元素
举例：A B

       /* 需求：给div中后代元素span设置字体颜色为blue */
        div span {
            color: blue;
        }

兄弟元素选择器

语法：A + B
- 作用：选择紧接A元素的下一个兄弟元素B（必须是紧接A元素后的第一个兄弟元素，否则不生效）
- 举例：div + p

  p + span {
            font-size: 50px;
        }

语法：A ~ B
- 作用：选择紧接A元素后的所有兄弟元素B
- 举例：div ~ p

      p + span {
            font-size: 50px;
        }

        p ~ span {
            color: blue;
        }

属性选择器

作用：根据元素的属性值选中一组元素
语法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>

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;
        }

:link：未访问的超链接,该伪类只适用于超链接标签
:visited：访问过的超链接,该伪类只适用于超链接标签
:hover：当鼠标移入时发生的特殊状态(伪类)
:active：当鼠标点击时发生的特殊状态(伪类)


        a:link{
            color: red;
        }


        a:visited{
            color: blue;
        }


        a:hover{
            color: green;
        }

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

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;
        }

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;
        }

    <div id="box1" class="red blue">我是div</div>

比较优先级时，需要将所有的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器(并集选择器)是单独计算的）。
注意：
- 可以在某个样式后面添加!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;
        }

内边距（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;
        }

在这里插入图片描述

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;
        }

特殊情况
- 如果相邻外边距是一正一负，则取两者的和
- 如果相邻外边距都是负值，则取绝对值较大的那一个。
父子元素：
- 父子元素间相邻外边距，子元素会传递给父元素（上外边距），这种情况必须要处理！！
- 处理的思路：一是通过改变内边距方式，二是通过改变外边距方式
- 第一种处理方式：
  - 修改父元素的内边距，且修改父元素的height属性

     .box3{
            width: 200px;
             /* ②修改子元素的width*/
            height: 100px;
            background-color: #afb;
            /* ①改变父元素的内边距*/
            padding-top: 100px;
        }

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

在这里插入图片描述

第二种方式：修改子元素的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;
        }

在这里插入图片描述

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>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ul>

在这里插入图片描述

F12查看盒子样式

可以看到盒子的外边距是8px。
去除浏览器默认样式的三种方法：
- 简写方式：

  *{
            margin: 0;
            padding: 0;
            /* 去除列表项的小黑点 */
            list-style: none;
        }

reset样式：
- 官方地址：https://meyerweb.com/eric/tools/css/reset/

<link rel="stylesheet" href="assets/reset.css">

在这里插入图片描述

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;
}

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;
}

这里并没有去除所有样式，因为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;
        }

阴影：

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

box-shadow: 10px 10px 5px orange;

效果：

圆角：

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

 border-radius: 10px;

在这里插入图片描述

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

圆

原理很简单，就是绘制正方形，并将4个圆角设置为正方形边长的一半即可。

       .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 设置圆 */
            border-radius: 50%;
        }

在这里插入图片描述

椭圆

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

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

在这里插入图片描述

34.浮动

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

        .box1{
            width: 400px;
            height: 200px;
            background-color: #bfa;
        }

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

在这里插入图片描述

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

脱离文档流的特点

块元素：
- 块元素不再独占一行
- 块元素的宽度和高度默认都被内容撑开

    .box1{
            background-color: #bfa;
            float: left;
        }

在这里插入图片描述

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

<style>
    span {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }
</style>

<span>I am a Span</span>