网页元素的分类和布局方式

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 3.2k | 阅读时长 ≈ 12

一、元素分类

1. 行内元素/内联元素（inline）

（1）行内元素不会独占一行，和其他元素都在一行上，当遇到父级元素边界才会被迫自动换行。

（2）设置宽高无效。

宽度：设置width无效，内容决定宽度（如果没有内容宽度默认为0）。

高度：设置height无效，内容决定高度（如果没有内容高度默认为0）。

（3）一般情况行内元素只能容纳文本或者其他行内元素（如文字/图片/超链接），不能包含块级元素。

（4）margin和padding对行内元素的左右方向有效，而上下无效。

此外有一点需要注意：padding对行内元素的上下方向实际上是无效的，即使设置了padding-top或者padding-bottom的行内元素，背景渲染的时候依然会渲染上，行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠，但是不会挤开其他盒子的内容了,此时称这个行内元素为 “残疾的盒模型”，这种情况是毫无意义的，开发中要避免对行内元素设置padding-top或者padding-bottom。

盒模型中padding, border 与块级元素并无差异，都是标准的盒模型，但是 margin却只有水平方向的值，垂直方向并没有起作用。

替换的行内元素具有“内在尺寸”，尺寸是有自身决定的，而不会受周围环境的影响，如<img>和<input>等，替换的行内元素的高度是由height属性决定。
非替换的行内元素（如 a,span等元素）的宽度是其内容经过浏览器解释后实际的宽度，而不能通过设定width属性为非替换的行内元素设置宽度，非替换的行内元素的高度是有框高度的行高决定的。
垂直方面的边距对于非替换的元素无效，对于替换的行内元素可以达到应用的效果。

常见内联元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
◎ a - 锚点
◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器，定义文本内区块
◎ strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量

2. 块级元素（block）

（1）块级元素独占一行。

（2）能设置宽高。

  • 宽度：1、可以自行设置width的值；2、如果没有设置width，宽度的值为auto（即默认宽度是父元素的宽度）。
  • 高度：1、可以自行设置height的值；2、如果没有设置height，默认值为0；

（3）一般情况下，可容纳行内元素和其他块级元素以及行内块元素。

（4）内外边距都可以设置，即margin和padding对块级元素的上下左右方向有效。

常见块元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
◎ address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（无序列表）

3. 行内块元素（inline-block）

（1）行内块元素不会独占一行，和其他行内块元素都在一行上，当遇到父级元素边界才会被迫自动换行。

（2）能设置宽高。

  • 宽度：1、可以自行设置width的值，2、如果没有设置width，内容决定宽度。

  • 高度：1、可以自行设置height的值，2、如果没有设置height，内容决定高度。

（3）一般情况下，可容纳行内元素和其他块级元素以及行内块元素。

（4）内外边距都可以设置，即margin和padding对行内块元素的上下左右方向有效。

4. 元素显示模式转化

行内元素、块级元素和行内块级元素之间可以任意转化显示模式。

1
2
3
display: inline;  /*转化显示模式为行内元素*/
display: block;   /*转化显示模式为块级元素*/
display: inline-block;  /*转化显示模式为行内块级元素*/

二、布局方式

网页布局方式就是浏览器对网页元素进行排版的方式。共有三种方式：

1. 标准流（文档流/普通流）的排版方式

（1）是浏览器默认的排版方式。

（2）在标准流中，浏览器对网页的布局分为垂直排版和水平排版两种布局。在css中，又将元素分为块级元素、行内元素和行内块级元素三种元素。

  • **垂直排版：**块级元素：独占一行，可以设置宽高。

  • 水平排版：行内元素：不独占一行，可在一行内排布，不能设置宽高。行内块级元素：不独占一行，可在一行内排布，能设置宽高。

 *备注：盒子嵌套关系中，如果子元素的高度大于父元素的高度（或者父元素没有设置高度），那么子元素会撑起父元素的高度。*

2. 浮动流的排版方式

（1）是一种“半脱离标准流”的排版方式。浮动元素只在浮动前为标准流元素时所在的行内进行浮动，不会跑到其他行去。

（2）只有一种排版方式，即水平排版。

（3）只能设置元素左对齐或者右对齐，不能设置居中对齐。

（4）**浮动流解决的问题：**解决了标准流不方便让元素左对齐和右对齐的问题。

（5）浮动流的特点：

①. 不区分块级元素、行内元素、行内块级元素的排版方式。浮动流中的所有元素都是水平排版并且行内元素在浮动流中能够设置宽高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!-- 
box1和box3是浮动流元素,box2和box4是标准流元素。
浮动元素只在浮动前为标准流元素时所在的行内进行浮动，不会跑到其他行去。
 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			margin: 0px;
			padding: 0px;
		}
		.box1{
			width: 300px;
			height: 300px;
			background-color: red;
			float: left;
		}
		.box2{
			width: 400px;
			height: 400px;
			background-color: blue;
		}
		.box3{
			width: 300px;
			height: 300px;
			background-color: orange;
			float: left;
		}
		.box4{
			width: 400px;
			height: 400px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="box1">我是box1</div> <!-- 浮动前在第一行，浮动后脱标在第一行的上方，不占用标准流的位置 -->
	<div class="box2">我是box2</div><!-- 标准流元素box2填充浮动流元素box1的位置。移动到第一行 -->
	<div class="box3">我是box3</div><!-- 因为box2移动到了第一行，所以box3浮动前会填充第二行空出来的位置,故浮动前为第二行 ，浮动后再第二行的上方-->
	<div class="box4">我是box4</div><!-- 标准流元素box4填充浮动流元素box3的位置。移动到第二行 -->
</body>
</html>

②. 浮动流中的所有元素都和标准流中行内块级元素很相似。

③. 浮动元素排序规则。

  • 相同方向的浮动元素：先浮动的在前面，后浮动的会显示在后面。
  • 不同方向上的浮动元素：左浮动的往左边显示，右浮动的往右边显示。
  • 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。

④. 浮动元素只会覆盖标准流元素，不会覆盖浮动流元素。

⑤. 浮动元素的“脱标“

  • 在同父元素内，如果前面的一个元素浮动了，而后面的块级元素没有浮动，那么前面的元素会从标准流中脱离出来，就会空出一个位置，后面没有浮动的标准流元素就会按照标准流向左上角排版的规则填充这个空出来的位置。效果是会盖住后面同位置的元素。
  • 反过来，如果前面是标准流块级元素，后面是浮动流元素，那么后面的浮动流元素是不会覆盖住前面的标准流块级元素的，因为没有空出的位置给浮动元素填充，此时的浮动元素只会在前面的标准流块级元素的下一行浮动显示。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- 
1. 浮动流中的所有元素都是水平排版并且行内元素在浮动流中能够设置宽高。 
2 .在同父元素内，如果前面的一个元素浮动了，而后面的块级元素没有浮动，那么前面的元素就会盖住后面同位置的元素。反过来不会有这种情况。
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .span1{
                background-color: red;
                /*浮动流中行内元素此时能设置宽高了。*/
                width: 300px; 
                height: 300px;
                float: left;
            }

            .div1{
                background-color: blue;
                width: 300px;
                height: 300px;
                /*浮动流中的所有元素都是水平排版*/
                float: right;
            }
            /*div2会被span1覆盖,如果前面的一个元素浮动了，而后面的块级元素没有浮动*/
            .div2{
                background-color: pink;
                width: 400px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <span class="span1"></span>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
</html>

⑥. 浮动元素的贴靠现象：

  • 如果父元素中的浮动行的宽度能够容得下所有浮动元素，那么浮动元素并排显示。
  • 如果父元素中的浮动行的宽度无法容得下所有浮动元素，那么最后一个元素会开始往下行移动以致于能够贴靠，即从此元素前的先前浮动元素一个一个检查，如果容得下这个元素，那么贴靠在这个先前浮动元素边上。
  • 如果贴靠了前面所有浮动元素之后都不能容的下，最终会贴靠在这些浮动元素所在的父元素的左边或者右边上。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .father {
                border: 2px solid;
                width: 500px;
                height: 1500px;
                background-color: #bcb2b2;
            }
            .box1{
                width: 100px;
                height: 500px;
                background-color: red;
                float: left;
            }
            .box2{
                width: 200px;
                height: 400px;
                background-color: blue;
                float: left;
            }
            .box3{
                width: 100px;
                height: 200px;
                background-color: orange;
                float: left;
            }
            .box4{
                width: 80px;
                height: 80px;
                background-color: green;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box1">我是box1</div> 
            <div class="box2">我是box2</div>
            <div class="box3">我是box3</div>
            <!-- 用浏览器调试增加box4的宽度 -->
            <div class="box4">我是box4</div>	
        </div>
    </body>
</html>

we

⑦. 浮动元素的字围现像。

浮动元素会覆盖掉后面的标准流元素，但不会盖住标准流元素中的文字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			float: left;
		}
		p{
			width: 500px;
			height: 500px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div>我是div</div>
	<p>我是p，我会被浮动元素覆盖到吗？如果你看到完整的我，那么我不会被浮动元素遮盖到哦！</p>
</body>
</html>

1541066339563

⑧. 在浮动流中元素（内容）不会撑起父元素的高度。

3. 定位流的排版方式

三、网页设计技巧

垂直方向一般使用标准流，水平方向一般用浮动流。



----------- 本文结束 -----------




如果你觉得我的文章对你有帮助，你可以打赏我哦~
0%