div+css块元素和行内元素盒子模型盒子模型经典应用

来源：互联网发布：阿里集团股份构成知乎编辑：程序博客网时间：2024/05/20 23:07

1、行内元素：

又叫内联元素；只能容纳文本或者其他内联元素，常见内联元素<span>、

2、块元素：

块元素一般都从新行打开，可以容纳文本，其他内联元素和其他块元素，即使内容不能占满一行，块元素也要把整行占满。常见块元素<div>、<p>、<h1>

3、块元素和行内元素的区别：

行内元素只占内容的宽度，而且他不会占据整行；块元素不管内容多少都要占据整行，而且会换行显示。

一些css属性对行内元素不生效，比如：margin,left,right,width,height. 建议尽可能使用块元素定位。（与浏览器类型版本有关）

4、块元素和行内元素相互转换：

Display:inline; 将块元素转化为行内元素

Display:block; 将行内元素转化为块元素

5、css文件的相互引用：

如果希望在a.css文件中使用到b.css c.css文件的选择器，可以通过@import指令来完成。例：@import url(new.css);

如果希望在html或者PHP文件中引用某个xxx.css文件，也可以在<style>标签中通过@import指令来完成。例：

6、标准流和非标准流：

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

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

非标准流:在html文件中，当某个元素脱离标准流（比如相对定位）,那么他就处于非标准流。

实例：

<!DOCTYPE html> <!-- <!DOCTYPE> 声明是文档中的第一个成分，位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。此处为HTML 5 规范 --><html><head><title>第三讲代码：</title><style>@import url(第3讲.css); </style>  <!-- 和下句意义相同，可替换下句 --><!-- <link rel="stylesheet" type="text/css" href="第3讲.css" > --></head><body><span>行内元素1</span><span>行内元素2</span><span>行内元素3</span><div class="s1">块元素1</div><div class="s1">块元素2</div><div class="s1">块元素3</div><div >块元素4</div><br><!-- div在布局中起到控制整个内容显示位置的作用，也就是用来定位的！ --><b>2、盒子模型的浮动</b><br><div class="s2"><!--ul在布局中的作用是可以控制显示内容的多少--><ul class="s3"><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li><li><img src="asd.png"></li></ul></div></body></html>

第3讲.css

@import url(new.css);  /* 如果希望在a.css文件中使用到b.css  c.css文件的选择器，可以通过@import指令来完成 */.s3{width:500px;height:400px;border:2px solid yellow;  list-style-type:none;  /* 设置列表项所使用的预设标记，none表示无标记 *//* padding-left:-500px; */padding-left:2px;margin-top:5px;margin-left:5px;}

new.css

span{border:2px solid red;display:block;   /* 将行内元素转化为块元素 */}div{border:2px solid green;/* display:inline;  */ /* 将块元素转化为行内元素 */}.s1{border:2px solid green;display:inline;  /* 将块元素转化为行内元素 */}body{border:3px solid yellow;width:50%;height:50%;margin:0 auto;  /*  第一个用于上下，第二个用于左右，auto表示自动居中。  水平居中 */ text-align:center; /*  body中所有元素居中 */}.s2{border:2px solid red;}img{border:2px solid  red;}li img{width:50px;height:50px;padding:1px;margin:2px;}li{ float:left; /* 左浮动 */ width:60px; height:60px; border:3px solid #600000; padding:1px; margin:2px; margin-top:5px; }

0 0