div+css第三天_html/css_WEB-ITnose

PHP中文网 • 2025年3月28日 09:30:52 • 编程技术 • 阅读 1

一、行内元素和块元素

行内元素(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  7 .sp1{ 8     background:red; 9     display:block;/*我转为块元素了*/10 }11 .div1{12     background:gray;13     width:200px;14     display:inline;/*我转为行内元素了*/15 }16 .p1{17     background:#CC0;18     width:200px;19 }20 21 22 23 我是行内元素span124 我是行内元素span225 26 我是块元素div1
27 我是块元素div2
28 我是块元素段落1
29 我是块元素段落2
30 31

登录后复制

六、css文件之间的相互引用

语法：@import url(‘被引用的css文件地址’);

七、标准流和非标准流

流：html元素在网页中显示的顺序

标准流：在html文件中，写在前面的元素在前面显示，写在后面的元素在后面显示

非标准流：在html文件中，当某个元素脱离了标准流，那么它就处于非标准流

八、css中的盒子模型

九、盒子模型入门案例

View Code

 1  2  3  4  5  6 盒子模型 7  8  9 10     @@##@@11 
12 13

登录后复制

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 }

登录后复制