【html基础】

0.5*

于 2023-02-06 11:35:50 发布

阅读量240

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/y0_55555/article/details/128898831

版权

HTML学习

1.html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。可使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

2. 标签与元素

网页中标签的分类：
按作用分：
块级标签：无论多少内容，在网页中独占一行前后换行，如< div >,< p >,< h1>, < h2 >,< br >

行级标签: 逐个横向摆放，直至不够再换行，如< span >

按单双分：
单标签：通常有一定效果
双标签：通常都是在里面放指定的内容

标签	元素
< p >< /p >	段落标签，一个段落
< a >	链接标签，一个链接
< br >	换行标签，强制换行
< hr>	水平线标签
< ol>< /ol>	有序列表
< ul>< /ul>	无序列表
< dl>< /dl>	定义描述列表
< dt>< /dt>	列表的标题
< dd>< /dd>	列表的描述

1.表格

		<thead>表格页眉</thead>
		<table><!--表格标签-->
			<caption>表格标题</caption>
			<tbody><!--表格主体-->
				<tr><!--定义表格的行-->
					<th>Header</th><!--表头-->
				</tr>
			<tr>
				<td>Data</td><!--定义表格单元-->
			</tr>
			</tbody>
		</table>
		<tfoot>表格页脚</tfoot>

2.表单

HTML 表单用于收集用户的输入信息。表单表示文档中的一个区域，主要用于网页中与用户进行交互，将用户收集到的信息发送到 Web 服务器。可使用标签来创建表单,多用到输入标签 ,输入类型是由 type 属性定义,一般有文本域（text）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等。

标签的属性：

action:表单内容提交到的地址服务器程序等。
method:表单的提交方式，有get和post两种。

表单中的各个组件称为表单元素，重要标签有input，其中的type属性控制元素的性质type可选值：

可选值	说明
text	文本框
password	密码框
hidden	隐藏域隐藏信息但是真实存在
file	文件域
image	图片按钮指定图片位置带有提交功能
radio	单选按钮，将name属性值设一致可控制任选其一
checkbox	复选框，建议name都是一个
reset	重置按钮，重置当前表单数据
submit	提交按钮，提交当前表单信息
button	普通按钮

select-option:下拉框（下拉按钮）
textarea 文本域名多行文本框

其他属性：

属性	取值及说明
name	表单元素的名字，用于以后服务器收集信息
value	用在按钮上表示的按钮的文字用在单选、复选框上表示的是提交是真实的值用在输入型input中表示默认值
placeholder	模拟输入显示删除显示效果
disabled	禁用属性，本来需要属性名与值相等，hmlt5提出只要包含属性即可使用
readonly	只读属性，只能看不能改
checked	默认选中单选或复选的某个按钮

3.css

1. css的使用

css,Cascading Style Sheets。层叠样式表，在HTML中有3种使用方法。

内联样式又叫行内样式- 直接在HTML元素中使用"style" 属性，例如
```
<h2 style="background-color: paleturquoise; color: p ;">标题2</h2>
```
内部样式表 -在HTML文档头部区域使用

2. css选择器

选择器	示例	说明
全局选择器	*{…}	选择设置所有元素
标签选择器	p(span、div){…}	指定标签名
并集选择器	p,span,其他选择器…{…}	选中多个内容
.class(类)选择器	.list{…}	选择所有“class=‘list’”的元素，可以有多个
#id选择器	#box01{…}	选择“id=‘box01’”的元素，独一无二
后代选择器	.list li{…}	选择“class=‘list’”的元素的所有后代元素（其内部）
子元素选择器	.list>span{…}	选择所有父元素有“class=‘list’”的元素
相邻元素选择器	div+p	选择所有相邻的和元素
属性选择器	div[class]	选择所有带有class标签的元素
	ul:nth-child(i){…}	选择每个元素中的第i个子元素
	ul:nth-last-child(i){…}	选择每个元素中的倒数第i个子元素

3. 长度单位

CSS 的长度属性有 width, margin, padding, font-size, border-width等。

数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。

对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

3.1 相对长度单位

指定了一个长度相对于另一个长度的属性。

单位	描述
em	它是描述相对于应用在当前元素的字体尺寸。一般浏览器字体大小默认为16px，则2em == 32px；
	待补充

3.2 绝对长度单位

是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

单位	描述
px	像素 (1px = 1/96th of 1in)
pt	point，大约1/72英寸； (1pt = 1/72in)
cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)

4. 颜色

颜色是由**红（RED），绿（GREEN），蓝（BLUE ）**光线的显示结合。

CSS的颜色可以通过以下方法指定：

十六进制颜色
RGB颜色
RGBA颜色
HSL色彩
HSLA颜色
预定义/跨浏览器的颜色名称

4.1 十六进制颜色

一个十六进制的颜色其组成部分是：＃RRGGBB，RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于00和FF之间。例如，＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。（所有主要浏览器都支持十六进制颜色值。）

4.2 RGB颜色

RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。例如RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（255）而其他设置为0。

4.3 RGBA颜色

RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于**0.0_{1.0（完全透明}完全不透明）**之间的参数。

4.4. 新属性—opacity

opacity可以设置透明度，数值是0.0.—1.0，与RGBA颜色区别是，opacity设置透明度时，背景和字体的透明度一起改变。

5. 伪类

伪类：在某个状态下有某个样式，以超链接为例。

示例	说明
.weilei:link{…}	选择“class=‘weilei’”的元素，设置超链接未点击前的样式
.weilei:hover{…}	选择“class=‘weilei’”的元素，设置鼠标移入时的状态样式（适用于所有标签）
.weilei:active{…}	选择“class=‘weilei’”的元素，设置超链接点击时的样式
.weilei:visited{…}	选择“class=‘weilei’”的元素，设置超链接点击后的样式
input:focus{…}	获取焦点

6. 伪元素

在某个时机下添加的元素。

:before,在元素之前添加内容；:after，在元素之后添加内容。

(在网页检查中鼠标是选不中的，业务在结构中并未真正的添加)

操作：

...
          p:before{
				content: "我们所处的";
				color: palevioletred;
			}
			p:after{
				content: "是世贸中心";
				color: #0000FF;
			}
...
         <p>这里</p>
...

效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v5TcYeAT-1675653954582)(E:\网页设计\md笔记\img\1659002376752.png)]

7. 文字样式

字体属性的简写顺序为：字体风格、粗细、大小、类型，不可调换位置。

属性，说明	属性值	使用
font-family，字体类型	各文字类型名	中文名称使用" "引起来，可写多个，通过顺序查找匹配类型，即若的一个文字类型不支持，顺序往下查找。可后期添加至win系统c盘的fonts文件夹中
font-size,字体大小	px,em	注意大小设置
font-style,字体风格	normal-常规； italic-斜体； oblique-倾斜	斜体使用oblique更明显
font-weight,字体粗细	lighter,light,normal,bold,bolder	可用数值从细到粗100 200 300 400(normal) 500 600 700 900…

8. 文本样式

属性，说明	属性值	使用
color,文本颜色		常见使用十六进制颜色，RGB颜色，RGBA颜色
text-align,样式水平对齐方式	left,right, center,justify	可根据需求设置左，右，中，两端对齐
line-height,行高	数值	数值上下平分（若行高设置为父元素高度可实现垂直居中）
text-indent,首行缩进	数值	根据要求设置
text-decoration,文本修饰	none,underline, overline,line-through	可为文字设置默认，下，上，中划线，超链接去下划线可添加text-decoration：none;来实现
vertical-align,垂直对齐	top,middle,bottom	可设置顶端，居中，底部垂直对齐
letter-spacing，字符间距		单独使用无效
text-shadow,文本阴影	颜色 x轴 y轴模糊半径	x轴朝右为正，y轴朝下为正

扩展：盒子，图片阴影设置:在盒子模型中使用box-shadow属性设置。

在设置阴影时若要四周都要设置，将x,y轴数值归0，然后在模糊半径后添加一个数值，可同时设置4个方向的阴影数值。

9. 列表样式

属性	说明	属性值	使用
list-style-type	列表符号类型	circle,square, disc,declmal,none	列表符号可设置为空心圆，实心方块，实心圆，数字或无
list-style-position	列表符号位置	outside,inside	列表符号位置设置
list-style-image	列表风格图片	url(”图片路径“)	可单独使用
	横列设置	left,数值	通过float+margin-left

10. 背景样式

背景样式简写时，样式顺序无要求，也无必写项，但是大小样式（-size）必须在位置样式（-position）后，而且要用”/“隔开。

属性	说明	属性值	使用
background-color	背景颜色	默认100%	多使用十六进制、GRB、GRBA颜色
background-image	背景图片	url(“图片路径”)	当标签的高，宽小于图片，能显示多少显示多少；若大于则平铺填满；若背景颜色，图片同时使用，图片高于（遮）颜色，若图片为png格式，那么可显示部分颜色
background-repeat	背景图片重复方式	repeat,no-repeat, repeat-x,repeat-y	可设置为平铺，不平铺，沿x轴平铺，沿y轴平铺
background-position	背景图片位置	数值或方向（top,right, bottom,left,center）	1. 通过设置偏移量（x y）来实现； 2. 通过方向两两相用设置（左右，上下不能同用）。若只指定一个方向，第二方向默认为center。
background-size	背景图片大小	x、y数值，cantain,cover	cantain:图片比例不变，将图片在元素中完整展示；cover:图片比例不变，将元素铺满
background-attachment	图片是否随元素滚动	fixed，scroll	fixed:固定，不会移动，固定位置由位置属性决定；scroll：默认，会随着移动
verticsal-align	图文对齐	middle，bottom,top	使用在图片css选择器内，用于改变图片后面的文字位置，通常使用middle值

扩展：背景色渐变

CSS 定义了两种渐变类型：

**线性渐变（**向下/向上/向左/向右/对角线）：定义至少两个色标（可以多个）——十六进制或英文单词，色标是呈现平滑过渡的颜色。还可设置起点和方向（或角度）以及渐变效果。

选择器{
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: linear-gradient(red, yellow);/*默认从上到下由红色过渡到黄色*/
  background-image: linear-gradient(to ringht,red, yellow);/*从左往右过渡*/
 background-image: linear-gradient(to bottom ringht,red, yellow);/*从左上角过渡到右下角*/
}

线性渐变-角度控制：要对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。

值 0deg 等于向上（to top）

值 90deg 等于向右（to right）

值 180deg 等于向下（to bottom）

值 -90deg 等于向左（to left）
线性渐变-使用透明度：使用 rgba() 函数来定义色标。

以下例子表示从左到右由透明过渡到全红色。
```
选择器{
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
```
重复线性渐变：

repeating-linear-gradient() 函数用于重复线性渐变。

以下例子表示从上往下由红色过渡到黄色，再过渡到绿色，在元素内重复10次。其中**4%**控制前两个颜色过渡范围， **10%**控制重复次数。
```
选择器 {
  background-color: red; /* 针对不支持渐变的浏览器 */
  background-image: repeating-linear-gradient(red, yellow 4%, green 10%);
}
```

径向渐变*（由其中心定义）**——待补充

11. 语义化文本补充

上标^{，下标_{，双引号，代码，一大块}}

如何获取对应网站logo

网页检查，寻找行
网址获取，网址**/favicon.ico**
阿里巴巴矢量图库获取

特殊字符：html中有一些特殊符号可以使用对应的HTML代码显示出来，如(注意：后面的分号要统一英文，此处为了显示用了中文)

HTML源代码	显示	说明
&lt；	<	小于号或显示标记
&gt；	>	小于号或显示标记
&amp；	&	可用于显示其他字符
&quot；	"	引号
&reg；	®	关闭符号
&copy；	©	商标注册符号
&trade；	™	商标
&ensp；		半个空白位
&emsp；		一个空白位
&nbsp；		不断行的空白页
；

可参考博客：(86条消息) 网页特殊符号(HTML字符实体)大全_前端向朔的博客-CSDN博客_html 符号

4. 盒模型

盒模型，box model,又叫盒子模型、框模型。即css将页面中所有元素都设置为一个矩形的盒子，设置完成后，对页面的布局变成了对不同盒子的嵌套和摆放。

盒子模型从里到外有content,padding,border,margin ,分别是内容、内边距、边框、外边距。

1. content-内容

显示文本和图片的地方，其中设置的盒子的width和height即是内容的。

2. padding-内边距

又叫内填充，清除内容周围区域，默认透明。内边距的设置会影响盒子的大小，背景颜色会延申到内边距上。

内边距效果默认上下为0，在设置的时候，上、左内边距直接影响，下、右内边距间接影响——跟随盒子内容的位置。
四个方向的内边距设置：

padding-top
padding-right
padding-bottom
padding-left
内边距的简写设置：与边框宽度设置规则一致，通过以下设置来确定内边距的不同效果

padding: 10px 20px 30px 40px;
padding: 10px 30px 40px;
padding: 10px 40px;
padding: 10px;

3. border-边框

盒子模型的边框有宽度、类型、颜色等属性，其中设置是时，要两两同时设置，不然不会显示。

border-width:边框宽度,无设置时默认有3个像素，可以指定4个方向来设置不同方向的边框宽度。

1.1.设置1个值：上右下左边框宽度一致

1.2. 设置2个值：上下、左右

1.3. 设置3 个值：上、左右、下

1.4. 设置4个值：上、右、下、左

1.5. 还可以使用border-xxx-width属性来设置，其中设置上右下左的哪个方向，就在“xxx”分别用上top、right、bottom或left。
borider-color:边框颜色，与边框宽度大致，可以设置4个值，顺序为上右下左。或者使用border-xxx-color来单独设置。
border-style:边框类型，可以设置的值有

3.1. solid，实线

3.2. dashed,虚线、

3.3. dotted,点状虚线

3.4. double,双实线

3.5. 使用none来表示没有边框或去除边框 js用
单个方向设置边框:**border-xxx:**在“xxx”分别用top、right、bottom或left。颜色、宽度和类型设置顺序随意。
边框设置简写——border：宽度颜色类型。

4. margin-外边距

外边距不会影响盒子的大小，但是会影响盒子的位置。

设置模型的外边距时，与内边距大体一致，可以简写设置，也可以单独设置。

1.1. 简写设置外边距——margin：宽度（上右下左）、margin:宽度（上下）宽度（左右）…

1.2. 单个方向设置外边距：

margin-top

margin-right

margin-bottom

margin-left
外边距可以设置为负值，元素向反方向移动。
使用margin的数值——auto，设置当前外边距为最大值。设置左右两边为auto可以让元素在父元素内居中。

5. 盒子模型的垂直方向布局

子元素在父元素的内容区中排列，如果子元素的大小超出了父元素，则会从父元素中溢出，这时可以使用overflow属性来设置父元素如何处理溢出的子元素。可选值：

visible 默认值子元素溢出在父元素外部显示
hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条

6. 垂直外边距的重叠

垂直外边距的重叠指的是相邻的盒子模型的垂直方向发生重叠现象

兄弟元素——盒子A的bottom外边距与盒子B的top外边距重叠。

1.1. 兄弟元素之间的相邻垂直外边距取两者之间的最大的值（正值）。

1.2. 特殊情况——如果相邻的外边距一正一负则外边距取两者的和。

1.3. 特殊情况——如果是相邻的外边距都是负值，则取两者中绝对值较大的。
父子元素——父子元素之间的相邻垂直外边距会发生重叠。子元素的外边距会传递给父元素，从而影响页面布局，需要进行处理。

2.1. 方法1：将子元素和父元素的垂直外边距重叠的区域隔开，比如设置父元素的边框（盒子的大小会加上边框）

2.2. 方法2：使用伪元素来解决——在父元素之前加上一个空的内容但性质为table（边框）——display: table；。
```
.clear:before{
				content: "";  /*加空内容*/
				display: table;
			}
```

7. 清除盒子的默认样式

通常情况，浏览器都会为元素设置一些默认样式，默认样式的存在会影响到页面的布局，在编写网页时必须要去除浏览器默认的样式（pc）。

使用全局选择器去除所有的标签样式。

/*全局选择器去除所有标签样式*/
			*{
				margin: 0px;
				padding: 0px;
			}

在css上方使用link引入清除默认样式，相关css文件如下：

2.1. rest.css,直接去除浏览器的默认样式

2.2. normalilze.css,对默认样式进行了统一。

8. 盒子大小设置

默认情况下，盒子大小=边框宽度+内边距+内容区宽度。也就是在盒子内设置了内容区的width和height后，再设置border-wodth，padding后盒子的大小不再是原来的width和height了。此时可以使用box-sizing属性来设置盒子的大小，属性值有：

content-box; 默认属性，即盒子大小=边框宽度+内边距+内容区宽度。

**border-box;**设置了内容区的width和height后，再设置border-wodth，padding，盒子的大小也还是原来的width和height。

9. 行级元素的盒子模型

行级元素的盒子模型属性设置情况：

行级元素不支持设置高度和宽度。
行级元素可以设置内边距padding，但是垂直方向上的padding不会影响布局，水平方向则可正常设置，也会影响布局。
行级元素可以设置边框border,但是垂直方向上的border不会影响布局，水平方向则可正常设置，也会影响布局。
行级元素可以设置外边距margin,但是垂直方向上的margin不会影响布局，水平方向则可正常设置，也会影响布局。

那么我们怎么设置行级元素的高宽呢？

答：使用display属性来设置元素的显示类型，其中的属性值有：

inline，将元素设置为行级元素，是行级元素的display属性默认值。
block，将元素设置为块级元素，是块级元素的display属性的默认值。
inline-block，将元素设置为行内块元素，即可设置高宽，有可行内逐个摆放。
none,元素不在页面中显示，且不占位置。

拓展：属性visibility设置元素可见状态，

4.1. 属性值为hidden时，元素在页面中隐藏，但是占据页面位置。

4.2. visible 默认值元素在页面中正常显示
table，将元素设置为一个表格。可用来配合伪元素解决垂直外边距情况。

10. 补充：文档流

网页是一个多层结构，一层摞着一层，通过css来分别为每一层设置样式。作为用户，只能看到最顶上的一层。
所设置的标签在网页中的正常排序称为在文档流中，多层网页中最底下的那一层称为文档流。
元素的两种状态：在文档流中；不在文档流中（脱离文档流）

3.1. 在文档流中元素的特点：

**块元素：**在网页中独占一行,自上而下排列。默认情况下，高队被内容撑开，默认宽度是父类宽度的100%，也就是子元素会把父元素撑满。

**行元素：**行内元素不会独占一行，从左到右排列，直到排满换行继续从左到右排列。高度、宽度都是被内容所撑开。

11. border-radius,圆角设置

圆角的设置是设置圆的半径，通过值来指定方向。

单独方向设置。

1.1. border-top-left-radius，

1.2. border-top-left-radius，

1.3. border-top-left-radius，

1.4. border-top-left-radius，

12. 浮动与定位

1. float-浮动与position-定位对比

	float,浮动		position,定位
定义	通过浮动可以使元素向其父元素的左/右侧移动，使用float属性实现。		position是一个更高级的布局手段，可以将元素摆放到页面的任意位置。
可选值	1. none,默认值，不浮动 2. left,向左浮动，元素之间无间隔; 3.right,向右浮动，元素之间无间隔		1. static,默认值，元素是静止的，未开启定位； 2. relative,开启元素的相对定位； 3. absolute,开启元素的绝对定位； 4. fixed,开启元素的固定定位；5. sticky,开启元素的粘滞定位
特点1	元素浮动后会从文档流中脱离，不再占用文档流中的位置，所以浮动元素下面的内容会自动向上移动	relative相对定位	1.开启相对定位元素未脱离文档流， 2.若不设置偏移量，元素不会发生任何改变。 3.相对定位不会改变元素的性质， 4.会提升元素的层级。 5.相对定位参照于元素原来的位置（左上角为原点）进行定位。
特点2	浮动的元素默认不会从父元素中移出，向左右侧浮动时，不会超过前面的其他浮动元素	absolute绝对定位	1.开启绝对定位元素会脱离文档流， 2. 若不设置偏移量，元素位置不会发生改变，但已不占文档流位置，会盖住自动补上来的元素； 3.会改变元素的性质， 4.使元素提升一个层级，5.使块级标签的高宽由内容撑开，使行级元素变成; 6.绝对定位是相对于最近且开启了定位的祖先元素，若祖先都没开启定位，则相对于浏览器窗口进行定位
特点3	若浮动元素上方是一个不浮动元素，则此浮动元素无法上移，而且不会超过上边浮动兄弟元素，最多一样高。	fixed 固定定位	固定定位也是一种绝对定位，但是永远相当于浏览器窗口定位，而且不会随着窗口滑动条滚动。
特点4	浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，可用来设置一些文字-图片环绕效果	sticky 粘滞定位	粘滞定位，与相对定位性质基本一致，不同的是粘滞定位是当元素达到某一个位置才将其固定。
例如：	有三个块级元素1、2、3，若元素1 浮动，元素2、3不浮动，则元素2、3会自动向上移动，且元素2被元素1盖住，但是元素2上的文字不移动，会被元素3的文字盖住。	特例	若父元素开启相对定位，子元素开启绝对定位，四个方向的定位偏移量都设为0，那么此时将外边距margin属性值设置为auto，可以实现垂直居中。
总结	设置浮动可以让页面中的元素水平排列，可用于制作一些水平布局	绝对定位总结：	绝对定位用法——当大盒子已经装满内容，需要再放一个漂浮的元素时，就需要使用定位，通常做法——父元素相对定位不设置偏移量（位置不动），子元素绝对定位（位置不动）

2. 补充-层级

开启定位后，元素的层级有时需要重新设置，使用属性z-index用来指定一个数值，值越大层级越高，但是祖先元素的层级再怎么设置也不会高于后代元素。

3. 补充-cursor,鼠标样式

cursor属性可以设置光标的类型，在鼠标指针悬停在元素上时显示相应样式。

常见样式：default，默认指针，通常是箭头

help，指示帮助

pointer，悬浮于连接上时，通常为手

progress，程序后台繁忙，用户仍可交互 (与wait相反).图标为加载圈和箭头结合。

wait，程序繁忙，用户不可交互 (与progress相反).图标一般为沙漏或者加载圈。

move，被悬浮的物体可被移动,图标是四向箭头

grab，可抓取译者注:grab 和 grabbing 在比较后期才被支持，见浏览器兼容表，图标是小手

no-drop，当前位置不能扔下Windows 或 Mac OS X 中 "no-drop 与 not-allowed 相同.图标是

cursor 属性为零个或多个url()值，它们之间用逗号分隔，最后必填一个关键字值。每个指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值代表的指针类型。

4.补充-高度塌陷

在浮动布局中，父元素高度默认被子元素撑开，当子元素发生浮动后会脱离文档流，无法撑起父元素的高度，导致父元素高度丢失，其下方的元素会自动上移，导致页面布局混乱。
高度塌陷是浮动布局中的常见问题，必须处理，处理方法：

使用clear属性进行清除，可选值：left，清除左边浮动；ringht，清除右边浮动；both,清除两端浮动。

具体用法:

2.1. 在浮动元素后加一个空白的

,并清除两端浮动。

2.2. 使用伪元素
```
    .cleal:after{
    content:"";
    cleal:both;
    display:block;
}
```

将其与解决垂直外边距重叠的方法对比后，可以与之结合，合并成清除垂直外边距重叠，浮动高度塌陷的选择器，具体如下：

   .cleal:after,.cleal:before{
       content:"";
       display:table;
       cleal:both;
   }

13. 字体图标篇

以阿里巴巴矢量图为例：

使用微博登录，之后搜索需要的图标
加入购物车，再加入到项目，并下载到本地。
下载完成之后将除了demo.css,demo-index.css外的其他文件复制到自己的项目中（新键一个css包）。
通过引用其中的iconfont.css即可使用其中的图标文字。

使用方法

5.1. 类名+编码,可通过iconfont类选择器对其进行样式设置，但是因为iconfont.css中已有样式设置，自己进行二次设置时，可使用！impeotant进行重要设置。

<!--1.使用unicode编码+类iconfont-->
		<i class="iconfont" >&#xe600;</i>
		<i class="iconfont green">&#xe605;</i>
		<i class="iconfont" >&#xe602;</i>

5.2. 纯类名，

<!--2.使用纯类名-->
		<i class="iconfont icon-format10"></i>

5.3. 使用伪元素，注意，使用伪元素进行图标的使用时，用content属性引用图标的unicode编码时，将编码前面的“&#x”替换成“\”，例如：“\e600”，然后对其进行样式设置。

<p class="p1">小孩</p>
<p class="p2">树叶</p>
<p class="p3">卡车</p>		
<p class="test"><i class="iconfont icon-format10"></i>你好</p>

对应css如下:

/*为p标签前加入内容*/
			.p1:before{
				content: "\e600";
				font-family: 'iconfont';
				font-size: 30px;
				color: green;
			}
			.p2:before{
				content: "\e602";
				font-family: 'iconfont';
				font-size: 10px;
				color: blue;
			}
			.p3:before{
				content: "\e605";
				font-family: 'iconfont';
				font-size: 20px;
				color: red;
			}
			
			.test:hover{
				color: pink;
			}

14.小细节注意

1. 搜索框的设置

可使用

里使用

注意：在使用时会变的比设置的值大，因为有边框，且有描边

解决：设置border:none;,将边框去掉，使用**box-sizing：border-box;**进行盒子大小控制；

当选中时使用**:focus在其中设置border:none；**,把边框去掉。

2.下拉弹窗

使用定位+动画过渡进行设置。

.nav2-f{
    width:200px;
    height:0px;
    transition: height 0.3s;/*首先设置高是0px,通过transition指定height，过渡时间为0.3秒*/
    position:absolute;
    left:
    top:
}
.nav2-f:hover{
    height:200px;/*该下拉窗口的高度是200px,通过上面的过渡设置，高度以0.3s速度从0过渡到200px*/
}