div+css第三天

一、行内元素和块元素

行内元素(inline element),又叫内联元素：内联元素只能容纳文本和其他内联元素。

常见的内联元素有：<span>,<a>,<input>

块元素(block element):块元素一般都从新行开始，可以容纳文本，内联元素和其他块元素，即使内容不能占满一行，块元素也要把整行占满。

常见的块元素有：<div>,<p>

二、案例

运行效果：

从案例我们可以看出，行内元素只占能显示自己内容的宽度,不会占满整行；而块元素不管内容有多少，都会占满整行。

 

三、行内元素和块元素的区别

1.行内元素只占内容的宽度，块元素不管内容多少要占据全行

2.行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素(与浏览器的版本和类型有关)

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

 

四、细节

尽管我给块元素设置了宽度，它们还是占据了整行，看效果：

五、块元素和行内元素相互转换

display:inline;------>块元素转为行内元素

display:block;------>行内元素转为块元素

案例：

大家注意观察前后的区别，span转为了块元素，占据了整行，而div转为行内元素，没有占据整行了。

上面案例最终的代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>行内元素和块元素</title>
 6 <style type="text/css">
 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 </style>
21 </head>
22 <body>
23 <span class="sp1">我是行内元素span1</span>
24 <span class="sp1">我是行内元素span2</span>
25 <input name="username" type="text" value="我是行内元素input"/>
26 <div class="div1">我是块元素div1</div>
27 <div class="div1">我是块元素div2</div>
28 <p class="p1">我是块元素段落1</p>
29 <p class="p1">我是块元素段落2</p>
30 </body>
31 </html>

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

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

七、标准流和非标准流

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

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

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

八、css中的盒子模型

九、盒子模型入门案例

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <link href="box1.css" rel="stylesheet" type="text/css" />
 6 <title>盒子模型</title>
 7 </head>
 8 <body>
 9 <div class="div1">
10     <img src="img1.jpg" />
11 </div>
12 </body>
13 </html>
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 }

posted on 2012-07-19 08:15  郑志伟  阅读(510)  评论(0)  编辑  收藏  举报

导航