陈力：传智播客古代珍宝币泡泡龙游戏开发第九讲：块元素、行内元素、标准流、盒子模型

来源：互联网发布：阿里云域名绑定编辑：程序博客网时间：2024/06/02 23:02

DIV+CSS将显示和数据分离，极大的方便了贵阳网站建设时布局的灵活性。将节对DIV+CSS中类选择器、id选择器和html选择器进行了介绍。本文对《一步一步跟我学PHP》第九讲：块元素、行内元素、标准流、盒子模型”进行介绍，对父子选择器的相关知识，对块元素、行内元素、标准流、盒子模型等概念进行了较详细的讲解，并结合实例进行了分析。本节：陈力：传智播客古代珍宝币泡泡龙游戏开发第九讲：块元素、行内元素、标准流、盒子模型

父子选择器相关介绍

(1)父子选择器可以有多级，但在实际贵阳网站建设中最好不要超过三层。
(2)父子选择器有严格的层级关系。
(3)父子选择器不限于什么类型的选择器。
前面可以是ID选择器中间可以是.Si选择器。
一个元素可以同时有ID选择器和类选择器，但ID选择器只能有一个。
<span class="s1" id="news_specail">贵阳网站建设</span>
/*对贵阳网站建设做一个特别的修饰*/
#news_specail{ color:red; font-style:italic;}
一个元素最多有一个ID选择器，但可以有多个类选择器。使用方法如下：
<元素 class"类选择器1 类选择器2">
例如<span class="cls1 s1">贵阳网站建设</span>。
CSS程序代码:
/*对同一中html元素分类*/
p.cls1{color:blue;font-size:30px;}
s1{
background-color:pink;font-weight:bold;font-size:16px;color:black;
}
当两个类选择器发生冲突时，则以写在CSS文件中的后面的那个类选择器为准。

例子：
有一个CSS文件内容如下：
/*案例: my.css*/
.ad_stu {
width: 136px;height: 196px;background-color: #FC7E8C;margin: 5px 0 0 6px;float: left;}
.ad_2 {
background: #7CF574;
height: 196px;
width: 457px;
float: left;
margin: 5px 0 0 6px;
}
.ad_house {background: #7CF574;height: 196px;width: 152px;float: left;margin: 5px 0 0 6px;
}
/*笔者在贵阳网站建设中，为了提高代码质量。把各个类选择器的公共部分，单独抽取写一份，好处是可以减少css的冗余*/
.ad_stu{width:136px;background-color: #FC7E8C;}
.ad_2{background: #7CF574;width: 457px;}
.ad_house{background: #7CF574;width:152px;}
.ad_stu, .ad_2, .ad_house{height: 196px;float:left;margin: 5px 0 0 6px;}

/*******************************************************************************************/
（1）块元素和行内元素

行内元素（inline element）又叫内联元素。
内联元素只能容纳文本和其它内联元素，常见的内联元素<span><a>
块元素(block element)：块元素一般都从新行开始，可以容纳文本，其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满。党见的块元素<div><p>。

例子：
html代码如下：
<html>
<head><link rel="stylesheet" type="text/css" href="element.css"/></head>
<body>
<span class="s1">span1</span>
<span class="s1">span2</span>
</body>
</html>

CSS文件：
.s1{ background-color:pink;}
.s2{background-color:gray;}
运行显示：

软件设计,贵阳网站建设

在贵阳网站建设的读者朋友注意咯,由上图可知,<span>无素是不会自动换行。但DIV元素会占整行。当再有一个DIV时，也会自动换行。DIV属于块元素，会占据整行。如果用width:50px来限制，也会占据一行的位置，只是把右边位置空闲出来。行内元素只占据能显示自己内容的宽度，而且不会占据整行的位置。块元素不管自己的内容有多少，都会占据整行，而且会换行显示。
常见的行内元素：<a>、<span>
常见的块元素<Div>、<P>
<p></p>也是占据整行。如<p style="background-color:silver">贵阳网站建设</p>
一些CSS属性对行内元素不生效，比如margin left.right,width,height。建议贵阳网站建设的读者尽可能使用块元素定位。
在贵阳网站建设中，有时候需要将行内元素转换成块元素，或者将块元素转换成行内元素——行内元素和块元素会相互转换。
display:block；表示希望使用类选择器的元素，按照块元素来显示。
display：inline;块元素也可以显示成行内元素。

（2）CSS文件之间也可以相互引用
在贵阳网站建设时，实际的网站建设项目中，CSS文件之间相互引用的程序设计代码为：
@import url("被引用的CSS文件URL")
比如：@import url("http://www.by-sj.com/style.css"),或者是网络上的URL。方便贵阳网站建设的朋友在过程中对公共部分的属性抽取出来，提高CSS规范性。

（3）标准流和非标准流
流：在现实生活中就是流水意思，在贵阳网站建设中，进行网页设计时就是指元素（标签）的排列方式。流就是指元素在网页中的显示顺序。
标准流：元素在网页中就像流水一样，排在前面的元素或者标签内容在前面出现，排在后面的元素或者标签在后面显示。
非标准流：当某个元素或者标签脱离了标准流（比如因为相对定位）排列，我们称为非标准流排列。
（4）盒子模型
在贵阳网站建设中，经常看到一些概念：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

软件设计,贵阳网站建设

软件设计,贵阳网站建设

margin是边框和容器之间的距离。整个可以看作是盒子模型。
盒子框型例子：软件设计,贵阳网站建设

box1.html程序设计代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>贵阳网站建设PHP教程——盒子模型</title>
<link rel="stylesheet" type="text/css" href="mybox.css"/>
</head>
<body>
<div class="div1">
<img src="aa.bmp"/><br/>
<a href="#">点击信息</a>
</div>
</body>
</htm/>

mybox.css文件程序代码：
body{
border:1px solid red;/*分别表示边框宽度、样式实线、颜色等。*/顺序可以不按这顺序也是可以的。
width:300px;
Height:500px;
margin:auto;
}
.div1{
width:50px;
height:52px;
border:1px solid blue;
margin 5px 0px 0px 5px;/*上右下左分别取值*/
}
.div1 img{
width:40px;Height:40px;
padding-top:/*太大的话，则会造成错乱，对盒子高度把握不准时一般用margin-top*/
}
说明：border可以指定三个值，宽度、样式、颜色。样式：none表示默认值，silid实线等。
设置宽度为300px后，是看不出效果的。这是因为没有说明html的文档规范。方法是在html标签开头加入<!DOCTYPE HTML　规范。
如何让body自动居中？
通过margin来实现。根据参数来调整。margin默认值为 0 0。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。一个参数时将用于全部。两个时表示上－下，第二个用于左－右。三个时第一个用于上，第二个用于左－右，第三个用于下。
如果在body中设置margin:auto;整个浏览器就会根据分辨率不同而调用位置。
在使用margin-left时，如果设置超过盒子宽度，设置太大，那么也元素也会离开盒子，所在准确图片尺寸在网站建设过程中是很重要的。

小结：本文对“《一步一步跟我学PHP》第九讲：块元素、行内元素、标准流、盒子模型”进行了介绍，总结了父子选择器的相关知识，对块元素、行内元素、标准流、盒子模型等概念进行了较详细的讲解，并结合实例进行了分析。本文希望对贵阳网站建设的读者有一定的帮助，并对SEO优化初学者在进行网站建设时做到DIV的规范化设计，方便搜索引擎的收录。

陈力：传智播客古代珍宝币泡泡龙游戏开发第九讲：块元素、行内元素、标准流、盒子模型

0 0

陈力：传智播客古代 珍宝币 泡泡龙游戏开发第九讲：块元素、行内元素、标准流、盒子模型

陈力：传智播客古代珍宝币泡泡龙游戏开发第九讲：块元素、行内元素、标准流、盒子模型