又叫内联元素;只能容纳文本或者其他内联元素,常见内联元素<span>、
<a>、<input type=””>
块元素一般都从新行打开,可以容纳文本,其他内联元素和其他块元素,即使内容不能占满一行,块元素也要把整行占满。常见块元素<div>、<p>、<h1>
行内元素只占内容的宽度,而且他不会占据整行; 块元素不管内容多少都要占据整行,而且会换行显示 。
一些css属性对行内元素不生效,比如:margin,left,right,width,height. 建议尽可能使用块元素定位。(与浏览器类型版本有关)
Display:inline; 将块元素转化为行内元素
Display:block; 将行内元素转化为块元素
如果希望在a.css文件中使用到b.css c.css文件的选择器,可以通过@import指令来完成。 例:@import url(new.css);
如果希望在html或者PHP文件中引用某个xxx.css文件,也可以在<style>标签中通过@import指令来完成。例:
<style>@import url(第3讲.css); </style>
流: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; }