时间：2021-07-01 10:21:17 帮助过：30人阅读
行内元素(inline element),又叫内联元素：内联元素只能容纳文本和其他内联元素。
常见的内联元素有：,,
块元素(block element):块元素一般都从新行开始，可以容纳文本，内联元素和其他块元素，即使内容不能占满一行，块元素也要把整行占满。
常见的块元素有：
二、案例
运行效果：
从案例我们可以看出，行内元素只占能显示自己内容的宽度,不会占满整行；而块元素不管内容有多少，都会占满整行。
三、行内元素和块元素的区别
1.行内元素只占内容的宽度，块元素不管内容多少要占据全行
2.行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素(与浏览器的版本和类型有关)
3.一些css属性对行内元素不生效，比如：margin,left,right,width,height,建议尽可能使用块元素定位(与浏览器的版本和类型有关)
四、细节
尽管我给块元素设置了宽度，它们还是占据了整行，看效果：
五、块元素和行内元素相互转换
display:inline;------>块元素转为行内元素
display:block;------>行内元素转为块元素
案例：
大家注意观察前后的区别，span转为了块元素，占据了整行，而div转为行内元素，没有占据整行了。
上面案例最终的代码：
1 2 3 4 5行内元素和块元素 6 21 22 23 我是行内元素span124 我是行内元素span225 26我是块元素div127我是块元素div228我是块元素段落1
29我是块元素段落2
30 31
六、css文件之间的相互引用
语法：@import url('被引用的css文件地址');
七、标准流和非标准流
流：html元素在网页中显示的顺序
标准流：在html文件中，写在前面的元素在前面显示，写在后面的元素在后面显示
非标准流：在html文件中，当某个元素脱离了标准流，那么它就处于非标准流
八、css中的盒子模型
九、盒子模型入门案例
View Code
1 2 3 4 5 6盒子模型 7 8 91012 1311
View Code
1 @charset "utf-8"; 2 /* CSS Document */ 3 4 body{ 5 border: 1px solid #F00; 6 width: 500px; 7 height: 500px; 8 /*让body自动居中*/ 9 margin: 0 auto;10 }11 12 /*盒子模型*/13 .div1{14 width: 120px;15 heigth: 120px;16 border: 1px solid blue;17 margin: 5px 0px 0px 5px;18 /*padding-top: 5px;*/19 /*设置padding，div会根据里面的内容自适应*/20 }21 .div1 img{22 width: 50px;23 height: 50px;24 margin: 5px 0px 0px 5px;25 }