div+css第三天_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

div+css第三天_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:31 PM

一、行内元素和块元素

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

常见的内联元素有：,,

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

常见的块元素有：

二、案例

运行效果：

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

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

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="/static/imghw/default1.png"  data-src="img1.jpg"  class="lazy" / alt="div+css第三天_html/css_WEB-ITnose" >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 }

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.