CSS编程学习笔记

CSS：层叠样式表

网页实际上是一个多层结构，通过css可以分别为网页的每一层来设置样式，而最终我们只是看到网页最上面一层 总而言之，css用来设置网页中元素的样式

使用CSS来修改元素的样式

第一种方式（内联样式 行内样式）

在标签内部 通过style属性来设置元素的样式，不同的属性之间用分号隔开

 例： <p style="color:blue; font-size: 20px;">这是一个p标签</p>

问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中复制一遍并且当样式发生变化时，必须要一个一个的修改，非常不方便。

注意：开发时绝对不要使用内联样式！！！

第二种方式（内部样式表）

将样式编写到head中的style标签里 然后通过css的选择器来选中元素并为其设置各种样式

    <style>
        p{
            color: green;
            font-size: 25px;
            
        }
    </style>

好处：可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用 内部样式表更加方便对样式进行复用

问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

第三种方式（外部样式表）最佳！！

可以将css样式编写到一个外部的.css文件中 然后通过link标签来引入外部.css文件

语法：外部样式表中css语法与内部样式表中style标签中的内容语法一样，只不过用写style标签了

引入

外部样式表需要通过link标签在head标签内进行引用，意味着只要想使用这些样式的网页都可以进行引用，使样式可以在不同页面之间进行复用

例： <link rel="stylesheet" href="./001.css">

将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

CSS语法

style标签里的内容将遵从css的语法

注释语法

/ /

CSS的基本语法：选择器 声明块

选择器：通过选择器可以选中页面中的指定元素 比如p的作用就是选中页面中的所有p元素

声明块：通过声明块来指定要为元素设置的样式 声明块由一个一个声明组成 声明是一个名值对结果

即一个样式名对应一个样式值，样式名和样式值之间以：连接，以；结尾

元素选择器

作用：根据标签名来选中指定元素

语法：标签名{}

例子：

p{
color：red；
}  
div{
color：black；

}  
id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值{}

例：
#box1{
color：red；

} 
#box2{
color：black；

}

标签中需要设置好id属性与对应的id值

    <p id="box1" >这是一个p标签</p>
    <p id="box2" >这是一个p标签</p>
类选择器

作用：根据元素的class属性值选中一组元素

语法：.class属性值{}

class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组

可以同时为一个元素指定多个class属性 如：class=“box box1” 中间用空格隔开

例：
<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>
    .box{
        color:red;


    }
    .box1{
        font-size: 50px;
    }
 </style>

</head>
<body>
    <p class="box" >这是一个p标签</p>
    <p class="box box1" >这是一个p标签</p>

</body>
</html>
通配选择器

作用：选中页面中的所有元素

语法：*{}

复合选择器

交集选择器

作用：选中同时复合多个条件的元素

语法：选择器1选择器2选择器3选择器n{}

注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头如：div.red{}如果没有就是无所谓 如.red.blue{} 

<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>
    .box{
        color:red;

    }
    div.box{
        font-size: 50px;
    }
 </style>

</head>
<body>
    <p class="box" >这是一个p标签</p>
    <div class="box" >这是一个p标签</div>

</body>
</html>
并集选择器（选择器分组）

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器3，选择器n{}

例：
<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>
    p,div{
        color: red;
    }
 </style>

</head>
<body>
    <p >这是一个p标签</p>
    <div  >这是一个p标签</div>

</body>
</html>

关系选择器

父元素：直接包含子元素的元素叫做父元素

子元素：直接被父元素包含的元素是子元素

祖先元素：直接或间接包含后代元素的元素叫做祖先元素

一个元素的父元素也是它的祖先元素

后代元素：直接或间接被祖先元素包含的元素叫做后代元素

子元素也是后代元素

兄弟元素：拥有相同父元素的元素是兄弟元素

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素

例子：div>span{}

后代元素选择器

作用：选中指定元素内的指定后代元素

语法：祖先空格后代

例子:div span{}

兄弟选择器

选择下一个兄弟

语法：兄+弟

选择下边所有兄弟

语法：兄~弟

属性选择器

[属性名]选择含有指定属性的元素

<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>
        p[title]{
            color: red;

        }
 </style>

</head>
<body>
    <p title="abc">第一个</p>
    <p title="abcdef">第二个</p>
    <p title="hello">第三个</p>
    <p>第四个</p>

</body>
</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>
        p[title=abc]{
            color: red;

        }
 </style>

</head>
<body>
    <p title="abc">第一个</p>
    <p title="abcdef">第二个</p>
    <p title="hello">第三个</p>
    <p>第四个</p>

</body>
</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>
        p[title^=abc]{
            color: red;

        }
 </style>

</head>
<body>
    <p title="abc">第一个</p>
    <p title="abcdef">第二个</p>
    <p title="hello">第三个</p>
    <p>第四个</p>

</body>
</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>
        p[title$=c]{
            color: red;

        }
 </style>

</head>
<body>
    <p title="abc">第一个</p>
    <p title="abcdef">第二个</p>
    <p title="helloc">第三个</p>
    <p>第四个</p>

</body>
</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>
        p[title*=c]{
            color: red;

        }
 </style>

</head>
<body>
    <p title="abc">第一个</p>
    <p title="abcdef">第二个</p>
    <p title="helloc">第三个</p>
    <p>第四个</p>

</body>
</html>

伪类选择器（不存在的类，特殊的类）

伪类用来描述一个元素的特殊状态

比如：第一个子元素，被点击的元素，鼠标移入的元素

伪类一般情况下都是使用：开头

例 ： ：first-child第一个子元素

：last-child最后一个子元素

：nth-child（）括号中填选中第n个子元素 n的范围为0-正无穷 2n或even表示选中偶数位的 2n+1或 odd表示选择奇数位的

以上这些伪类都是根据所有子元素进行排序

例：<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>
        ul>li:first-child{
            color: red;
        }
        ul>li:last-child{
            color: white;
        }
        ul>li:nth-child(3){
            color: green;

        }
        ul>li:nth-child(2n){
            font-size: 50px;
            
        }

 </style>

</head>
<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

</body>
</html>

：first-of-type

：last-of-type

：nth-of-type()

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

：not（）否定伪类

将符合条件的元素从选择器中去除

<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>
     
        ul>li:not(:nth-child(3)){
            color: green;

        }

 </style>

</head>
<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

</body>
</html>
a元素的伪类
超链接的伪类

：link用来表示没访问过的链接（正常链接）

：visited用来表示访问过的链接 由于隐私的原因所以visited这个伪类只能修改链接的颜色

<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>
        a:link{
            color: rgb(74, 70, 70);
        }
        a:visited{
            color: red;
            
        }

 </style>

</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.bilibili.com">哔哩哔哩</a>

</body>
</html>
鼠标移入的状态伪类

：hover{}

鼠标点击的状态伪类

：active{}

<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>
    p:hover{
        font-size: 50px;
    }
    div:active{
        color:red;
    }

 </style>

</head>
<body>
    <p>P标签</p>
    <div>div标签</div>

</body>
</html>

伪元素选择器（）

伪元素：表示页面中特殊的并不真实的存在元素（特殊的位置）

伪元素使用： ：：开头

：：first-letter 表示第一个字母

：：first-line 表示第一行

：：selection 表示选中的内容

before和after必须结合content属性来使用

：：before 元素的开始位置

：：after 元素的最后位置 

<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>
    p::first-letter{
        color: red;
    }
    p::first-line{
        color: yellow;
    }
    p::selection{
        color: green;
    }
    div::before{
        content: 'aaaa';
        color: blue;
    }

 </style>

</head>
<body>
    <p>P标签sjdapdjpawojdowaajpoijwodjhapwhdip
        <br>
        wahdipawhdipwahdipahwdpiwhadpiaowpdhaiopwdhwipadhwpaidhipwadhpwahdp</p>

    <div>div标签</div>

</body>
</html>

继承

样式的继承，我们为一个元素设置的样式同时会应用到它的后代元素上（或子元素）

继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有元素都具有该样式。

注意：并不是所有的样式都会被继承；比如 背景相关的，布局相关等这些样式都不会被继承

选择器的权重

样式冲突 当我们通过不同选择器，选中相同元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突。

发生样式冲突时，应用那个样式由选择器的权重（优先级）决定

选择器权重优先级

1.内联样式 1000

2.id选择器 100

3.类和伪类选择器 10

4.元素选择器 1

5.通配选择器 0

6.继承样式 没有优先级权重

可以在某一个样式的后面添加！important，则此时该样式会获取到最高的优先级，高过内联样式

注意：在开发中这个玩意慎用！！

例 p{ color：red ！important；}

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

选择器的累加不会超过其最大的数量级

例：类选择器再高也不会超过id选择器

如果优先级计算后相同，此时则优先使用靠下的样式

单位

长度单位：

1.像素（px）

屏幕（显示器）实际上是由一个个的小点点构成的

不同屏幕的像素大小是不同的，像素越小屏幕显示的效果越清晰

2.百分比

也可以将属性值设置为相对于其父元素的百分比

设置百分比可以使子元素跟随父元素改变而改变

3.em

em是相对于元素的字体大小来计算的 em会根据字体大小的改变而改变

1em=1font-size

一般字体的默认像素是16px那么1em就是16px

4.rem

rem是相对于根元素（html）的字体大小来计算

颜色单位

在CSS中可以直接使用颜色名来设置各种颜色 比如：red orange yellow blue green........ 但是非常不方便

RGB值：RGB通过三种颜色的不同浓度来调配出不同的颜色 R：red G：green B：blue

每一种颜色的范围在0-255（0%-100%）之间

语法：rgb（红色，绿色，蓝色）

RGBA值：就是在RGB的基础上加了一个A（阿尔法值）不透明度

1表示完全不透明 0表示完全透明 .5表示半透明

语法：rgba(红色，绿色，蓝色，不透明度)

十六进制的RGB值：

语法：#红色绿色蓝色

颜色浓度听过00-ff

如果颜色都是两位两位重复可以进行简写 例=：#aabbcc可简写为：#abc

HSL值和HSLA值 与RGB值和RGBA值相似

H：色相 （0-360）

S：饱和度 （0%-100%）

L：亮度 （0%-100%）

布局

文档流（normal flow）

网页是一个多层的结构，一层盖着一层 通过css可以为每一层设置样式，而作为用户来讲只能看到最上面一层 这些层中，最地下的一层为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排序的。

对我们来说，元素有两个状态

1.在文档流中

2.不在文档流中（脱离文档流）

元素在文档流中有什么特点：

1.块元素 ：会在页面中独占一行 默认宽度是父元素的全部（会把父元素撑满）默认高度是被内容（子元素）撑开

2.行内元素：行内元素不会独占页面一行，只会占自身的大小 行内元素在页面中从左到右水平排列，如果一行之中不能容纳下所有行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）行内元素的默认宽度和高度都是被内容撑开；

盒模型（框模型 box model）盒子的可见框的大小由内容区 内边距 边框三者共同决定

css将页面中的所有元素都设置为了一个矩形的盒子

将元素设置为盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

每一个盒子都由以下几个部分组成：

1.内容区（content）元素中的所有子元素和文本内容都在内容区中排列

内容区的大小由width和height两个属性来设置 width设置内容区的宽度 height设置内容区的高度

2.边框（border） 边框属于盒子的边缘，边框里面属于盒子的内部，边框以外是盒子的外部 边框的大小会影响到整个盒子的大小

要设置边框至少需要设置三个样式；

边框的宽度 border-width 不写会有一个默认值，一般都是3个像素 指定四个方向的边框的宽度

四个值的前后顺序是顺时针旋转也就是：上 右 下 左

如果只写三个值：上 左右 下 只写两个值 ： 上下 左右

当然除了border-width还可以用 border-xxx-width xxx可以是: top right bottom left 用来单独指定某一个边的宽度

边框的颜色 border-color 不写也会有一个默认值 自动使用color值一般为黑色 同样可以分别指定四个边的边框颜色 规则和border-width相同

边框的风格 border-style

solid表示实线 dotted表示点状虚线 dashed 正常虚线 double 双线

同理可以分别给四个方向边框设置边框风格 border-style的默认值是none 表示没有边框

border简写属性，通过该属性可以同时设置边框的所有相关样式，并且没有顺序要求

例： border：solid 10px red；

除了border：写法以外同样还有四个border-xxx

border-top

border-right

border-bottom

border-left

3.内边距（padding）内容区和边框之间的距离 内边距的设置会影响盒子的大小 背景颜色会默认和内容区一致

一共有四个方向的内边距 padding的语法规则同上

padding-top

padding-right

padding-bottom

padding-left

4.外边距（margin）外边距不会影响盒子的可见框的大小 但是外边距会影响盒子的位置

元素在页面中是按照自左向右的顺序排列的 所以默认情况下，如果我们设置的是左和上的外边距会移动元素自身，而设置右边距和下边距会移动其他元素

margin也是有四个方向的外边距 margin也是可以设置负值 负值是元素往正值相反的方向移动

margin-top 上边距，设置一个正值元素会向下移动

margin-right 右边距默认情况下设置是没有任何效果的

margin-bottom 下外边距，设置一个正值其下边的元素会向下移动

margin-left 左边距，设置一个正值，元素会往右边移动

简写属性写法和padding一样

元素的水平方向的布局

元素在其父元素的中的水平方向的位置由一下几个属性共同决定

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

一个元素在其父元素中，水平布局必须满足一下等式

margin-left+border-left+padding-left+width+margin-right+padding-right+border-right=其父元素的内容区的宽度（必须满足！！） 如果等式不成立则称为过度约束，则等式会自动调整如果这七个值没有auto（自动）的情况 浏览器会自动调整margin-right值以使等式满足

七个值之中有三个值可以设置为auto

width width如果本身没有去写具体值默认是auto

margin-right

margin-left

如果某个值为auto，则会自动调整为auto的哪个值以使哪个值成立

如果将width和一个外边距设置为auto，那么则会认为将width设置为auto 而那个外边距为0

如果将三个值都设置为auto，那么认为设置width为auto其他两个外边距为0 也可以说width 的优先级最大

如果将两个外边距设置为auto 宽度为固定值，则会将外边距设置为相同的值均分（所以我们经常利用这个特点来使一个元素在其父元素中水平居中）

元素的垂直方向的布局

默认情况下父元素的高度被内容撑开

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出

使用overflow属性来设置父元素如何处理溢出的子元素

可选值：

visible：默认值 子元素会从父元素中溢出，在父元素外部的位置显示

hidden：溢出的内容将会被裁减不会显示（一剪没）

scroll：生成两个滚动条，通过两个滚动条，通过滚动条件来查看完整的内容

auto：根据需要生成滚动条

overflow-x：单独处理水平方向

overflow-y：单独处理垂直方向

外边距的折叠

垂直外边距的重叠（折叠）

相邻的垂直方向外边距会发生重叠现象

兄弟元素：

兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）

特殊情况：

如果相邻的外边距一正一负，则取两者之和

如果相邻的外边距都是负值，则取两者中绝对值较大的

兄弟元素之间的外边距的重叠对于开发是有利的所以我们不需要进行处理

父子元素：

父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）

父子外边距的折叠会影响页面的布局，必须要进行处理

行内元素的盒模型

行内元素不支持设置宽度和高度

行内元素可以设置padding，但是垂直方向padding不会影响页面布局（不会顶开）

行内元素可以设置border，但是垂直的border不会影响页面布局 （不会顶开）

行内元素可以设置margin，垂直方向不会影响布局（不会顶开）。

display用来设置元素显示的类型

可选值：

inline 将元素设置为行内元素

block 将元素设置为块元素

inline-block 将元素设置为行内块元素 既可以设置宽高，又不会独占一行

table 将元素设置为一个表格

none 元素不在页面中显示（不再占据页面的位置）

visibility 用来设置元素的显示状态

可选值：

visible 默认值，元素在页面中正常显示

hidden 元素在页面中隐藏，不显示（但仍然占据页面的位置）

默认样式：通常情况下，浏览器都会元素设置一些默认样式

默认样式的存在会影响到页面的布局，通常情况下，编写网页时必须要去除浏览器默认样式（一般对于PC端页面）

快速去除大部分默认样式写法

*{ margin：0；

padding：0；

}

或者引入重置样式表：专门用来对浏览器的样式进行重置

reset.css 专门去除了浏览器的默认样式

normalize.css 对默认样式进行了统一

list-style：none（去取项目符号）
要想让一个文字在父元素中垂直居中，只需将父元素的line-height设置为一个和父元素height值一样即可

盒子的大小

默认情况下可见盒子大小由内容区，内边距，边框共同决定

box-sizing 属性 用来设置盒子尺寸的计算方式（设置width和height的作用范围）

可选值：

1.content-box 默认值，宽度和高度用来设置内容区的大小

2.border-box 宽度和高度用来设置盒子整个的可见盒子的大小（即内容区+内边距+边框的总大小）

轮廓 阴影和圆角

轮廓

outline 用来设置元素的轮廓线，用法和border一模一样

和边框的不同点：轮廓不会影响可见框的大小，不会影响页面的布局

阴影

box-shadow：用来设置元素的阴影效果，阴影不会影响页面的布局

写法 box-shadow：10px（左侧偏移量，设置阴影的水平位置，正值向右移动负值向左移动） 10px（垂直偏移量，正值向下偏移，负值向上移动）10px（设置阴影的羽化值（阴影的模糊半径）） 颜色（阴影颜色 颜色一般会使用rgba来设置）；

圆角

border-radius 10px（左上） 20px（右上）30px（右下） 40px（左下）

三个值（左上）（右上左下）（右下） 两个值（左上右下）（右上左下） 通过斜杠 10px/20px来分别设置垂直半径和水平半径

border-top-left-radius：10px（即给左上角设置垂直半径为10px）20px（即给左上角设置水平半径为20px） 若只设置一个值 则默认水平和垂直半径相同

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

将元素设置为一个圆形

border-radius：50%

浮动 （float）通过浮动可以使一个元素向其父元素的左侧或右侧移动

使用float属性来设置子元素的浮动

可选值：

none 默认值，不浮动

left 元素向左浮动

right 元素向右浮动

注意：元素设置浮动以后，水平布局的等式便不需要强制成立了

元素设置浮动后，元素，会完全从文档流中脱离，不在占用文档流的位置，元素下方还在文档流中的元素会自动向上移动

浮动的特点

1.浮动元素会完全脱离文档流，不在占据文档流中的位置

2.设置浮动以后元素会向父元素的左侧或者右侧移动

3.浮动元素默认不会从父元素中移出

4.浮动元素不会盖住或超过其他浮动元素，而是自动

5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法浮动上去而是在其下方排列

6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高

7.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。

8.元素设置浮动只后，将会从文档流中脱离，从文档流中脱离以后，元素的一些特点也会发生变化

脱离文档流的特点：

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

行内元素：会变成块元素，特点和块元素一样，同样可以设置宽高了

换句话说，脱离文档流以后，不需要再区分块和行内元素了

高度塌陷问题

在浮动的布局中，父元素的高度默认是被子元素撑开的，当子元素浮动以后，其会被完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其以下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须进行处理！

BFC（Block Formatting Context）块级格式化环境

BFC是CSS中一个隐含的属性，可以为一个元素开启BFC 开启后该元素会变成一个独立的布局区域

元素开启BFC后的特点：

1.开启BFC的元素不会被浮动元素所覆盖

2.开启BFC的元素 子元素和父元素外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC

1.设置父元素的浮动（不推荐）

2.将元素设置为行内块元素（不推荐）

3.将元素的overflow设置为一个非visible的值 （常用方式，为元素overflow设置为hidden开启其BFC以使其可以包含浮动元素）

clear属性

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素产生的影响

作用：清除浮动元素对当前元素所产生的的影响

可选值：

1.left 清除左侧浮动元素对当前元素的影响

2.right 清除右侧浮动元素对当前元素的影响

3.both 清除两侧中最大影响的那侧

原理：设置清除以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

高度塌陷的最终解决方案

通过采用clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题，当你遇到这些问题时直接采用clearfix样式即可

.clearfix ：：before，.clear：：after{

content：‘’；

display：table；

clear：both；

}

定位（position）

定位是一个更加高级的布局手段 通过定位我们可以将一个元素摆放到页面的任何位置

使用position属性来设置定位 可选值：

1.static默认值，元素是静止的没有开启定位

2.relative 开启元素的相对定位

3.absolute 开启元素的绝对定位

4.fixed 开启元素的固定定位

5.sticky 开启元素的粘滞定位

相对定位：当元素的position的属性值设置为relative时则开启的元素的相对定位

特点：

1.元素开启相对定位时如果不设置偏移量，元素不会发生任何变化

2.相对定位是参照于元素在文档流中的位置进行定位的

3.相对定位会提升元素的层级

4.相对定位不会使元素脱离文档流

5.相对定位不会改变元素的性质 块还是块 行内还是行内

偏移量（offset）

当元素开启定位以后，可以通过偏移量来设置元素的位置

top：定位元素和定位位置上边的距离

bottom：定位元素和定位位置下边的距离

定位元素垂直方向的位置由top和bottom两个属性来进行控制通常情况下我们只会使用其中一个

top值越大，定位元素越往下移动 bottom值越大，定位元素越往上移动

left：定位元素和定位位置左边的距离

right：定位元素和定位位置右边的距离

定位元素垂直方向的位置由left和right两个属性来进行控制通常情况下我们只会使用其中一个

left值越大，定位元素越往右移动 right值越大，定位元素越往左移动

绝对定位：当元素的position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位的特点：

1.开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化

2.开启绝对定位后，元素会从文档流中脱离

3.绝对定位会改变元素的性质，块内变成行内，块的宽高被内容撑开

4.绝对定位会提升元素的层级

5.绝对定位是相对于其包含块

包含块（containing block）

正常情况下：包含块就是离当前元素最近的祖先元素

绝对定位的包含块：包含块就是利他最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则根元素就是它的包含块

html（根元素，初始包含块）
固定定位：将元素的position属性设置为fixed则开启了元素的固定定位

固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样

唯一不同的是固定定位永远是参照于浏览器的视口进行定位

粘滞定位：当元素的position属性设置为sticky时则开启了元素的粘滞定位

粘滞定位和相对定位的特点基本一致

不同的是粘滞定位可以在元素到达某个为主时将其固定

animation

transition过渡

通过过渡可以指定一个属性发生变化时的切换方式 比如一个模块从小变大不再是一下变化而是逐渐变大

通过过渡可以创建一些非常好的效果，提升用户的体验 

过渡的一些属性

1.transition-property：指定要执行过渡的属性 比如：width height等等 多个属性间需要使用逗号隔开，如果所有属性都需要过渡则 使用all关键字，大部分属性都支持过渡，注意，过渡时，必须是从一个有效值向另一个有效值进行过渡

2.transition-duration：指定过渡效果的持续时间，就是这个过渡要通过多久完成 可以通过隔开对属性过渡分别指定时间 对应方式 是根据指定属性时的顺序来对应的

3.transition-timing-function：过渡的时序函数 指定过渡的执行方式 可选值：ease 为默认值，先加速再减速 linear 匀速运动

ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速后减速

也可以用cubic-bezier(, , , ,) 进行指定 [可以在网上进行搜索https：//cubic-bezier.com]

也可以用steps(参数一，参数二) 分步执行过渡效果 这种比较僵硬不太流畅 第一个参数表示分几步第二个参数 可以设置为 end(默认值)在时间结束时执行或start 在时间开始时执行

4.transition-delay：表示过渡效果的延迟，等待相应的时间后再开始执行过渡

写transition 就可以同时设置过渡相关的所有属性，只有属性的顺序没有太大要求 只有一个要求 如果要写延迟则两个时间中第一个时间是持续时间，第二个时间才是延迟时间

最后修改：2023 年 08 月 25 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏