css 块状元素和内联元素

日期:2021-01-20 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

在用CSS合理布局网页页面的情况下,大家会将HTML标识分为两种,块状元素和内联元素(大家平时用到的div和p便是块状元素,连接标识a便是内联元素)。是在CSS合理布局网页页面中很关键的两个定义,务必要了解深入!既然说到定义就先看看块状元素和内联元素的界定。
注:这节课看似挺长,实际上內容非常少,根据举事例让大伙儿更非常容易了解罢了,不必被眼下的文本和编码吓到哟~
块状元素
1般是别的元素的器皿,可容下内联元素和别的块状元素,块状元素抵触别的元素与其坐落于同1行,宽度(width)高宽比(height)起功效。普遍块状元素为div和p。
内联元素
内联元素只能容下文字或别的内联元素,它容许别的内联元素与其坐落于同1行,但宽度(width)高宽比(height)不起功效。普遍内联元素为“a”。
做了个比照表,协助大伙儿更非常容易了解。
块状元素 内联元素
是不是容许别的元素同处1行 no yes
width和height是不是起功效 yes no
针对上面的定义,大家用案例的方法给大伙儿讲清白,要留意听哟~
规定:ID为div1的鲜红色(#900)地区,宽度和高宽比均为300像素,而且包括1个ID为div2的翠绿色地区,长度宽度
均为100像素的div2。
CSS编码以下:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
HTML编码以下:
<div id="div1">
<div id="div2"></div>
</div>
以便便捷初学者更好的学习培训,我把详细的编码传出来

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>“可容下内联元素和别的块状元素”</title>
<style type="text/css">
<!--
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
-->
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>

如何,是否下面的实际效果

假如你做出来了,就再次往下看,我们给刚刚的规定再加1个标准,在div1里放入1个连接a,內容为“可容下内联
元素和别的块状元素”色调为白色
CSS编码以下:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
a{color:#fff;}
HTML编码以下:

拷贝编码
编码以下:

<div id="div1">
<div id="div2"></div>
<a href="#">可容下内联元素和别的块状元素</a>
</div>

是否下面的实际效果

到这里,大家能够看获得div1这个块状元素里边有着两个元素,1个是块状元素div2,另外一个是内联元素a,这便是块状元素定义里边说的“1般是别的元素的器皿,可容下内联元素和别的块状元素”,为何要说1般呢,由于块状元素不只是用来做器皿,有时也有别的主要用途,例如运用块状元素将左右两个元素分隔些间距,再例如运用块状元向来完成父级元素的高宽比自融入,这层面的內容会在后边详尽解读,由于不属于本节专业知识,就很少说。

好~!大家再次加标准,在div1里边div2的后边再放入1个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编码以下:

拷贝编码
编码以下:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<a href="#">可容下内联元素和别的块状元素</a>
</div>

是否下面这个实际效果

是否和自身事前想像的不1样,本认为蓝色会处在翠绿色的右边,但是却坐落于下侧,假如你再加几个div4,div5一样的她们還是再次坐落于前1个下面,竖直排序,这便是块状元素定义中说的“块状元素抵触别的元素与其坐落于同1行”简言之,便是块状元素较为蛮横霸道,谁都别想和他坐同1行,甭管你是和他有亲戚关联的块状元素還是没什么联络的内联元素,都不好,都到下面1行待着去,看看事例中,翠绿色方块和蓝色方块是否各部同1行,内联元素a也别想和他处1行,可是事儿是沒有肯定的,块状元素并不是不容许别的元素和他处1行嘛,并不是较为蛮横霸道嘛,没事儿,咱有方法,实际甚么方法,大家后边会详尽解读,专业知识不属于本节內容,就也很少说了,大伙儿注意后边的实例教程唷~

到这里,我想大伙儿对“块状元素”的定义早已较为清晰了,下面根据事例给大伙儿再次解释“内联元素”的定义,自然還是再次加标准,加个甚么标准呢,在a的后边再加1个內容为“Love CSS”的连接,全部连接的情况设定为淡橙色(#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编码以下:

拷贝编码
编码以下:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<a href="#">可容下内联元素和别的块状元素</a>
<a href="#">Love CSS</a>
</div>

实际效果是否下面这个

两个联接a是否处在同1行(不必忘掉a是内联元素哟~),这就解释了定义上说的“内联元素容许别的内联元素与其坐落于同1行”,为何不说“内联元素容许别的元素与其坐落于同1行”,由于别的元素包含两种元素,内联元素和块状元素,它假如和内联元素在1块那就毫无疑问在1行了,假如和块状元素在1块,即便它愿意,他后边的块状元素也不一样意,块状元素会另起1行坐落于它的下1行。

大家再次加上标准,如今大伙儿给内联元素a在css中再加宽度和高宽比,例如width:100px;height:50px;看看有甚么转变
CSS编码
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
  3. #div3{width:100px; height:100px; background:#009;}
  4. a{color:#fff; background:#F93;width:100px;height:50px;}
看到实际效果了沒有,是否沒有任何转变呢,这就表明了定义中的内联元素的宽度(width)高宽比(height)不起功效,它的尺寸只随內部文字或别的内联元素转变,实际证实算是给大伙儿1个工作,自身来证实1下。

假如要让界定好的宽度和高宽比对内联元素起功效,有甚么方法沒有?回答是:自然。由于事儿沒有肯定的在CSS上面同样成立,由于CSS中有两种元素,内联元素和块状元素,可是宽度和高宽比只对块状元素起功效,内联元素不起功效,假如大家把内联元素转换成块状元素,他不就具备了块状元素的特点了嘛,自然宽度和高宽比也就起功效了,假如你能想起这个思路,证实你的人的大脑如今十分活跃哟,这时候候大家只必须给相应的内联元素再加1个特性display:block便可以了,以下
  1. a{color:#fff; background:#F93;width:100px;height:50px; display:block;}
如何,起功效了吧,和下面的实际效果1样嘛~
 

为何两个a不处在同1行了呢,那是由于这两个内联元素a都被转换变成块状元素,既然取得成功转换为块状元素,就应当具备块状元素最明显的1个特性,不容许别的元素与他同1行,因此这两个a竖直排序喽~
那有木有把法让她们处在同1行?自然有啦,后边课程会告知大伙儿^_^
好了,到这里,大伙儿根据案例对内联元素的定义了解的也应当很深入了,后边就列出全部的内联元素和块状元素,便捷之后大伙儿查阅


块元素(block element)
address - 详细地址
blockquote - 块引入
center - 举中对齐块
dir - 文件目录目录
div - 常见块级非常容易,也是CSS layout的关键标识
dl - 界定目录
fieldset - form操纵组
form - 互动表单
h1 - 大题目
h2 - 副题目
h3 - 3级题目
h4 - 4级题目
h5 - 5级题目
h6 - 6级题目
hr - 水均分隔线
isindex - input prompt
menu - 菜单目录
noframes - frames可选內容,(针对不适用frame的访问器显示信息此区块內容
noscript - 可选脚本制作內容(针对不适用script的访问器显示信息此內容)
ol - 排列表单
p - 段落
pre - 文件格式化文字
table - 报表
ul - 非排列目录
内联元素(inline element)
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不强烈推荐)
bdo - bidi override
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 - 界定自变量
上一篇:对于流行访问器的CSS 返回下一篇:没有了