网安——CSS

一、CSS基础概念

CSS有两个重要的概念，分为样式和布局

CSS的样式分为两种，一种是文字的样式，一种是盒模型的样式

CSS的另一个重要的特质就是辅助页面布局，完成HTML不能完成的功能，比如并排显示或精确定位显示

从HTML4.0开始，结构层和样式层进行了分离

前端三层：

结构层：HTML作用是从语义的角度讲进行网页结构的搭建（相当于建房子主题）
样式层：CSS作用从美观的角度讲修饰页面样式（给房子装修）
交互层：JavaScript作用从交互的角度讲描述页面的行为（开灯）

二、CSS常用属性

CSS常用得文字属性有三个：color、font-size、font-famliy

CSS得属性样式发生了改变由HTML的k=’v’变为了k:v;

2.1文字颜色

属性名：color

基本使用：

<p style="color:red">你好哇</p>

属性值：主要分为两种：单词表示法和颜色值（十六进制和rgba）

以蓝色为准

2.2字号

属性：font-size

属性值：常用的是以px为单位的数字值

根据浏览器的不同，有默认不同的字号大小，比如Chrome和ie默认就是16px的文字

每个浏览器都有自己最小的显示像素，比如Chrome最小字号为8px；IE浏览器最小字号是1px

 <p style="font-size: 18px;">你好哇</p>

2.3字体

属性：font-family

属性值：必须以双引号包裹，属性值可以有多个，使用逗号分隔开

中文字体的常用字体属性值：微软雅黑，宋体

英文常用字体属性值：Arial，consolas

实际的字体属性是根据设计图获取，大多数浏览器默认显示字体是微软雅黑

如果页面中有中文化混合的，需要同时设置对应的字体

如果设置多个字体，使用逗号隔开，如果浏览器不识别前面的字体，会自动向后识别，中英文会分别进行加载

<p style="font-family: '微软雅黑','Arial';">你好哇nico</p>

三、盒子三属性

盒子的三属性为：width、height、background-color

width：宽带；height：高度；二者常用的属性值都是以px为单位的数值

background-color：属于background系列属性的一种，属性值和color一样分为单词和颜色值表示法

<div style="width:100px;height:100px;background-color:red"></div>

四、CSS样式表

4.1行内样式表

基本语法：

<p style="color:aqua;font-size:18px;font-family:'宋体'">你好哇</p>

引入为止：在标签的style属性中，等号后面的引号内属性CSS样式，多个属性使用分号分隔

4.2内嵌式样式表

基本语法：

复制代码

<!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>Document</title>
    <style>
        div{
            background-color: yellowgreen;
            height: 100px;
            width: 100px;
        }
         p{
            color:rebeccapurple;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            hello
        </p>
    </div>
</body>
</html>

复制代码

书写位置：head标签的内部，title标签的下面，一对style标签内部

4.3 外链样式表

基本语法：

复制代码

<!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>Document</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <div>
        <p>hello</p>
    </div>
</body>
</html>

复制代码

书写位置：head标签的内部，title标签的下面，一个link内部去进行css文件引入
link标签的作用就是引入外部文件，通过href属性，属性值是文件地址
rel属性值如果是stylesheet，代表的就是引入样式表
通过引入css文件到html文件中，从而实现样式的加载

css文件的内部不需要写任何的标签，直接属性css选择器和代码，因为css文件内部是不允许属性HTML骨架的

4.4 导入样式表（了解）

基本语法：

复制代码

<!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>Document</title>
    <style>
        @import url(1.css);
    </style>
</head>
<body>
    <div>
        <p>hello</p>
    </div>
</body>
</html>

复制代码

书写位置：head标签的内部title标签下面style标签内，通过@import进行导入
注意：导入式必须写在style标签的最顶部
url内部是css文件的引入地址

4.5四种样式表的区别和优缺点

样式表的名称	权重	优点	缺点
行内式样式表	最高	权重高，样式设置更精确	第一、结构和样式没有进行分离。第二、不能批量修改样式
内嵌式样式表	大于导入式，等于内外链式	能够将CSS样式和估计进行分离，可以进行批量属性的修改	样式和骨架没有进行完全分离，多个html文件不能使用同一套css代码。
外链式样式表	大于导入式，等于内嵌式	样式和骨架进行完全分离，一份css代码可以重复使用	如果我们写小的demo的时候，每次写外链式比较麻烦，并且看起起来不直观
导入式样式表	最低	样式和骨架进行完全分离，一份css代码可以重复使用	导入式有样式问题，引入导入式涉及到加载顺序，说白了，页面会白一下，体验不好

五、选择器

选择器分为两种，一种是基础选择器，一种高级选择器

基础选择器：标签选择前、id选择器、类名选择器

高级选择器：后代选择器、交集选择器、并集选择器

5.1 标签选择器

选择方法：通过标签名称去选择器

书写方法：标签名

选择范围：HTML文档中所有的同名标签

基本使用：

需要注意的是标签选择器无视嵌套规则，都能进行识别加载

用途：实现全选同名标签，可以设置公共样式
缺点：只能进行全选，不能进行单独的布局样式

5.2id选择器

通过标签上id属性进行选择
书写方法：#id属性值（自定义）
选择范围:只能选中一个标签

基本使用：

id其实就是标签的身份证号，具有唯一性。规定一个页面中不允许有同名id属性
优点：id属性的权重高
缺点：只能实现单选

5.3类名选择器

通过标签上的clas属性进行选择
书写方法：. 匹配对应的class属性值
选择范围：选择所有同名clss属性标签

基本使用：

一个标签的class属性值可以有一个或者多个
多个class属性之间使用空格隔开
同一个对象多个属性，按照哪一个属性确定样式，根据style标签理属性样式的书写位置决定，因为程序从上到下执行

id和class属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线

5.4通配符选择器

书写方法：*
选择范围：选择包含html标签在内的所有标签
通配符*后面添加的样式，每一个标签都会加载一次
我们通常使用清除页面的默认样式

基本使用：

清除页面的默认内外边距

*{
            margin: 0;
            padding: 0;
        }

5.5 后代选择器

书写方法：使用空格连续链接多级选择器
作用：通过标签之间的后代关系去决定选择某个范围内的元素，具有精确匹配性

基本使用：

需要注意的是，后代关系不一定是父子关系，只要是所属关系即可、

.box li{
    color: red;
}

5.6 交集选择器

作用：进行满足所有选择器条件的匹配
书写方法：将多个选择器连接书写，中间没有空格，不需要加任何符号

基本使用：

5.7 并集选择器

并集选择器有‘和’的意思，代表多个标签设置同样的属性
书写方法：将多个选择器使用逗号进行连接，最后一个不能加逗号

选择范围：多个选中标签的集合

我们看下面的结构，要将p标签和div标签里面的文字都设置成红色：

并集选择器非常灵活，可以结合多种选择器使用，就是利用逗号进行分割从而区分属性

<style>

.par li,p{

color: red;

}

</style>

上面的代码指：选择设置class为par里面的li标签和所有p标签的文字颜色为红色

六、CSS的继承性和层叠性

6.1继承性

只需要给祖先元素设置文字属性，后代元素就能加载这个属性，这个特性我们叫做继承性

注意，css可以继承的属性都是关于文字的，比如color，font-size，font-family

6.2层叠性

CSS样式表又叫做“层叠式样式表”，什么是层叠性

一个标签可以被多个选择器选中，并设置对应的属性

如果多个选择器，设置了同一个属性，怎么办？

我们看上图后两个选择器设置的内容被‘杠’掉了，我们叫做被层叠了，这个就是css的层叠性。

我们学习选择器的权重：

id选择器>class类名选择器>标签选择器

如果被多个选择器同时选中，首先看id的，如果没有id的，看class的，如果没有class的，看标签的

案例：

复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 div.box2 #box3 p{
            color: red;
        }   
        #box1 #box2 div.box3 p{
            color: blue;
        }
        #box1 div.box2 .box3 {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>文字</p>
            </div>
        </div>
    </div>
</body>

复制代码

如果遇到复杂的选择器，有两种比较方法

方法一：数选择器：首先将所有的选择器罗列出来，从id选择器比较，如果id选择能比出大小，则数量多的获胜。如果id选择器数量相同或者没有，则比较类名选择器，数量多的获胜。如果类名选择器数量相同或者没有，则比较标签选择器，数量多的获胜，如果所有选择器数量相同，后写的覆盖先写的。

即：例如上面案例的选择器数量分别为：1，2，2 | | 2，1，2 ||1，2，2，因为第二个选择器的id数量最多所以结果为蓝色

方法二：就近原则

上面的案例是所有选择器都选择同一个元素p，所以需要数权重数量

现在如果都没有选中，怎么办？

复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #box1 #box2 {
           color: blue;
       }
       .box1 .box2 .box3 {
           color: purple;
       }
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>文字</p>
            </div>
        </div>
    </div>
</body>

复制代码

如果都没有选择中对应标签，就看谁离得近，离得近的就是被选中的，如果选择的都是同一个元素中，再去数权重

总结：

遇到了复杂的选择器，首先看是否同时选中的一个元素，如果都选择的是同一个元素，则数权重，如果层级不同，比如有的是父亲级别，有的是爷爷级别，使用就近原则，谁离得近听谁的；如果所有的权重一样，选择位置也一样，后书写的覆盖先写的

例如：上面的案例，结果为紫色，因为第二个选择器选到了离文字最近的一层

七、css文字属性的深入

7.1、字体

7.1.1字体颜色

color作用是用来设置文字的颜色

属性值：颜色名、颜色值

颜色值：包含rgb和十六进制

rgb：

rgb模式是三原色（red、green、blue），rgb（红色，绿色，蓝色）逗号分隔每个颜色的色值，每个颜色的取值范围是0-255，一共就组成了1670万种颜色

红色：rgb(255,0,0)；绿色：rgb(0,255,0)；蓝色：rgb(0,0,255)；白色：rgb(255,255,255)；黑色：rgb(0,0,0)

十六进制

十六进制：是将rgb颜色表示法进行了简化

将十进制的0-255颜色表示法替换成了十六进制颜色表示法

0即为00；255即为ff

十六进制就是0-9，a-f

十六进制颜色值的写法：使用#后面加红绿蓝三个颜色的十六进制的二位数写法

红色：#ff0000；绿色：#00ff00；蓝色: #0000ff；白色：#ffffff；黑色：#000000

部分特殊的十六进制是可以简化的，比如黑色#000000可以简化为#000，有些是不能简化的，比如#00ffab这种是不可以简化的

#ff00aa简化为#f0a

#aaffdd简化为#afd

7.1.2字体font-family

作用：设置文字使用哪种字体显示

属性值：必须要用引号包裹，值可以有多个，中间使用逗号隔开

中文字体：微软雅黑的英文表示法： Miscrosoft Yahei ;宋体英文表示法： SmiSum

英文字体：Arial; consolas

工作中关于文字我们是通过设计图获取的，如果设计师没有给你字体，可以自己去获取，通过FW获取

测量方法：使用FW软件，书写一个文字，然后使用文字工具，输入相同的2个或者以上数量的数字，调整大小，调整字体，直到文字完全重合

7.1.3字号font-size

作用是设置文字的大小

属性值:

px为单位：数值是几表示字号显示多少像素

百分比为单位：参考的是继承的字号的百分比

em为单位：数值是几表示继承字号的几倍

7.1.4 行高line-height

定义：文字在一定的高度内垂直居中

属性值：

px为单位：数值是几表示行高就为几像素

百分比：参考的是自身字号的百分比

利用行高的特点，可以设置文字在盒子内垂直居中

7.1.5字体加粗font-weight

作用：设置字体是否进行加粗显示

属性值：单词法，数值法

数值：100-700，以整百为单位表示

单词表示法：normal表示正常的，没有加粗的；bold表示加粗，和数值700是相等的

7.1.6字体样式font-style

作用：用来设置文字是否有倾斜或者斜体

属性值：

normal：正规的，没有倾斜的

italic：斜体的，指的是文字斜体

oblique：倾斜的，与字体无关

工作中用的最多的是italic

font属性综合写法：包含五个单一属性，前两个必须是样式和字体加粗，属性值之间用空格隔开，字号和和行高使用斜杠分隔。字号、行高、字体必须连续书写，顺序不能颠倒，而且必须位于倒数后三个

 font:italic bold 24px/48px "simsun"

7.2文本

7.2.1对齐text-align

作用：用来设置段落的整体水平方向对齐

属性值：left、center、right

7.2.2文本修饰text-decoration

作用：设置文本整体是否有线条修饰

属性值：

none：没有修饰

over line ：上划线

line-through：中划线

under line：下划线

通常使用text-decoration属性取消a的默认下划线

7.2.3缩进text-indent

作用：设置段落首行缩进

属性值：

px单位数值表示：数字是多少代表首行缩进多少像素
百分比表示法：参考标签的父级width属性值的百分比
以em为单位：数字是几表示首行缩进几个中文字符。最常用的设置

八、盒模型

叫框模型、是css的重要布局属性，包含了五个属性，width（宽度）、height（高度）、padding（内边距）、border（边框）、margin（外边距）

盒子的实际加载区域：width+height

盒子可实体化显示区域：width+height+padding+border

盒子实际占位区域：width+height+padding+border+margin

浏览器控制台可以看到盒模型的情况：

8.1宽度和高度、

作用：设置加载内容的区域

宽度：width

高度：height

属性值：

px为单位的数字表示法：数值是多少表示宽度或者高度为多少像素
百分比表示法：参考标签的父级width属性值的百分比

注意的是：如果盒子不设置宽度，会默认撑满父盒子的宽度

如果盒子不设置高度，会默认被内容撑高

8.2内边距padding

作用：设置宽和高到边框的间距

特点：不能加载内容，但是可以加载背景

属性名：padding

属性值：px为单位的数值

padding属性是一个综合属性，可以根据不同方向进行单一属性设置

padding-top:20px; //上
padding-bottom:30px;//下
padding-left:40px;//左
padding-right:50px;//右

我们可以使用padding进行综合书写：

四值法：四个方向分别代表上、右、下、左即顺时针方向一圈：

三值法：三个值分别待变上、左右、下

二值法：两个值分别表示上下、左右

8.3边距

作用：设置盒子的显示边缘（边框）

属性名：border

border属性值有三个值，border是一个综合书写

按照border的属性类型划分三个属性值分别代表：边框宽度：border-width、线形：border-style、线的颜色：border-color

线宽border-width

属性值：类型padding，也有四值法

线型：border-style

属性值：也有四值法

none: 无样式
hidden: 除了同表格的边框发生冲突的时候,其它同none
dotted: 点划线
dashed: 虚线
solid: 实线
double: 双线,两条线加上中间的空白等于border-width的取值
groove: 槽状
ridge: 脊状,和groove相反
inset: 凹陷
outset:凸出,和inset相反

边框颜色border-color

属性值：类型padding，也有四值法

无论是线性还是线厚度还是线的颜色，都可以单一设置某一个方向

先是方向然后是类型

8.4外边距

作用：设置盒子与其他盒子之间的间距

属性名：margin

属性值：完全类似于padding，包括单一写法和复杂写法

8.5盒模型小练习

复制代码

 <style>
        *{
            margin:0;
            padding:0;
        }
        p{
           color:#78902C;
            font-size:14px ;
           font-family:"simsun";
           line-height: 28px;
           text-indent:2em;
           border:1px solid  #78902C ;
           height: 71px;
           width:672px;
           padding: 28px;
           margin:21px 18px;
        }
    </style>

复制代码

8.6盒模型拓展

8.6.1清除默认样式

很多标签都有自己的默认样式，这些默认样式是开发中不需要的，比如h1系列标签的字号加粗，比如p标签的默认边距，比如ul，li的默认小圆点

清除默认样式：

复制代码

body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,th,td,input{
    margin: 0;
    padding: 0;
}
ul,ol{
　　//清除列表前的项目符号
    list-style: none;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
}

复制代码

网站除了需要清除默认样式外，还需要对部分标签或者整体文本进行初始设置

复制代码

/* 设置网页初始默认样式 */
body {
    color: #333;
    font-size: 14px;
    font-family: '微软雅黑','宋体', 'Arial';
}
a {
    text-decoration: none;
    color: #333;
}

复制代码

8.6.2 height属性扩展

一个盒子必须有高度，否则看不到内容样式，高度可以有多个配置内容，比如超出部分，如何显示

如果盒子没有设置高度，则被内容撑高，如果设置了高度，内部高度大于盒子本身的高度，不会被隐藏，会自动超出盒子内容显示

关于高度超出部分，是有属性可配置的

overflow，其作用指的是超出盒子部分怎么显示

属性值：visible可见的，默认的
属性值hidden作用是超出高度部分，隐藏
属性值scroll，作用是给盒子添加滚动条样式，无论文字内容是否超出了盒子，都加滚动条样式
属性值auto，作用是盒子内容超出部分滚动条显示
关于height属性，如果希望盒子自动被内容撑高，可以设置值为auto

8.6.3居中

关于居中，主要有两种，一种是关于盒子的，一种是关于文字的

单行文字：

　　水平居中：使用text-align:center

　　垂直居中，设置line-height的高度和盒子一样高

　　总结：如果需要单行文本水平垂直都居中，设置text-align：center，line-height：盒子高度

多行文字

　　水平居中：还是使用text-align：center

　　垂直居中：盒子不设置高度，上下的padding设置相同的属性

盒子的居中：

　　水平居中：给目标元素设置margin值为auto，即margin：auto

　　垂直居中:和文字类型一样，父盒子不设置高度，设置上下的padding值相同

　　总结：如果设置盒子上下左右都居中的状态，首先子盒子设置margin：0 auto；父盒子不设置高度，而设置上下padding

工作中真正设置垂直居中使用的定位，很少使用padding去挤高度

8.6.4margin塌陷

同方向的margin会有塌陷，margin塌陷通常指的是上下塌陷

在垂直方向上，如果有相遇的margin，两个盒子之间不是属性值的和，而是比较两个盒子谁的margin更大，使用的就是margin值更大的高度

同级盒子margin塌陷

取得是二者margin中较大的值，非二者margin之和

父子元素的margin塌陷现象

父子盒子，如果子盒子设置margin-top，父盒子没有设置或者margin-top的值小于了子盒子，此时会存在margin塌陷的现象

如何解决margin塌陷的现象，如果是兄弟关系，统一都设置一个方向的margin，比如都设置margin-bottom

如果是父子盒子，可以给父盒子加border或者padding，其实这两种方法都不合理，正常情况下都不会使用子盒子去向上踹父盒子，而是使用父盒子加padding

九、标准文档流

开发网页更像写word，因为我们开发网页有自己的书写规律，从上往下，从左往右，前面内容的变化会影响后面内容的位置

以上也是标准文档流的特性

HTML文件就是一种标准文档流文件，也有自己的一些特性

9.1元素类型

从HTML的角度讲元素分为连个级别：容器级和文本级

从CSS的角度的讲将元素分为三种类型：块级元素，行内元素，行内块元素

块级元素

特点：可以设置宽度、高度，元素独占一行

常用的块级元素：div、p、h1-h6，ul，ol，dl等等

行内元素：

特点：文字并排显示，不能设置盒子的宽度和高度

常见的行内元素：span、a、b、u、i等等。

行内块元素：

特点：可以设置宽度和高度，并且盒子也可以并排显示

常见的行内块元素：input、img、table

9.2display显示模式

大部分标签默认的时候都会以各自的显示状态（类型）进行加载，标签的显示状态并不是固定不变的，可以通过css属性display进行切换

display属性值：

block：砖、块的意思，表示标签要以块级元素加载
inline: 行内，表示将标签以行内元素进行加载
inline-block: 行内块，表示将标签以行内块元素进行加载

如果一个网站只有标准文档流，很多效果是不能实现的，如果要实现非标准特点的页面就必须让标签去标准化

让标签脱离标准流的方法：浮动、定位

十、浮动

浮动属性是专门用于进行网页并排布局的

作用：脱离标准文档流，不在受元素等级的限制，又可以并排显示，又可以设置宽和高

float：属性就是设置元素浮动

属性值：left、right，分别为按照缩写顺序靠右浮动和靠左浮动

float: left;

浮动的特性：元素会按照书写的顺序进行依次贴边，同一个父盒子中，既可以设置左浮动，也可以设置右浮动

补充知识点：所有的兄弟元素，如果一个有浮动了，剩下的所有兄弟元素必须都设置浮动

如果浮动元素不设置宽度，不会撑满父盒子，而被内容撑宽

10.1浮动练习

复制代码

<style>
        .out{
            width: 970px;
        }
        .top{
            height: 103px;
            margin-bottom: 10px;
        }
        .top .top1{
            width: 277px;
            height: 103px;
            background-color: red;
            float: left;
        }
        .top .top2{
            height: 103px;
            width: 679px;
            float: right;
        }
        .top .top2 .top21{
            width: 137px;
            height: 49px;
            float: right;
            margin-bottom: 8px;
            background-color: greenyellow;
        }
        .top .top2 .top22{
            width: 679px;
            height: 46px;
            background-color: greenyellow;
            float: right;
        }
        .middle{
            height: 435px;
            margin-bottom: 10px;
        }
        .middle .middle1{
            width: 310px;
            height: 435px;
            background-color: yellow;
            float: left;
            margin-right: 10px;
        }
        .middle .moddle2{
            width: 650px;
            height: 401px;
            background-color: antiquewhite;
            float: right;
            margin-bottom: 10px;
        }
        .middle .moddle2 .middle21{
            width: 190px;
            height: 401px;
            background-color: palevioletred;
            float: right;
            margin-left: 10px;
        }
        .middle .moddle2 .middle22{
            width: 450px;
            height: 401px;
            float: left;
        }
        .middle .moddle2 .middle22 .middle221{
            width: 450px;
            height: 240px;
            margin-bottom:10px;
            background-color: aqua;
        }
        .middle .moddle2 .middle22 .middle222{
            width: 450px;
            height: 110px;
            margin-bottom: 10px;
            background-color: aqua;
        }
        .middle .moddle2 .middle22 .middle223{
            width: 450px;
            height: 30px;
            margin-bottom: 10px;
            background-color: aqua;
        }
        .middle .moddle3{
            width: 650px;
            height: 25px;
            background-color: green;
            float: right;
        }
        .bottom{
            height: 35px;
            width: 970px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="top">
            <div class="top1"></div>
            <div  class="top2">
                <div class="top21"></div>
                <div class="top22"></div>
            </div>
        </div>
        <div class="middle">
            <div class="middle1"></div>
            <div class="moddle2">
                <div class="middle21"></div>
                <div class="middle22">
                    <div class="middle221"></div>
                    <div class="middle222"></div>
                    <div class="middle223"></div>
                </div>
            </div>
            <div class="moddle3"></div>
        </div>
        <div class="bottom"></div>
    </div>
</body>

复制代码

10.2浮动的性质

标准流元素是区分行、块的，浮动是脱离标准流的，那脱离标准流之后，浮动元素有哪些特性

浮动元素，脱离标准流后，既可以设置宽度和高度，也可以会实现并排显示，不区分元素状态即不区分块元素和行内元素

p标签和span标签都设置了宽度和高度，但是由于元素类型的限制，span标签没有宽度和高度、

需要注意的是，兄弟元素如果有一个浮动了，剩下必须都要浮动

如果此时p标签和span标签没有设置宽度和高度，元素的宽度会被内容撑满，不会自动撑满父盒子

10.3依次贴边

如果父盒子的宽度不足以存下所有的子盒子，存放不下的会自动向前寻找，知道空余位置能够存放，从而进行贴边显示

如果父盒子的跨度不够，子盒子会依次贴边，但是如果前面元素中有空隙当前需要贴边的元素不会钻空，不会出现钻空的现象，而之会查询剩余宽度实现依次贴边

4号元素由于贴近3号空隙不够，从而找2号，但是2号被3号挡住了，所以会去找1号进行贴边，不会向上钻空

如果某一个盒子的宽度大于父盒子，会有溢出状态

10.4依次贴边练习

复制代码

<!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>Document</title>
    <style>
        .out{
            width: 940px;
            height: 440px;
            border:1px solid black;
            padding: 10px;
            
        }
        .out .no1{
            width: 300px;
            height: 260px;
            background-color: palevioletred;
            float: left;
        }
        .out .no2{
            width: 240px;
            height: 260px;
            background-color: aqua;
            float:left;
        }
        .out .no3{
            width: 200px;
            height: 130px;
            background-color: yellow;
            float: left;
        }
        .out .no4{
            width: 200px;
            height: 130px;
            background-color: yellowgreen;
            float: left;
        }
        .out .no5{
            width: 200px;
            height: 130px;
            background-color: yellowgreen;
            float: left;
        }
        .out .no6{
            width: 200px;
            height: 130px;
            background-color: yellow;
            float: left;
        }
        .out .no7{
            width: 300px;
            height: 180px;
            background-color: aqua;
            float: left;
        }
        .out .no8{
            width: 160px;
            height: 180px;
            background-color: plum;
            float: left;
        }
        .out .no9{
            width: 160px;
            height: 180px;
            background-color: greenyellow;
            float: left;
        }


    </style>
</head>
<body>
    <div class="out">
        <div class="no1"></div>
        <div class="no2"></div>
        <div class="no3"></div>
        <div class="no4"></div>
        <div class="no5"></div>
        <div class="no6"></div>
        <div class="no7"></div>
        <div class="no8"></div>
        <div class="no9"></div>
        <div class="no8"></div>
        <div class="no9"></div>
    </div>
</body>
</html>

复制代码

10.5浮动的margin塌陷

标准流有margin塌陷的现象

标准流margin塌陷：

浮动流：

总结：浮动元素没有了标准流的margin塌陷现象，各自有各自的margin，不会相互塌陷；

10.6浮动元素让出标准流

标准流中的元素都有自己的一个标准流位置，后面的元素只能在前面元素的后面进行加载

浮动元素脱离了标准流，会让出后面的元素占有自己原来的位置，显示效果上来看，似乎是自己飘起来了，将其称之为脱标

标准流显示;

此时蓝色盒子浮动了，浮动元素需要先加载，否则无法为后面的元素让出位置

10.7字围现象

字围现象：同级元素中，前面元素如果浮动了，后面的标准流会占有前面元素的文字，后面盒子中如果有文字，不会和盒子一样占有前面盒子的位置，而是绕开浮动元素的位置，围绕着加载，实现字围现象。

十一、清除浮动

11.1浮动带来的影响

标准流的盒子，如果不设置高度，会被内容自动撑满，如果盒子内部的元素浮动，子盒子脱标后，不能撑高父盒子，父盒子的告诉就会变为0，导致一些问题。

（1）父盒子不设置高度不能被子盒子撑高

（2）如果父盒子后面还有其他的兄弟标签，并且该兄弟标签内部也有浮动元素，前面的浮动会影响后面的贴边

解决方案：

①清除浮动方案一：height属性

父盒子的高度不能被子盒子撑高，我们可以强制给父盒子设置一个高度，去管理内部的子元素

缺点：父盒子的高度不可以随着子元素变高而增高，如果子盒子是动态的，父盒子还会出现原来的问题，所以使用height属性清除浮动影响只适用于父子都是固定高度的

②清除浮动方案二：clear属性

css有个clear属性，专门清除浮动元素带来的影响

属性值：

left：清除前面左浮动的影响

right：清除前面右浮动的影响

both：清除前面所有浮动的影响

clear属性可以解决当前盒子的浮动影响

缺点：父盒子还是不能被内部元素撑高，父盒子之间的margin显示有问题

③清除浮动方法三：隔墙法

方法：利用clear属性和height属性，制作一堵墙，将两个有浮动的元素父亲隔离起来

墙

解决的问题：父元素位置稳定了，需要的上下间距也解决了

缺点：子盒子还是不能撑满父盒子的高度

④清除浮动方法四：内墙法

方法：通过隔墙法演变而来，将墙放在了两个受影响父元素内部，所有的子元素最后，设置一堵内墙法，设置clear属性

可以解决之前遇到的所有问题（可以给div设置margin将两个标准流父盒子间隔开）

⑤清除浮动方法五：伪类

CSS选择器的一种

复制代码

.clearfix::after {
    content: '';
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

复制代码

将上述代码即一个属性的style设置，将受到浮动影响的元素（此处就是两个父盒子div）都添加上这个clearfix属性即可，clearfix的属性名不是固定的，但是一般叫这个

⑥清除浮动方法六：overflow属性

overflow属性清除浮动影响是一个小偏方，值必须是hidden，可以解决浮动的所有问题

通过overflow属性解决浮动影响的原因：overflow属性有BFC特性，BFC特性有一个特点，设置是该属性的元素就拥有被内部元素撑高的特点

实际工作中，使用内墙法或者overflow属性去解决浮动的影响

十二、a标签的伪类

12.1概念

a标签可以根据用户的不同行为的触发，从而实现四种状态的样式，这四种状态是可以设置的，我们称这四种状态为伪类

复制代码

a:link{
    color: #0f0;
}
a:visited{
    color:#f0f;
}
a:hover{
    color: #ff0;
}
a:active{
    color:#0ff;
}

复制代码

a:link　　　　访问前的状态

a:visited　　　访问后的状态

a:hover　　　鼠标悬停状态

a:active 　　鼠标点击状态

普通元素，非超级链接，也可以设置伪类状态，此时只有两个状态使用，分别是hover和active

伪类选择器：规定一定要先设置好需要的选择器，推荐使用class类名，不会引起冲突，或者使用后代选择器精确匹配，以防打乱页面的布局状态

伪类的权重和普通选择器权重是一样的

12.2书写顺序

a标签有时会有2-3个触发状态，一定按照书写顺序去执行

书写顺序：link、visited、hover、active

总结规律：方便记忆，理解为爱恨准则，love hate

所有的伪类中，最常用的是hover

12.3实际应用

一个实际的页面中，为了保持页面的统一状态，此时会将a标签的访问前和访问后的状态进行统一设置

复制代码

a:link,a:visited{
    color: #666;
}
a:hover{
    color:#f00
}
a:active{
    color: blue;
}

复制代码

实际应用：

复制代码

<!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>Document</title>
</head>
<style>
    ul{
        width: 200px;
        height: 50px;
        background-color: aqua;    
    }
    li{
        width: 40px;
        height: 40px;
        background-color: aquamarine;
        list-style: none;
        float: left;
        margin: 2px;      
    }
    ul li:hover{
        background-color: bisque;
    } 
</style>
<body>
    <ul>
        <li>新闻</li>
        <li>游戏</li>
        <li>学习</li>
        <li>音乐</li>
    </ul>
</body>
</html>

复制代码

十三、背景

在前面的课程中我们学习background-color，作用是给盒子设置背景颜色。其实background是个综合属性

13.1背景颜色background-color

作用：给盒子添加背景颜色