仓酷云

标题: 来谈谈：CSS教程:2个主要观点块状元素和内联元素 [打印本页]

作者: 海妖 时间: 2015-1-15 23:25
标题: 来谈谈：CSS教程:2个主要观点块状元素和内联元素
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
网页制造poluoluo文章简介：是在CSS结构页面中很主要的两个观点，必需要了解透辟！既然说到观点就先看看块状元素和内联元素的界说。
在用CSS结构页面的时分，我们会将HTML标签分红两种，块状元素和内联元素（我们寻常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS结构页面中很主要的两个观点，必需要了解透辟！既然说到观点就先看看块状元素和内联元素的界说。

注：这节课看似挺长，实在内容很少，经由过程举例子让人人更简单了解罢了，不要被长远的笔墨和代码吓到哟~

块状元素
通常为其他元素的容器，可包容内联元素和其他块状元素，块状元素排挤其他元素与其位于统一行，宽度(width)高度(height)起感化。罕见块状元素为div和p。

内联元素
内联元素只能包容文本大概其他内联元素，它同意其他内联元素与其位于统一行，但宽度(width)高度(height)不起感化。罕见内联元素为“a”。

做了个对照表，匡助人人更简单了解。

块状元素内联元素是不是同意其他元素同处一行noyeswidth和height是不是起感化yesno

关于下面的观点，我们用实例的体例给人人批注白，要注重听哟~

请求：ID为div1的白色(#900)地区，宽度和高度均为300像素，而且包括一个ID为div2的绿色地区，长度宽度
均为100像素的div2。

CSS代码以下：

#div1{width:300px;height:300px;background:#900;}
#div2{width:100px;height:100px;background:#090;}

HTML代码以下：

<divid="div1">
<divid="div2"></div>
</div>

为了便利初学者更好的进修，我把完全的代码收回来

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>CSS进修网---“可包容内联元素和其他块状元素”</title>
<styletype="text/css">
<!--
#div1{width:300px;height:300px;background:#900;}
#div2{width:100px;height:100px;background:#090;}
-->
</style>
</head>
<body>
<divid="div1">
<divid="div2"></div>
</div>
</body>
</html>

怎样，是否是上面的效果

假如你做出来了，就持续往下看，我们给方才的请求再加一个前提，在div1里放进一个链接a，内容为“可包容内联
元素和其他块状元素”色彩为红色。
CSS代码以下：

#div1{width:300px;height:300px;background:#900;}
#div2{width:100px;height:100px;background:#090;}
a{color:#fff;}

HTML代码以下：

<divid="div1">
<divid="div2"></div>
<ahref="#">可包容内联元素和其他块状元素</a>
</div>

是否是上面的效果

到这里，我们能够看失掉div1这个块状元素内里具有两个元素，一个是块状元素div2，另外一个是内联元素a，这就是块状元素观点内里说的“通常为其他元素的容器，可包容内联元素和其他块状元素”，为何要说一样平常呢，由于块状元素不但是用来做容器，偶然另有其他用处，好比使用块状元素将高低两个元素离隔些间隔，再好比使用块状元从来完成父级元素的高度自顺应，这方面的内容会在前面具体解说，由于不属于本节常识，就未几说。

好~！我们持续加前提，在div1内里div2的前面再放进一个ID为div3的长宽均为100像素的蓝色(#009)地区块，代码如
下
CSS代码以下：

#div1{width:300px;height:300px;background:#900;}
#div2{width:100px;height:100px;background:#090;}
#div3{width:100px;height:100px;background:#009;}
a{color:#fff;}

HTML代码以下：

<divid="div1">
<divid="div2"></div>
<divid="div3"></div>
<ahref="#">可包容内联元素和其他块状元素</a>
</div>

是否是上面这个效果

是否是和本人事前设想的纷歧样，本觉得蓝色会处于绿色的右边，但是却位于下侧，假如你再加几个div4，div5一样的他们仍是持续位于前一个上面，垂直分列，这就是块状元素观点中说的“块状元素排挤其他元素与其位于统一行”说白了，就是块状元素对照强横，谁都别想和他坐统一行，甭管你是和他有亲戚干系的块状元素仍是毫无接洽的内联元素，都不可，都到上面一行待着往，看看例子中，绿色方块和蓝色方块是否是遍地统一行，内联元素a也别想和他处一行，可是事变是没有相对的，块状元素不是不同意其他元素和他处一行嘛，不是对照强横嘛，不妨，咱有举措，详细甚么举措，我们前面会具体解说，常识不属于本节内容，就也未几说了，人人寄望前面的教程唷~

到这里，我想人人对“块状元素”的观点已对照分明了，上面经由过程例子给人人持续注释“内联元素”的观点，固然仍是持续加前提，加个甚么前提呢，在a的前面再加一个内容为“LoveCSS”的链接，一切链接的背景设置为淡橙色(#F93)
CSS代码以下：

#div1{width:300px;height:300px;background:#900;}
#div2{width:100px;height:100px;background:#090;}
#div3{width:100px;height:100px;background:#009;}
a{color:#fff;background:#F93;}

HTML代码以下：

<divid="div1">
<divid="div2"></div>
<divid="div3"></div>
<ahref="#">可包容内联元素和其他块状元素</a>
<ahref="#">LoveCSS</a>
</div>

效果是否是上面这个

两个毗连a是否是处于统一行(不要健忘a是内联元素哟~)，这就注释了观点上说的“内联元素同意其他内联元素与其位于统一行”，为何不说“内联元素同意其他元素与其位于统一行”，由于其他元素包含两种元素，内联元素和块状元素，它假如和内联元素在一块那就一定在一行了，假如和块状元素在一块，即便它批准，他前面的块状元素也分歧意，块状元素会另起一行位于它的下一行。

我们持续增加前提，如今人人给内联元素a在css中加上宽度和高度，好比width:100px;height:50px;看看有甚么变更
CSS代码

#div1{width:300px;height:300px;background:#900;}
#div2{width:100px;height:100px;background:#090;}
#div3{width:100px;height:100px;background:#009;}
a{color:#fff;background:#F93;width:100px;height:50px;}

看到效果了没有，是否是没有任何变更呢，这就申明了观点中的内联元素的宽度(width)高度(height)不起感化，它的巨细只随外部文本大概其他内联元素变更，详细证实算是给人人一个功课，本人来证实一下。

假如要让界说好的宽度和高度对内联元素起感化，有甚么举措没有？谜底是：固然。由于事变没有相对的在CSS下面同样成立，由于CSS中有两种元素，内联元素和块状元素，可是宽度和高度只对块状元素起感化，内联元素不起感化，假如我们把内联元素转化成块状元素，他不就具有了块状元素的特征了嘛，固然宽度和高度也就起感化了，假如你能想到这个思绪，证实你的年夜脑如今十分活泼哟，这时候候我们只必要给响应的内联元素加上一个属性display:block就能够了，以下

a{color:#fff;background:#F93;width:100px;height:50px;display:block;}

怎样，起感化了吧，和上面的效果一样嘛~

为何两个a不处于统一行了呢，那是由于这两个内联元素a都被转化成了块状元素，既然乐成转化为块状元素，就应当具有块状元素最明显的一个特性，不同意其他元素与他统一行，以是这两个a垂直分列喽~
那有无把法让他们处于统一行？固然有啦，前面课程会告知人人^_^
好了，到这里，人人经由过程实例对内联元素的观点了解的也应当很透辟了，前面就列出一切的内联元素和块状元素，便利今后人人查阅

块元素(blockelement)
address-地点
blockquote-块援用
center-举中对齐块
dir-目次列表
div-经常使用块级简单，也是CSSlayout的次要标签
dl-界说列表
fieldset-form把持组
form-交互表单
h1-年夜题目
h2-副题目
h3-3级题目
h4-4级题目
h5-5级题目
h6-6级题目
hr-程度分开线
isindex-inputprompt
menu-菜单列表
noframes-frames可选内容，（关于不撑持frame的扫瞄器显现此区块内容
noscript-可选剧本内容（关于不撑持script的扫瞄器显现此内容）
ol-排序表单
p-段落
pre-格局化文本
table-表格
ul-非排序列表

内联元素(inlineelement)
a-锚点
abbr-缩写
acronym-首字
b-粗体(不保举)
bdo-bidioverride
big-年夜字体
br-换行
cite-援用
code-盘算机代码(在援用源码的时分必要)
dfn-界说字段
em-夸大
font-字体设定(不保举)
i-斜体
img-图片
input-输出框
kbd-界说键盘文本
label-表格标签
q-短援用
s-中划线(不保举)
samp-界说典范盘算机代码
select-项目选择
small-小字体文本
span-经常使用内联容器，界说文本内区块
strike-中划线
strong-粗体夸大
sub-下标
sup-上标
textarea-多行文本输出框
tt-电传文本
u-下划线
var-界说变量

</p>
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

作者: 冷月葬花魂 时间: 2015-1-17 22:39
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 爱飞 时间: 2015-1-22 06:52
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 愤怒的大鸟 时间: 2015-1-30 23:42
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 山那边是海 时间: 2015-2-6 17:19
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 乐观 时间: 2015-2-17 19:33
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 飘飘悠悠 时间: 2015-3-5 22:55
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 简单生活 时间: 2015-3-12 16:36
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 莫相离 时间: 2015-3-20 00:41
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

欢迎光临仓酷云 (http://ckuyun.com/)