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

1、行内元素:

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

<a>、<input type=””>

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指令来完成。例:

<style>@import url(第3讲.css); </style>

6、标准流和非标准流:

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

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

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

 div+css块元素和行内元素 盒子模型 盒子模型经典应用_第1张图片

 实例:

<!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;

 }


你可能感兴趣的:(div+css块元素和行内元素 盒子模型 盒子模型经典应用)