html5+css3总结

最新推荐文章于 2024-08-01 09:59:14 发布

博然了无痕

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量1.2w

点赞数 14

分类专栏： html5 css3

本文链接：https://blog.csdn.net/sencong/article/details/81308888

版权

html5 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

1	1.前端组成 2.语义化理解 3.html标准语法 4.html注意的问题 5.字符实体	13	1.注释的写法 2.注释的作用	25	颜色的设置方法	37	浏览器内核
2	单、双标签的划分	14	1.css文件的引入方式 2.两种外部引入的比较 3.引入方式的权重	26	XHTML： 1.文档结构 2.元素语法 3.属性语法	38	兼容
3	html与body的说明	15	链接： 1.鼠标的变化 2.语法 3.锚点 4.伪类选择器	27	表单： 1.原有表单格式 2.现有表单格式 3.表单的属性列表 4.新增的标签 5.datalist与select的区别 6.get与post的区别 7.常见的输入类型和兼容情况	39	BFC
4	单标签（空元素）	16	图片： 1.语法 2.路径 3.路径的解释 4.取消默认边框和空隙	28	1.html5新增的标签 2.对html5的理解	40
5	html的元素类型	17	1.表格的说明 2.注意情况 3.表格合并	29	媒体： 1.视频格式 2.声音格式 3.使用方法	41
6	块级元素的空行	18	表格新增的属性和标签	30	css选择器的权重	42
7	行内元素的属性	19	布局的方法	31	css属性大纲	43
8	改变文本的方向	20	padding	32	单行文本溢出的方法	44
9	heading 标签	21	margin	33	浮动float	45
10	p标签	22	背景图： 1.基本语法 2.gif，png，jpg区别 3.精灵图 4.图片整合 5.滑动门技术	34	定位position	46
11	平时的引用标签	23	边框	35	宽高自适应	47
12	计算的代码元素	24	1.地址属性 2.url的加载过程	36	隐藏元素的方法	48

ss样式：

@charset "utf-8";

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,table,tr,td,th{margin:0;padding:0}

*{ box-sizing:border-box;}

ul,ol,li{list-style:none;}

b,strong{font-weight:100;}

em,i{font-style:normal;}

h1,h2,h3,h4,h5,h6{font-weight:100;font-size:16px;}

a,u{text-decoration: none;}

input{outline:none;}

img{display:block;border:0;}

html,body{height:100%;}

body{font-family: "微软雅黑";}

.clear_fix:after{content:".";height:0;clear:both;display:block;visibility:hidden;overflow: hidden;zoom:1;}

1. HTML 指的是超文本标记语言 (Hyper Text Markup Language),不是一种编程语言

（1）前端页面由三部分组成：

html超文本标记语言（结构），描述网页的语义含义
css层叠样式表（表现），构建网页中的样式
js客户端脚本语言（行为），对事件的操作

（2）语义化的理解：

页面的内容结构化，便于对浏览器、搜索引擎解析。
即使没有css文件的情况下，也以一种文档格式存在，并且容易阅读
搜索引擎的爬虫根据标记来确定上下文和各个关键字的权重，便于SEO
使得阅读源代码的人更容易将网站进行分块，便于阅读理解和维护

（3）html文件的语法：（hyper text markup language）

doctype作用：不是标签，只是声明文档类型，说明一下html文档是用哪个版本编写的。

混杂模式：doctype不存在或格式不正确，在doctype前加入XML声明。

严格、标准模式：申明正确的DTD（文档类型语法规则）

<!doctype html>

<html>

<head>

<title></title>文档的标题

<base href="地址"/>为全网页指定默认的链接地址

或<style type="text/css">外部、内部引入css文件

@import url（地址）

</style>

</head>

<body>

页面内容

</body>

或<script type="text/javascript">内部写入js文件

js操作内容

</script>

</html>

（4）在html文件中应注意的问题：

双标签注意闭合
标签名使用小写
img最好不要加链接，同时最好不要加边框，用padding撑开
不要使用"<",">"这样的符号，应使用字符实体：

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
'	撇号	' (IE不支持)
￠	分（cent）	¢
£	镑（pound）	£
¥	元（yen）	¥
€	欧元（euro）	€
§	小节	§
©	版权（copyright）	©
®	注册商标	®
™	商标	™
×	乘号	×
÷	除号	÷

2. 标签分为单标签和双标签，其中双标签又分为开放标签和闭合标签

单标记：<标记属性=“属性值”/>

双标记：<标记属性=“属性值”，属性=“属性值”></标记>

>单标签（空元素）：br、hr、img、link、meta、input

>双标签：a，heading，div，span……

3. html与 /html 之间的文本描述网页，<body> 与 </body> 之间的文本是可见的页面内容

4. 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。——单标签

5.html的元素类型：

html元素类型	行内元素	块状元素	行内块元素
特征 1	一行显示	换行显示	一行显示
特征 2	宽高无效	可设宽高	可设宽高
特征 3	margin上下无效，padding有效	margin、padding都可设	margin、padding都可设

>行内元素：br，sup，sub，strong，b，i，a，span，em，u

>块状元素：hr，div，heading，ul，ol，li，dl，dt，dd，p，table，form，pre，address

pre：预格式文本保留了空格和换行，用来输出代码

address:用于编写地址内容，默认字体为斜体字

>行内块元素：button，img，input，textarea，bdo

6. 在html中，自动地在块级元素前后添加一个额外的空行，此时margin：0；padding：0来取消

7.在行内标签中可以设置哪些属性：style、title（显示额外信息）、id、class

8.改变文本的方向（将两个属性都写在dbo这个标签中）：

direction：up，down，right，left，rtl，ltr，normal只是文字的倒写而已
writing-mode：tb-rl，tb-lr，bt-rl，bt-lr，rl-tb，lr-tb，rl-bt，lr-bt，为文本的方向

9.heading标签：

h1、h2、h3、h4、h5、h6
h1只能使用一次
h2为段落标题
h3位段落的小标题，主要用在段落的小结上
h4~h6很少使用，用来说明一些不重要的内容

10.p标签：

q为短引用，常常为所包含的文本添加引号
blockquote为长引用：浏览器会插入换行和外边距

11.平时的引用标签：

abbr为缩写内容的展示，要在里面设置title属性
address为地址标签，字体通常为斜体字，通常需人为更正
bdo为设置文字文本的方向，里面设有writing-mode和direction属性
blockquote为长引用，浏览器为其设置外边距和换行，首行缩进需人为
q为短引用，与blockquote的差别不大，会自动对内部的内容添加引号
dfn定义项目和缩略词的定义，与abbr差不多，只不过更加强大
cite定义著作的标题，通常为斜体字

12.计算机的代码元素

特点：平时的html文字和字母间距、大小都是可变的，但是计算机元素标签中的字母是不变的
元素：code、kbd、samp（原本具有的空格和换行都会省略）、pre（保留原有的空格和换行）、var（变量的初始化）

13.注释的作用：

css中：/** **/
html中：
通知、提醒、排错

14.css样式表的四种引用方式：

（1）内部样式：在head标签中添加style标签，在里面来编写css样式代码

（2）外部样式：（两种并比较优缺点）

一. <link rel="stylesheet" type="text/css" href="地址"> 设置连接的css文件中的编码：@charset "utf-8"; 二. <style type="text/css"> @import url(地址) </style> （3）内联样式：

（4）内部样式和外部样式组合使用：

三种引用css的方式的权重：

（1）外部和内部样式的权重和写的顺序有关，后写的覆盖先写的（覆盖相同的内容，不相同的内容保留下来）

（2）内联样式的权重最高

15. 链接：

（1）鼠标移动到该链接时，鼠标的变化（设置cursor属性），添加属性值：

auto默认[鼠标]
crosshair加号[+]
text文本[I]
wait等待[O]
help帮助[?]
progress过程[鼠标+O]
move移动[雪花]
pointer点击[小手]
ne-resize[斜箭头]

（2）语法：

<a href="url">名称</a> 内部可设属性 target（规定此链接在何处显示） target="_blank"新窗口打开 "_self"在当前框架内打开，为默认值 "_top"在顶层或跟框架中打开 "_parent"当前框架上一层打开

（3）锚点：被连接的内容可为name或id

被连接的标签为a时，可为id或name
被连接的标签为其他标签时，为id
发出连接的a中href中必须有#

<div id="div1"style="background:red;"></div> <p>lalla</p> <div id="div2"style="background:yellow;"></div> <p>离开的时间发了家第三方</p> <p>sdjfljdsfklkdsf</p> <div id="div3"style="background:plum;margin-bottom:800px"></div> <a href="#div1">啦啦</a> ——此时地址中必须有#

（4）

去掉下划线text-decoration:none
伪类选择符：
a:link{} 最初的样子
a:visited{}加载之后的样子
a:hover{}鼠标悬浮的样子（常用）
a:active{}鼠标点击之后的样子

16. 图片：

（1）取消默认边框border：0

（2）解决下边界有空隙display：block

（3）路径：（主要是HTML文件调用图片文件）

html文件与图片处于同级：<img src=”图片名”>
当图片处于子文件夹，html文件处于父文件夹时：<img src=”子文件夹名/图片名”>
当图片处于父文件夹，html文件处于子文件夹时：<img src=”../图片名”>

（4）解释路径：./ 当前目录 ../ 父级目录 / 根目录（如abc/123/1.txt，根目录是相对于子目录而言的，这里的abc相当于根目录）

17. 表格：

（1）表格默认：在直接写table的时候，无论有没有内容，都是没有边框的。给table加边框时，只是给表格的外面加边框

（2）表格中常见的标签：caption标题，th表头（加粗）

（3）单元格边距：cellpadding，指定单元格内容与单元格边界之间的空白距离的大小

（4）单元格间距：cellspacing，每个单元格之间的距离

（5）注意：

td中不能包含tr
除了表格之外在html标签中将width等属性信息，写在style样式中，必须加单位。在表格中的width等属性添加时，属性值不能加单位
当不在style内部样式中给td添加样式时，如若想给每一列（竖）设置样式，只需给第一行的当前列添加width等样式。
在合并行和列时：只要不跨行就是合并列（合并行rowspan，合并列colspan），合并时数量是包括自己的。

18. 新增（表格）：

（1） <thead>：将包含<th>标题的<tr>写入进来，仅一个 <tbody>：将表格的主体部分写进来，可写多个 <tfoot>：通常为表格的总计（可不写），仅一个（2） border- collapse：collapse（合并）、separate（分离）（3） border-spacing与cellspacing的效果是一致的，形成“宫字格”

19. 布局方法：

（1）固定布局，每一个元素都是固定的尺寸，内容区域居中在浏览器中间

内容区域的尺寸：980,1000,1100,1200

（2）响应式布局，利用媒体查询来实现不同尺寸的浏览器显示结构不一样

一般会有三张设计图，PC,平板,手机

（3）自适应布局，属于响应式里的一种，利用rem、百分比、vwvh等布局单位来实现，设计图一般只有一张，640、750居多

20.padding:

Padding值的编写主要是确定子集在父集内的位置，编写时代码写在父集内

分开写：Padding-top/bottom/right/left:value;

组合写：padding:top right bottom left（上、右、下、左）

Padding:(上下、左右)

Padding:(上、左右、下)

21.margin：

Margin针对的是同级之间的关系

分开写：margin-top/bottom/right/left:value;

组合写：margin:top right bottom left（上、右、下、左）

margin:(上下、左右)

margin:(上、左右、下)

22.背景图：

（1）缩写：background: color url(背景路径) no-repeat position

（2）颜色background-color:

添加背景图background-image:url(图片路径)

平铺background-repeat:no-repeat/repeat/repeat-x/repeat-y

固定性：background-attachment:scroll（滚动）/fixed（固定）

位置：background-position:left/center/right/数值 top/center/bottom/数值

向左向上为负值。

（3）精灵图（雪碧图）：将很多的图片集中在一张图片上

（4）图片整合：

原理：背景图的添加和上下左右的移动

要求：

整合的背景图的背景是透明的
根据实际需求，小图标之间留出足够的空间
小图标最好上下排列，最好放在最右侧

优点：

可以减少对服务器的请求次数，从而提高页面的加载速度
整合图片来减小图片的体积

（5）滑动门技术：

原理：两个背景图的叠加，来回滑动

比如：在li中设a，在a中设span。a与span同时设置背景图。调整位置。

（6）jpg，png，gif的区别：

jpg（jpeg）：

1.不支持透明

2.不支持动画

3.除了编辑图片的的原数据（旋转、裁切）外，其他操作都会是图片的质量产生损失。

4.支持隔行渐进显示（但ie浏览器不支持这个属性，但它会在整个图像信息完全到达的时候显示）。

5.适合于web上的摄影图片和数字照相机

gif：

1.透明，是布尔透明类型，只能全透明或全部透明，没有半透明

2.动画，gif支持动画

3.无损耗性，对gif做任何操作，都不会对图像质量产生损耗

4.水平扫描：gif采用LZW进行压缩，有上到下水平压缩。说明横向的比纵向的小

5.gif为可选择行的隔行渐进显示

6.只有256中颜色的gif不适合照片，但是和做图形

png：

1.三种类型：png8 256色png别名

png24 全色png别名

png32 全色png别名

2.png32 比 png24多了alpha通道，即透明度。photoshop中png24的透明效果实际上是png32。

3.半透明的png8在ie6以下的浏览器中显示为全透明，说明在ie中如果要设置全透明度时，使用全透明的png8。

4.photoshop中只能导出布尔类型的png8，

fireworks既能导出布尔类型的png8，也能导出alpha的png8

23.边框属性：

对元素设置边框时，显示出的页面效果

宽=元素原宽+边框的宽*2;

长=元素原长+边框的长*2

(1)border:边框大小边框类型边框颜色

border:10px solid #f00;

(2)边框大小：border-size(px单位)

(3)边框类型：border-style:solid实线/dashed虚线/dotted点线/double双实线

(4)border-width:上右下左（使用时要先写border）

border-left/right/top/botom

24.地址URL（统一资源定位符）：

浏览器宿主环境中，有一个location对象，同时这个对象也是window对象和document对象的属性。

比如地址：https://www.baidu.com/api/sousu?search=baidu&id=123#2

（1）location.href：完整的地址URL

（2）location.protocol：协议 “https：”

http：超文本传输协议，普通网页，不加密。
https：安全超文本传输协议，安全网页，数据加密。
ftp：文件传输协议，将文件下载或上传到网站
file：当前电脑自身的文件。

（3）location.host：服务器名称和端口号 “www.baidu.com”

（4）location.hostname：返回服务器名称 “www.baidu.com”

（5）location.port：返回服务器端口号

http协议端口号8080
https端口号是443

（6）location.pathname:返回URL中的目录和文件名 “api/sousu”

（7）location.search返回查询字符串 “?search=baidu&id=123#2”

（8）location.hash：返回hash值 “#2”

在浏览器中输入url地址之后的加载过程：

（1）利用DNS域名解析系统进行域名解析，将域名解析成IP（域名只是个别名，计算机只认识IP，所以需要DNS进行解析）

（2）查找IP对应的主机服务器（如果第一次访问服务器，会向网络(JSP)供应商请求）

（3）TCP的三次握手，经过三次在客户端和服务器之间传递报文来建立连接

（4）发起http请求，请求入口文件，后端接受到请求相关信息，返回入口文件

（5）解析入口文件，同时如果有资源请求继续发送http请求

（6）入口文件渲染完成（TCP的四次挥手，断开、连接）

25.设置颜色：

符合html4与W3C的颜色英文字母
#加上十六进制数
rgb（数值，数值，数值），数值的范围是0~255
rgba(数值，数值，数值，0~1)，加颜色同时设置透明度，这里的透明度并不会改变文字效果

26.XHTML文档说明：（可扩展标记语言）

文档结构

XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的（禁止简写）

27.表单：

（1）格式1：

<input type=”radio” name=”单选按钮的值一致”> checked 默认的选中，

<input type=”checkbox” > disabled 默认不被选中

</select>

<textarea name=”文本可被调用” ></textarea>CSS取消文本框的拖动: resize:none;

（2）格式2：

<legend>今年的表格计划</legend>

</fieldset>

（3）表单中的属性列表：

accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

（4）html5新增的属性（IE不支持）：<datalist>，<keygen>加密，<output>

datalist的写法：

datalist与select的区别：

（5）get与post的区别：

get是从服务器获取数据，post是提交数据
get传输的数据量小，post不受限制
get的安全性低
get服务器用Request.QueryString来获取变量。post服务器用request.Form来获取提交的数据。
get将数据提交到表单中，action中url所指向的地方，值是一一对应的，可以看到的；post是通过http post机制将表单内各个字段与内容放在html header中一起传送到action中，看不到。

什么时候使用：

考虑安全性时，用post
对内容数据进行查询时用get
get的维护性高

（6）常见的输入类型：

color、search、

range、email、url：IE9 及早期版本不支持、

date 、month、time：Firefox 或者IE 11 以及更早版本不支持、

week：IE 不支持、

datetime：Chrome、Firefox 或 IE 不支持、

datetime-local：Firefox 或者IE 不支持、

tel：Safari 8 及更新版本支持

28.对html5的理解：

良好的移动性，以移动设备为主。
响应式设计，能够自动适应不断变化的屏幕尺寸
支持离线缓存技术，webstorage
新增了一些canvas，video，audio标签，nav，header，footer，main，article，section，time，figcaption，figure，aside，details，summary内容元素和date，time，week，datetime，color，range表单控件
地理定位
新增webSocket/webWork技术

html5新增的标签：

<header>：页眉 <footer>：页尾 <nav>：导航 <aside>：定义内容之外的东西（侧栏） <article>：包含独立的自包含文章<section> <video><audio><source>：引入音频和视频资源 <figure><figcaption>列表项 <details>：定义额外的细节 <summary>：为details中的标题 <datalist>：下来菜单，与option连用 <canvas>：画布 <mark>：与span相同 <hgroup>：标题的分组 <embed><command><meter><time><output><progress>

29.媒体：

视频格式

MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。

格式	文件	描述
AVI	.avi	AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
WMV	.wmv	Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG	.mpg .mpeg	MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
QuickTime	.mov	QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo	.rm .ram	RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash	.swf .flv	Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

声音格式

格式	文件	描述
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。点击这里播放 The Beatles。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio	.rm .ram	RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
Wave	.wav	Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
WMA	.wma	WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3	.mp3 .mpga	MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

使用方法：

</video>

<audio>

</audio>

30.css选择器：

(1) 1类型选择符, 对所有相同类型的选择符进行设置，div,p,span……

(2) 10类选择符 ,在div中进行class设置

(3) 100 id选择符,在div中进行id设置

特殊选择符(群组选择符、包含选择符、通配符、伪类选择符)

(4) （分先后）群组选择符，同父级设置用“，”隔开

(5)(权重的叠加)包含选择符，儿子借着老子的名声干啥啥啥

(6)通配符，”*”对整个页面进行设置。

(7)伪类选择符“：”，比如链接的设置。

(8)！important最大

31.CSS属性：

(1)文本大小设置为偶数，必须大于12px（单位px,pt,em）：font-size：value

1em=16px;

(2)文本颜色：color:#十六进制/rgb(0,255,255)

(3)文本字体：font-family:字体1，字体2，字体3

第一个字体加载不出来，就加载第二个，以此类推直至加载出来为止。
当字体为中文时或英文字体中有空格，需用“”双引号。
当字体只有一个单词是，不加双引号

(4)首行缩进：text-indent：value(为字体的二倍，设为2em)可设为负值为悬挂式缩进。

(5)小型的大写字母：font-variant:small-caps

(6)大小写的转换：text-transform:capitalize(首字母大写)/uppercase全部大写/lowercase全部小写

(7)行高（从第一行到第二行文本的开始）：line-height可设为字号的二倍2em

当单行文本的行高等于容器的行高时，可实现该单行文本处于垂直方向居中对齐

(8)文本倾斜：font-style:italic/oblique/normal

(9)文本加粗：font-weight:bold/bolder/light/lighter/normal/100-500正常、600-900加粗

(10)水平对齐方式：text-align:center/right/left/justify(两端对齐，只限于低版本浏览器)

(11)文本修饰：text-decoratin:none/underline/overline/line-through

(12)字间距：letter-spacing：value

(13)词间距：word-spacing：value

(14)文本流的控制：layout-flow:horizontal(自左向右)/vertival-ideographic(自上而下)【适用于老版本浏览器】

32.文本溢出：（单行文本）

容器必须设宽度 width
强制文本一行显示 white-space:no-wrap
超出文本不显示 overflow:hidden
超出文本用省略号代替 text-overflow:ellipsis

33.浮动float：

float:left/right/none;

清除浮动：clear:right/left/both;

添加浮动之后，元素不占空间
元素有浮动，父元素必须有高度

34.定位postion：

（1）属性值position：absolute、relative、fixed、static

（2）属性值得区别：

absolute：

1.为绝对定位，当确定子集在父集的位置时，父集必须有定位，若不存在这样的父元素，则默认整个html为参照。

2.不占位置，脱离文档流。

relative：（包含快）

1.为相对定位。

2.文档流位置不动，只是改变该元素的位置，其他不变。

fixed：

1.固定定位

2.不占位置，脱离文档流。

3.始终是以浏览器的当前屏幕为参照物，位置始终不变。

35.宽高自适应：

（1）宽：（适应父元素的宽）

不设
为100%

（2）高：

高不设或设为auto，为子元素撑开的高
当子元素不确定为多少时，为父元素设置最小高度（IE6不支持）
100%，继承的是父元素的高

（3）兼容：

IE浏览器识别“_”，其他浏览器不支持；
“！important” 高版本浏览器支持，IE不支持
宽高自适应兼容：

1方法. _height:300px ,min-height:300px;

2方法. min-height:300px ; height:auto !important ; height:300px;

（4）高度坍塌：

原因：子元素有float，但父元素没有高或有最小高度，这是父元素出现高度塌陷

解决的方法：

方法：在父元素上添加overflow：hidden

原因：因为overflow：hidden触发了BFC

BFC的布局规则：计算BFC高度时，里面的浮动元素也参与运算

缺点：会隐藏一些置外的元素（定位）。

方法：在浮动的元素后面加上div标签，并设立

clear：both；overflow：hidden；height：0；

缺点：在html中形成不必要的空元素，增大代码体积。

方法：在父元素中中添加类名，该类的css样式为

.名：after{content："."；height：0；clear：both；display：block；overflow：hidden；visibility：hidden；zoom：1；}

36.隐藏元素的方法：

overflow：hidden 溢出内容隐藏
display：none 完全隐藏
visibility：none 会留下空白

37.浏览器内核：

内核	浏览器	前缀	公司
trident	IE	-ms-	microsoft
webkit	safari、chrome(l)	-webkit-	apple/google
blink	chrome(h)、opera(h)		google
presto	opera(l)	-o-	opera
gecko	firefox	-mz-	mozilla