HTML笔记_第七章盒子模型

第七章盒子模型

一、盒子模型

定义：

页面中任何标签都可以看做一个盒子模型

组成：

盒子模型=内容（width,height）+边框(border)+内边距(padding)+外边距(margin)

tips:页面中的任何标签的实际宽度和实际高度，都要从盒子模型考虑，千万不要看内容。

二、标准文档流

定义:

页面中任何标签都会被浏览器从上到下，从左到右进行解析和绘制

分类：

根据文档流分类：块级标签和行级标签

块级标签：div、p、ul、li、ol、li、dl、dt、dd、h1-h6、table

特点：

1.没有宽度、宽度默认为0、其宽度由实际内容决定。

2.不能对其进行设置高度和宽度。

3.一行可以显示多个，从左到右布局。

三、盒子的浮动

定义：

将设置的标签盒子使用浮动属性来脱离文档流

本质：

一旦一个标签使用浮动属性脱离文档流，不会遵守文档流从上往下的布局方式。

应用场景：

1.菜单：所有li有一行显示

2.使用div布局时如果要div标签在一行显示，可以使用浮动。

注意：浮动虽然好，但是会有一个缺点，造成父级标签塌陷，高度为0

1.设置父级标签的高度

2.在父级标签设置一个样式属性 overflow：hidden 溢出隐藏

3.在添加一个小儿子标签添加一个属性 clear:both 清除所有浮动带来的影响

四、定位

关键字：position

取值：static 静态的（默认的）absdute 绝对定位 fixed 固定定位 relative 相对定位