标准文档流
常用的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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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>
效果图↓
b) 可以设置宽高。与行内标签对比代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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>
效果图↓
可以看出行内标签无法设置宽高。
c) 嵌套的关系,子盒子不设置宽度,他会自动继承父亲内容宽度的100%代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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>
效果图↓
没有给div设置宽度,他自动继承了body
②行内标签特点:
a) 行内标签不独占一行,可以与其他的行内元素并排在一行,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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>
效果图↓
b) 行内元素不能设置宽高,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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>
效果图↓
注意:行内元素只是不能设置宽高,其他的如border,paddin,margin都可以设置。
c) 行内元素不设置高度,不会自动继承父亲的宽度,只能通过增加内容将宽度撑开。代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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>
效果图↓
③行内块标签:
既可以设置高度也可以排在同一行,如td
有一个属性可以在块级元素和行内元素之间进行转换
显示模式:display。标签在html网页里是以哪种形式进行渲染。
属性值: 块级block,行内inline,行内块inline-block
1、块级转行内 直接添加display: inline(不常用) 代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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>
效果图↓
2、行内转块级 直接添加display: block(常用) 代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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>
效果图↓
3、 转行内块 直接添加display: inline-block 代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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>
效果图↓
注意:标准文档流制作网页有局限,有很多布局效果不能完成。
解决办法: 让元素脱离标准流,既可以设置宽高,又可以一行排列。
脱离标准流三种方法: 浮动、绝对定位、固定定位。