前段基础--CSS

Zoey_Xzy

已于 2023-02-01 18:07:30 修改

阅读量516

点赞数

文章标签： css

于 2023-01-16 21:10:52 首次发布

本文链接：https://blog.csdn.net/2201_75981054/article/details/128708876

版权

本文详细介绍了CSS的基础知识，包括CSS的作用、语法规范、代码风格、基础选择器、字体属性、文本属性、引入方式、Chrome调试工具的使用、Emmet语法、复合选择器、元素显示模式、背景属性以及CSS的三大特性。通过对CSS的理解和实践，能够更好地掌握网页布局和美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS简介

CSS作用

1.主要使用场景：美化网页，布局页面

2.CSS：层叠样式表的简称，也称为CSS样式表或级联样式表，是一种标记语言

3.CSS主要用于设置HTML页面的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

CSS语法规范

1.CSS规则由两个主要部分构成：选择器及一条或多条声明

2.选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

3.属性和属性值以“键值对”的形式出现

4.属性是对指定的对象设置的样式属性，如字体大小等

5.属性和属性值之间用英文“:”分开

6.多个“键值对”之间要用英文“;”区分

7.CSS的相关内容要写在<style></style>里(<style>标签写在<head>中）

CSS代码风格

样式格式书写

紧凑格式

h3 {color: deeppink;font-size: 20px;}

展开格式✓

h3 {

color:pink;

font-size:20px;

}

样式大小写风格

h3 {

color:pink;

}✓

H3 {

COLOR:PINK;

}

样式空格风格

h3 {

color: pink;

}

注意

1.属性值前面，冒号后面，保留一个空格

2.选择器（标签）和大括号中间保留空格

CSS基础选择器

CSS选择器的作用

根据不同需求把不同的标签选出来

1.找到所有标签

2.设置标签样式

选择器分类

基础选择器

基础选择器是由单个选择器组成的

标签选择器

1.标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

2.结构

标签名 {

属性1：属性值1；

...

}

3.作用

标签选择器可把某一类标签全部选择出来

4.优点

能快速为页面中同类型的标签统一设置样式

5.缺点

不能设计差异化样式，只能选择全部的当前标签

类选择器

1.差异化选择不同的标签，单独选一个或某几个标签

2.结构

.类名 {

属性1：属性值1；

...

}（<style>中写）

结构需要用class属性来调用class类的意思

<div class='red'>变红色</div>（在某个标签中加）

3.口诀

样式点定义结构类（class）调用一个或多个开发最常用

4.注意

1）类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，自己命名，但不能用标签名）

2）可理解为给这个标签起了一个名字

3）长名称或词组可以使用中横线来为选择器命名

4）不要使用纯数字、中文等命名，尽量使用英文字母表示，命名要有意义

5.多类名

可以给一个标签指定多个类名，从而达到更多的选择目的

1）多类名使用方式

在标签class属性中写多个类名

多个类名之间必须用空格分开

2）多类名开发中使用场景

可以把一些标签元素相同的样式（共同的部分）放到一个类里面

这些标签都可以调用这个公共的类，然后再调用自己独有的类

id选择器

1.id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义,用id调用

2.结构

#id名 {

属性：属性值1；

...

}

3.口诀

样式#定义，结构id调用，只能调用一次，别人切勿使用

4.id选择器与类选择器的区别

1）类选择器（class）好比人的名字，一个人可有多个名字，一个名字可被多个人使用

2）id选择器好比人的身份证号码，不得重复

3）最大区别在于使用次数上

4）类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，与JS搭配使用

通配符选择器

1.通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）

2.结构

* {

属性1：属性值1；

...

}

3.注意

1）通配符选择器不需要调用，自动给所有元素使用样式

2）特殊情况才使用

CSS字体属性

字体属性用于定义字体系列、大小、粗细和文字样式

字体系列

1.用font-family属性定义文本的字体系列

2.结构

标签名 { font-family:“Microsoft Yahei”；}

3.注意

1）各个字体之间必须使用英文状态下的逗号隔开

2）一般情况下，如果有空格隔开的多个单词组成的字体，加引号

3）尽量使用默认字体

4）常见字体：body {font-family:Microsoft Yahei，tahoma，arial，Hiragino Sans GB；}

字号大小

1.font-size属性定义字体大小

2.结构

p {

font-size: 20px;

}

3.注意

1）px（像素）大小是网页最常用的单位

2）谷歌浏览器默认的文字大小是16px

3)一般要明确字体大小

4）可以给body指定整个页面文字的大小

字体粗细

1.font -weight属性设置文本字体的粗细

2.font-weight:

normal，（400）;bold（700）;bolder;lighter;number（100、200

~900）（数字后不加单位）.

3.用“class”调用

字体样式

1.使用font-style属性设置文本风格

2.结构

p {

font-style: normal;

}

3.一般是将斜体标签（em,i）改为不倾斜字体

字体复合属性

1.格式：

body {

font: font-style font-weight font-size/line-height font-family;

}

2.注意

1）使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，且各个属性之间以空格隔开

2）不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

CSS文本属性

文本颜色

1.color属性用于定义文本颜色

2.结构

div {

color: red;

}

文本对齐

1.text-align属性用于设置元素内文本内容的水平对齐方式

2.结构

div {

text-align: center;

}

文本装饰

1.text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

2.div {

text-decoration: underline;

}

文本缩进

1.text-incent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

2.结构

div {

text-incent: 10px;

}

设置该属性，所有元素的第一行都可以缩进一个给定的长度，长度可为负值

p {

text-incent: 2em;

}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，则会按照父元素的1个文字大小

行间距

1.line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离

2.结构

p {

line-height: 26px;

}

3.行间距包括上间距、文本高度和下间距

CSS的引入方式

内部样式表（嵌入式）

1.内部样式表（内嵌样式表）是写到html内部，是将所有CSS代码抽取出来，单独放到一个<style>标签中

2.结构

<style>

div {

color: red;

font-size: 12px;

}

</style>

3.注意

1）<style>标签理论上可以放在HTML文档的任何地方，但一般会放在<head>标签中

2）通过此种方式，可以方便控制当前整个页面中的元素样式设置

3）代码结构清晰，但没有实现结构与样式完全分离

4）使用内部样式表设定CSS,通常也被称为嵌入式引入

行内样式表（行内式）

1.行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式

2.结构

3.注意

1）style其实就是标签的属性

2）在双引号中间，写法要符合CSS规范

3）可以控制当前的标签设置样式

4）由于书写繁琐，并且没有体现出结构与样式相分离的思想，不推荐大量使用，只有对当前元素添加简单样式的时候，才推荐使用

5）使用行内样式表设定CSS，通常也被称为行内式引入

外部样式表（链接式）

1.实际开发都是外部样式表，适合于样式比较多的情况

核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用

2.引入外部样式表分为两步：

1）新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中

2）在HTML页面中，使用<link>标签引入这个文件

3.结构

使用外部样式表设定CSS，通常也被称为外链式或链接式引入，是常用方式

4.注意

1）.css中只有样式，没有标签

2）新建文件--#名称.css

Chrome调试工具

打开调试工具

打开Chrome浏览器，按F12键或右击页面空白处--检查

使用调试工具

Ctrl+滚轮可以放大开发者工具代码大小
左边是HTML元素结构，右边是CSS样式
右边CSS样式可以改动数值（左右箭头或直接输入）和查看颜色
Ctrl+0复原浏览器大小
如果点击元素，发现右侧没有样式引入，有可能是类名或样式引入错误
如果有样式，但样式前面有黄色叹号提示，则是样式属性书写错误

Emmet语法

Emmet语法的前身是Zen Coding，它使用缩写，来提高html/css的编写速度

快速生成HTML结构语法

生成标签直接输入标签名按tab键
如果想要生成多个相同标签，加上*就可以了，如div*3
如果有父子级关系的标签，可以用>，如ul>li
如果有兄弟级关系的标签，用+就可以了，比如div+p
如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了（.--class;#--id）
如果生成的div类名是有顺序的，可以用自增符号$
如果想要在生成的标签内部写内容可以用{ }表示

快速生成CSS样式语法

基本采取简写形式即可

1.比如w200 按tab 可以生成 width:200px;

快速格式化代码

VScode快速格式化代码：shift+alt+f

也可以设置当我们保存页面时的自动格式化代码：

文件---首选项---设置
搜索emmet.include
在settings.json下的【用户】中添加以下语句：

“editor.formatOnType”:true,

“editor.formatOnSave”:true

只需设置一次即可

CSS的复合选择器

选择器的类型分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

1.复合选择器可以更准确，更高效的选择目标元素（标签）

2.，复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

后代选择器*

1.后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

2.结构

元素1 元素2 {样式声明}

3.注意

1）上述语法表示选择元素1里面的所有元素2（后代元素）

如ul li {样式声明}

2）元素1和元素2中间用空格隔开

3）元素1是父级，元素2是子级，最终选择的是元素2

4）元素2可以是子级，也可以是子级的子级，只要是元素1的后代即可

5）元素1和元素2可以是任意基础选择器

子选择器*

1.子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解为选亲儿子元素

2.结构

元素1>元素2{样式声明}

3.注意

1）上述语法表示选择元素1里面的所有直接后代（子元素）元素2

如：div>p {样式声明}

2）元素1和元素2中间用大于号隔开

3）元素1是父级，元素2是子级，最终选择的是元素2

4）元素2必须是元素1的子级

并集选择器*

1.并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分

2.结构

元素1，元素2 {样式声明}

3.注意

1）上述语法表示选择元素1和元素2

如ul,div {样式声明}

2）元素1和元素2中间用逗号隔开

3）逗号可以理解为和的意思

4）并集选择器通常用于集体声明

伪类选择器

1.伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素

伪类选择器书写最大的特点是用冒号（:）表示，比如:hover

链接伪类选择器

1）1.a:link 选择所有未被访问的链接

2.a:visited 选择所有已被访问的链接

3.a:hover 选择鼠标指针位于其上的链接

4.a:active 选择活动链接（鼠标按下未弹起的链接）

2）链接伪类选择器注意事项

1.为了确保生效，请按照LVHA的循顺序声明:link-:visited-:hover-:active

2.因为a链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独指定样式

实际开发中的写法：

:focus伪类选择器

1.:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

2.结构

input:focus {

background-color:yellow;

}

CSS的元素显示模式

1.作用：利用不同标签的不同特点可以更好布局我们的网页

2.元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，一行可以放多个<span>

块元素

1.常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素

2.块级元素的特点

1）自己独占一行

2）高度、宽度、外边距和内边距都可以控制

3）宽度默认是容器（父级宽度）的100%

4）是一个容器及盒子，里面可以放行内或块级元

3.注意

1）文字类的元素内不能使用块级元素

2）<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

3)同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

1.常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u> 、<span>等，其中<span>标签是典型的行内元素，也称为内联元素

2.行内元素的特点

1）相邻行内元素在一行上，一行可以显示多个

2）高、宽直接设置是无效的

3）默认宽度就是它本身内容的宽度

4）行内元素只能容纳文本或其他行内元素

3.注意

1）链接里面不能再放链接

2）特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下快级模式更安全

行内块元素

1.行内元素中有几个特殊的标签---<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点，称为行内块元素

2.行内块元素的特点

1）和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）

2）默认宽度就是它本身内容的宽度（行内元素特点）

3）高度、行高、外边框和内边距都可以控制（块级元素特点）

元素显示模式转换

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块元素：display:inline-block;

snipaste工具的使用

1.snipaste是一个截图工具，也可以让你将截图贴回到屏幕上

2.常用快捷方式

1）F1可以截图，同时测量大小，设置箭头，书写文字等

2）F3在桌面置顶显示

3）点击图片，alt可以取色（按下shift可以切换取色模式）

4）按下esc取消图片显示

单行文字垂直居中

解决方案：让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中（line-height=height）

CSS的背景

背景颜色

1.background-color属性定义了元素的背景颜色

2.结构

background-color:颜色值;

3.一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色

背景图片

1.background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置

2.结构

background-image: none｜url(图片地址)

背景平铺

1.如果需要在HTML页面上对背景图像进行平铺

，可以使用background-repeat属性

2.结构

background-repeat: repeat｜no-repeat｜repeat-x｜repeat-y

背景位置

1.利用background-position属性可以改变图片在背景中的位置

2.结构

background-position: x y;

参数代表的意思是：x坐标和y坐标，可以使用方位名词或精确单位

参数是方位名词

1.如果指定的两个值都是方位名词，则两个值前后顺序无关，如left top和top left效果一致

2.如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精确单位

1.如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标

2.如果只指定一个数值，那该数值一定是x坐标，另一个值默认垂直居中

参数是混合单位

1.如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景图像固定（背景附着）

1.background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment后期可以制作视差滚动的效果

2.结构

background-attachment : scroll｜fixed

背景属性复合写法

1.为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中

2.简写时没有特定的书写顺序，一般约定顺序为：

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

背景颜色半透明

1.结构

background: rgba(0,0,0,0.3);

2.注意

1）最后一个参数是alpha透明度，取值范围在0~1之间

2）我们习惯把0.3的0省略掉，写为background:rgba(0,0,0,.3);

3)背景半透明是指盒子背景半透明，盒子里面的内容不受影响

CSS的三大特性

层叠性

1.相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题

2.层叠性原则：

1）样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式（后来居上）

2）样式不冲突，不会层叠

继承性

1.CSS中，子标签会继承父标签的某些样式，如文本颜色和字号

2.注意

1）恰当使用继承性，可以降低代码复杂度

2）子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）

行高的继承性

1.结构

body {

font: 12px/1.5 Microsoft YaHei;

}

2.注意

1）行高可以跟单位也可以不跟单位

2）如果子元素没有设置行高，则会继承父元素的行高*1.5

3）若设置了子元素行高，则子元素行高为：当前子元素的文字大小*1.5

4）body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

1.当同一个元素指定多个选择器，就会有优先级的产生

1）选择器相同，则执行层叠性

2）选择器不同，则根据选择器权重执行

2.注意

1）权重是有4组数字组成，但是不会有进位

2）可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推

3）等级判断从左向右，如果某一位数值相同，则判断下一位数值

4）可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，!important无穷大

5）继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

3.权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

1）div ul li ---0,0,0,3

2).nav ul li ---0,0,1,2

3)a:hover ---0,0,1,1

4).nav a ---0,0,1,1

盒子模型***

盒子模型

网页布局

网页布局过程：

1.先准备好相关网页元素，网页元素基本都是盒子box

2.利用CSS设置好盒子样式，然后摆放到相应位置

3.往盒子里面装内容

网页布局核心本质：往盒子里面装内容

盒子模型组成

边框border

1.border可以设置元素的边框

边框有三部分组成：边框宽度（粗细）边框样式边框颜色

2.结构

border: border-width｜｜border-style｜｜border-color

边框样式：solid实线边框 dashed虚线边框 dotted点线边框

3.边框简写：

border: 1px solid red;没有顺序

边框分开写法：

border-top: 1px solid red;(只指定上边框，其余同理 border-bottom)

4.表格细线边框

1）border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框

2）结构

border-collapse:collapse;

3)注意

collapse表示合并

border-collapse:collapse;表示相邻边框合并在一起

5.边框会额外增加盒子的实际大小。解决办法：

1）测量盒子大小的时候，不量边框

2）如果测量的时候包含了边框，则需要width/height减去边框宽度

外边距margin

1.margin属性用于设置外边距，即控制盒子和盒子之间的距离

2.margin的简写方式与padding一致

3.外边距可以让块级盒子水平居中，但必须满足两个条件：

1）盒子必须指定宽度（width）

2)盒子左右的外边距都设置为auto

结构：.header{ width:960px; margin: 0; auto;}

常见写法：1）margin-left: auto; margin-right:auto;

2)margin: auto;

3)margin: 0 auto;

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

4.使用margin定义块元素的垂直外边距时，可能会出现外边距的合并*

1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值

2）嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

可以为父元素定义上边框

可以为父元素定义上内边距

可以为父元素添加overflow:hidden

内边距padding

1.padding属性用于设置内边距，即边框与内容之间的距离

2.padding属性（简写属性）可以有1到4个值

3.给盒子指定了padding后，

1）内容和边框有了距离，添加了内边距

2）padding影响了盒子实际大小

如果盒子已经有了宽度和高度，再指定内边框，会撑大盒子

解决方案：

如果保证盒子和效果图大小保持一致，则让width/height减去多余的内边距大小即可

4.如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小

5.清除内外边距

1）网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。布局前要清除网页元素的内外边距

2）* {

padding:0;

margin:0;

}

3)注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可

实际内容content

PS基本操作

文件->打开：可以打开我们要测量的图片
Ctrl+R：可以打开标尺，或者视图->标尺
右击标尺，把里面的单位改为像素
Ctrl+加号（+）可以放大视图，Ctrl+减号（-）可以缩小视图
按住空格键，鼠标可以变成小手，拖动PS视图
用选区拖动可以测量大小
Ctrl+D可以取消选区，或者在旁边空白处点击一下也可以取消选区

圆角边框*

1.border-radius属性用于设置元素的外边框圆角

2.结构

border-radius:length;

3.radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

4.注意

1）参数值可以为数值或百分比的形式

2）如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或直接写为50%

3）如果是个矩形，设置为高度的一半即可

4）该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

5）分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

盒子阴影*

1.使用box-shadow属性为盒子添加阴影

2.结构

box-shadow: h-shadow v-shadow blur spread color inset;

3.注意

1）默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效

2）盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

1.使用text-shadow属性将阴影应用于文本

2.结构

text-shadow: h-shadow v-shadow blur color;

CSS浮动

浮动

三种传统布局方式（盒子如何进行排列顺序）

普通流（标准流）

1.标准流：标签按照规定好默认方式排列

1）块级元素会独占一行，从上向下顺序排列

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2)行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

常用元素：span、a、i、em等

浮动

1.许多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式

2.浮动的典型应用：可以让多个块级元素一行内排列显示

3.网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

定位

浮动介绍

1.float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

2.结构

选择器 { float: 属性值；}

浮动特性**

1.脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）

2.浮动的盒子不再保留原先的位置

3.如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

4.浮动元素会具有行内块元素特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

注意：1）如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度

2）如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

3）浮动的盒子中间是没有缝隙的，是紧挨着一起的

4）行内元素同理

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

浮动布局注意点

1.浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟元素也应该浮动，以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

常见网页布局

清除浮动

为什么要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

1.父级没高度

2.子盒子浮动了

3.影响下面布局了，应该清除浮动了

清除浮动本质

1.清除浮动的本质是清除浮动元素造成的影响

2.如果父盒子本身有高度，则不需要清除浮动

3.清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动

1.结构：

选择器 {clear:属性值；}

几乎只用clear:both;

清除浮动的策略是：闭合浮动

清除浮动方法

额外标签法（隔墙法）

1.额外标签法会在浮动元素末尾添加一个空的标签，例如<div style=“ clear:both”></div>，或者其他标签（如<br/>等）

2.优点：通俗易懂，书写方便

3.缺点：添加许多无意义的标签，结构化较差

4.注意：要求这个新的空标签必须是块级元素，不能是行内元素

父级添加overflow属性*

1.可以给父级添加overflow属性，将其属性值设置为hidden、auto和scoll

2.优点：代码简洁

3.无法显示溢出的部分

父级添加after伪元素*

1.:after方式是额外标签法的升级版，是给父元素添加

2.优点：没有添加标签，结构更简单

3.缺点：照顾低版本浏览器

父级添加双伪元素*

1.给父级元素添加

2.优点：代码更简洁

3.缺点：照顾低版本浏览器