html5盒子模型标准文档流知识点介绍

今天给大家介绍下html5盒子模型标准文档流等知识点
给个目录：盒子模型、页面布局与规划
一、盒子模型原理
二、标准文档流
三、盒子浮动
四、盒子塌陷
五、盒子定位
1.盒子模型原理
盒子模型概述

每个盒子都包含：边界（margin），边框（border），填充（padding）和内容（content）
边界：元素边框之外所占据得尺寸
边框：border
填充：内容与边距得距离 
内容：标签中得文本或嵌入标签，用width，height设置尺寸

盒子得大小

盒子得大小=内容+填充+边框
盒子得占据空间=内容+填充+边框+边距

2.标准文档流
概述
2.1、行内元素：

<h1></h1>~<h6></h6>
	<p></p>
	<hr />
	<ul></ul>
	<ol></ol>
	<li></li>
	<dl></dl>
	<dt></dt>
	<dd></dd>
	<table></table>
	<div></div>
	<form></form>
	...

2.2、块状元素：

<img />
	<span></span>
	<br />
	<a></a>
	...

区别：
排列方式不同：行内元素从左到右依次排列，块状元素从上到下 >
内嵌元素不同：块状元素可包含行内元素，行内元素只能包含文本或其他行内元素 >
属性设置不同：行内元素设置height和width无效，但可设置line—height，magin和padding设置上下方向无效

2.3、display属性：页面元素隐藏方式，隐藏以后浏览器消除元素，不占屏幕空间
2.3.1、隐藏HTML元素

<style type="text/css">
	便签名|类名{
		display: none; 隐藏
		display:block; 块状显示
		display:inline;  行状显示
	}
</style>

2.3.2、隐藏div

<div  style="display: none;"></div>
<div  style="display: display:block ;"></div>
<div  style="display: inline;"></div>

2.4、visibility属性：页面元素隐藏显示方式，虽然被隐藏，但是元素还占有那块空间
2.4.1、显示HTML元素

<style type="text/css">
	便签名|类名{
		visibility: hidden;  隐藏
		visibility: visible; 显示
	}
</style>

2.4.2、显示div

<div  style="visibility: hidden; "></div>
<div  style="visibility: visible;"></div>

3.盒子浮动
3.1 float：浮动定位方向

<style type="text/css">
	#id{
			float: none;默认
			float: left;左浮动
			float: right;右浮动
	}
</style>

浮动元素得特征：
脱离标准文档流，不占据页面空间
浮动元素显示在父元素得左侧或右侧
若存在浮动元素，则显示在浮动元素之后
浮动元素大小默认由内容决定，但可用width，height设置

4.盒子塌陷
4.1、塌陷原因:
一个盒子使用了float属性，导致父容器被撑开
若一个元素得高度为自适应且该元素中得所有子元素均为浮动元素，此时该元素得高度为0，产生塌陷
4.2、塌陷影响:
背景不能显示
边框不能撑开
margin，padding设置得值不能正确显示
4.3、解决方法
对父元素设置合适得高度
clear：both；清楚浮动塌陷
父级div定义 overflow: hidden;

5.盒子定位
5.1. 静态定位

position：static

5. 2.相对定位

position: relative;

5.3.固定定位

position: fixed;

5.4.绝对定位

position: absolute;

行，今天就给大家分享到这里吧，您的一份支持就是我最大的动力，最后打个小广告，我们程序员在学习和工作中或多或少会遇到一些比较棘手的问题，也就所谓的一时半会解决不了的bug,可以来杰凡IT问答平台上提问，平台上大佬很多可以快速给你一对一解决问题，有需要的朋友可以去关注下，平台网址： https://www.jf3q.com