1.标准流布局
在没有写任何布局样式的时候，标签在网页中有默认的布局方式，这个默认的布局方式就是标准流布局
不同类型的标签在标准流中的布局方式不同，主要分为三种：
1）块级标签：一个占一行；默认宽度是父标签的宽度，高度是内容的高度；设置宽高有效
例如：div、p、h1-h6、hr、列表标签等……
2）行内标签：一行可以显示多个；默认大小是内容大小；设置宽高无效
例如：a、span、font等
3)行内块标签：一行可以显示多个；默认大小事内容大小；设置宽高有效；
例如：input、img
2.display属性（css属性）
可以通过修改标签样式的display属性来修改标签的类型
block - 块级标签
inline - 行内标签
inline-block - 行内块标签
none - 隐藏
3.脱流 - 脱离标准流布局
不管什么标签以什么样的技术成功脱流了，那么它的布局方式只有一种:
一行可以显示多个；默认大小是内容的大小；设置宽度有效
浮动和定位都可以脱流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--======标准流布局示例========-->
<!--块级标签-->
<p style="background-color: red;">这是行内标签</p>
<!--行内标签-->
<a href="" style="background-color: yellow; width: 100px; height: 100px;">百度</a>
<!--行内块标签-->
<input type="text" name="" id="" value="s" style="width: 100px" />
<input type="text" name="" id="" value="s" style="height: 100px;"/>
<p>!--============修改标签类型示例=====================--</p>
<!--块级变行内-->
<p style="background-color: yellow; display: inline">块级变行内</p>
<p style="background-color: red; display: inline;">块级变行内</p>
</body>
</html>
网友评论