标准文档流
常用的Word文档就是一个经典的标准文档流，内容必须是从上往下，从左往右书写的，有一个光标控制，前面的大小或者内容发生变化，后面的内容会跟着发生一些位置变化。
制作的html网页就是一个标准文档流。
1、从微观上有特殊的性质
1）html文本之间有空白折叠现象。
2）文字、图片、表单元素等这些文本类型元素有一个特点:高低不齐，底边对齐。
3）文字在盒子内书写完一行，会自动换行。
2、块级元素和行内元素
标准文档流将html分为了块级标签和行内标签。
块级标签：所有的容器标签都是块级标签，文本级标签里的p标签也是块级标签。
行内标签：除了p以外的所有文本级标签。
块级标签：body,div, h1,p ,ul,ol,li ,dl,dt,dd,table,tr,td等。
行内标签：a,span,img,input等文本类。
①块级标签特点：
a) 块级元素会独占一行，同行不会出现其他的同级标签。代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}div{width: 200px;height: 40px;background-color: pink;margin-bottom: 10px;font-size: 28px;line-height: 40px;}</style></head><body><div>1</div><div>2</div></body></html>
View Code
效果图↓
b) 可以设置宽高。与行内标签对比代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}div{width: 200px;height: 40px;background-color: pink;margin-bottom: 10px;font-size: 28px;line-height: 40px;}/*与行内标签对比*/span{width: 200px;height: 40px;background-color: pink; }</style></head><body><div>1</div><div>2</div><span>3</span></body></html>
View Code
效果图↓
可以看出行内标签无法设置宽高。
c) 嵌套的关系，子盒子不设置宽度，他会自动继承父亲内容宽度的100%代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}div{/*不设置宽度，继承父盒子*//*width: 200px;*/height: 40px;background-color: pink;margin-bottom: 10px;font-size: 28px;line-height: 40px;}/*与行内标签对比*/span{width: 200px;height: 40px;background-color: pink; }</style></head><body><div>1</div><div>2</div><span>3</span></body></html>
View Code
效果图↓
没有给div设置宽度，他自动继承了body
②行内标签特点：
a) 行内标签不独占一行，可以与其他的行内元素并排在一行，代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}span{background-color: pink;}</style></head><body><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span></body></html>
View Code
效果图↓
b) 行内元素不能设置宽高，代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}span{width: 200px;height: 200px;padding: 10px;margin-right: 20px;background-color: pink;}</style></head><body><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span></body></html>
View Code
效果图↓
注意：行内元素只是不能设置宽高，其他的如border，paddin，margin都可以设置。
c) 行内元素不设置高度，不会自动继承父亲的宽度，只能通过增加内容将宽度撑开。代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}span{width: 200px;height: 200px;padding: 10px;border: 1px solid red;margin-right: 20px;background-color: pink;}</style></head><body><!-- 通过添加内容使行内元素宽度增加 --><span>333333333333333333333333333333333333333333333333333333333333</span></body></html>
View Code
效果图↓
③行内块标签:
既可以设置高度也可以排在同一行，如td
有一个属性可以在块级元素和行内元素之间进行转换
显示模式：display。标签在html网页里是以哪种形式进行渲染。
属性值: 块级block，行内inline，行内块inline-block
1、块级转行内 直接添加display: inline(不常用) 代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}div{/*不设置宽度，继承父盒子*//*width: 200px;*/height: 40px;background-color: pink;margin-bottom: 10px;font-size: 28px;line-height: 40px;}.box{display: inline;}/*与行内标签对比*/span{width: 200px;height: 40px;background-color: pink; }</style></head><body><div class="box">1</div><div>2</div><span>3</span></body></html>
View Code
效果图↓
2、行内转块级 直接添加display: block(常用) 代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}span{width: 200px;height: 200px;padding: 10px;border: 1px solid red ;margin-right: 20px;background-color: pink;/*行内转块*/display: block;}</style></head><body><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><!-- 通过增加内容使宽度撑开 --><span>33333333333333333333333333333333333333333333</span><span>3</span></body></html>
View Code
效果图↓
3、转行内块 直接添加display: inline-block 代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}span{width: 200px;height: 40px;padding: 10px;border: 1px solid red ;margin-right: 20px;margin-bottom: 10px;background-color: pink;/*行内转块*//*display: block;*//*转行内块*/display: inline-block;}</style></head><body><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><!-- 通过增加内容使宽度撑开 --><span>33333333333333333333333333333333333333333333</span><span>3</span></body></html>
View Code
效果图↓
注意:标准文档流制作网页有局限，有很多布局效果不能完成。
解决办法: 让元素脱离标准流，既可以设置宽高，又可以一行排列。
脱离标准流三种方法: 浮动、绝对定位、固定定位。
