来讲讲：CSS网页制造教程:display属性行内元素和块级元素

只看该作者 · 发表于 2015-1-15 23:10:16

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
网页制造Webjx文章简介：内联（行内）元素、块级元素区分。
A：行内就是在一行内的元素，只能放外行内；块级元素，就是一个四方块，能够放在页面上任何中央。
B：说白了，行内元素就仿佛一个单词；块级元素就仿佛一个段落，假如不另加界说的话，它将自力一行呈现。
C：一样平常的块级元素诸如段落<p>、题目<h1><h2>...、列表,<ul><ol><li>、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如:表单位素<input>、超等链接<a>、图象<img>、<span>........
D：块级无素的明显特性是：每一个块级元素都是从一个新行入手下手显现，并且厥后的无素也需另起一行举行显现。
E：<span>在CSS界说中属于一个行内元素，而<div>是块级元素。
关于学过CSS的人来讲一听就可以分明。可关于老手来讲不容易了解，我次要对老手说通熟点吧!

用容器这一词会更简单抽象了解它们的存在与用处，行内元素相称一个小容器，而<div>相称于一个年夜容器，年夜容器固然能够放一个小容器了。<span>就是小容器，如许一说你大概会在脑海中有一个开端的印象了吧，假如我们想在年夜容器中装一些净水。但我也想在里装一些墨水怎样办？很复杂，我们把小容器拿出来装上墨水然后放进年夜容器里的净水中不就成了吗。

我在举个复杂的一个实践例子吧：好比

<div>abcdefg</div>
我想用CSS界说字母c的款式，因而我们就能够用到<span>了。

<div>ab<span>c</span>defg</div>
成绩原因：
我们在书及第过十分复杂的利用a元素制造网页菜单的例子，实质上就是给a元素设置高度、宽度，和边框等属性。比方上面的代码：

<html><head><style>a{width:200px;line-height:40px;border:1pxsolidred;background-color:#CCC;text-decoration:none;text-align:center;}</style></head><body><ahref="#">链接笔墨</a></body></html>

复制代码

明显，我们但愿将下面的超等链接设置为200像素宽，40像素高，白色边框，灰色背景，作废下划线。
那末在扫瞄器中究竟是甚么效果呢？上面左图是在IE6中的效果，右图是在Firefox中的效果。

登录/注册后可看大图

能够看到，在IE6中的效果，恰是我们但愿的效果，而在Firefox中，效果并非我们但愿的，宽度宽度都不准确。这是甚么缘故原由呢？
释疑

这里的缘故原由在于，依据CSS标准的划定，每个网页元素都有一个display属性，用于断定该元素的范例，每个元素都有默许的display属性值，好比div元素，它的默许display属性值为“block”，成为“块级”元素(block-level)；而span元素的默许display属性值为“inline”，称为“行内”元素。
div如许的块级元素，就会主动占有必定矩形空间，能够经由过程设置高度、宽度、表里边距等属性，来调剂的这个矩形的模样；与之相反，像“span”如许的行内元素，则没有本人的自力空间，它是依靠于其他块级元素存在的，因而，对行内元素设置高度、宽度、表里边距等属性，都是有效的。
那末链接a元素，在默许情形下是甚么元素呢？谜底是“行内元素”，因而像下面代码中那样，对a元素设置高度、宽度等属性，是有效的，这也就申明了在Firefox中，显现成图中的模样的缘故原由了。

那末在IE6中，为何比及了我们但愿的效果呢？谜底是IE在默许情形下，并没有恪守CSS的标准，它对a元素也一样设置了高度、宽度等属性。因而这里应当说Firefox是切合划定的，而IE在默许下，并非标准的注释办法。

这里必要申明的是，假如我们给网页加上DOCTYPE指令，对HTML文档的范例加以限制，那末在IE中也会对他依照尺度的CSS标准来注释这个代码。
比方，将下面代码中的第一行，改成：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">

复制代码

这时候在IE中看到的效果，就会与Firefox中不异了，申明当利用了DOCTYPE指令以后，IE会依照尺度的体例注释下面的代码，从而失掉与Firefox中不异的效果。
那末假如但愿在尺度的体例下，在Friefox和IE扫瞄器中，都能使a元素取得我们但愿的效果，该怎样办呢？
办理办法

办法很复杂，只必要利用display属性，强迫把a元素由inline元素改成block-level便可，办法是，在a元素的CSS款式中增添一条：

display:block;

复制代码

这时候在IE、Firefox中就都能够失掉我们想要的效果了，能够随便设置高度宽度等各类多少属性了。

总结与进步

经由过程display属性，能够便利地改动一种元素的范例，因而假如读者了解这一点，就会晓得实践上div元素和span元素，只必要经由过程display属性，就能够互相转换了。
因而，不管一个网页时有甚么样的HTML标志来组成的，好比div、ul、li、p等等，他们实质上都是一些盒子罢了，在扫瞄器的眼中，一个网页就是一年夜堆盒子，你的义务就是把这些盒子依照你的请求放在符合的地位。至于这个盒子是ul、li、p仍是div，都无所谓的。

好比p标志，完整能够了解为有了一些预设属性值的div。好比，你把网页上的p标志，换成div，然后对这个div设置一些CSS属性，就能够和p完整一样了。这就仿佛，小学我们进修加法和减法，厥后才晓得，加法和减法实质是一样的，1-1就即是1+(-1)，一样，乘法和除法也是一样的。

真正把道理了解透辟了以后，在计划的时分，才大概做到天马行空一样的自在。
一样，关于网页来讲，作为计划师，在界说网页布局和内容的时分，存眷的是网页的布局和内容，在排版的时分，存眷的扫瞄器怎样显现这个页面。

我们说，p标志和div标志，实践上都是盒子，是夸大了成绩的一个方面。而从另外一个方面——布局和内容的方面来讲，固然是完整分歧的，不该该、也没有需要取代的。
</p>
大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

只看该作者 · 发表于 2015-1-17 20:09:33

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-1-26 22:44:31

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-2-5 05:54:38

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-2-11 07:30:43

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-2 00:51:06

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-11 03:54:22

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-3-17 22:08:30

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-25 08:09:22

可以使用 CSS 检查工具进行设计。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来讲讲：CSS网页制造教程:display属性行内元素和块级元素

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子