首页 相关文章 CSS教程:2个重要概念块状元素和内联元素

CSS教程:2个重要概念块状元素和内联元素

在用CSS布局页面的时候,我们会将HTML标签分成两种,块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a就是内联元素)。是在CSS布局页面中很重要的两个概念,必须要理解透彻!既然说到概念就先看看块状元素和内联元素的定义。

注:这节课看似挺长,其实内容很少,通过举例子让大家更容易理解而已,不要被眼前的文字和代码吓到哟~
块状元素
一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。常见块状元素为div和p。
内联元素
内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。常见内联元素为a。
做了个对比表,帮助大家更容易理解。



对于上面的概念,我们用实例的方式给大家讲明白,要注意听哟~
要求:[ 查看全文 ]

2016-02-20 标签:
  • 标签:Web开发
    提示:本文不是教程,而是对闭合浮动元素的方法在某个特定情况下的现象的讨论,涉及float、clear、overflow、:after等知识,新手勿入。 float属性在页面排版上非常有用,但是也带来很多问题。最常见的就是浮动元素的闭合问题。 如果一个没有设定高度的不浮动元素的子元素浮动,则该元素的高度不会包括浮动子元素的高度,而只会包含其内部不浮动元素的高度,因为浮动元素不属于常规流向,它脱离了文档流...[ 查看全文 ]
  • 标签:Web开发
    块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的...[ 查看全文 ]
  • 标签:Web开发
    关于用CSS来实现元素的定位问题,其实很多人对此都是一知半解,没有形成一个统一的认识,CSS对元素的定位包括相对定位和绝对定位,同时,还可以把相对定位和绝对定位结合起来,形成混合定位,我收集相关资料总结了一下: 1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: 以下是引用片段: #div-1 {  position:static; } ...[ 查看全文 ]
  • 标签:Web开发
    块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,tabl...[ 查看全文 ]
  • 标签:Web开发
    1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: #div-1 { position:static; } 2. position:relative|相对定位 使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置。 如果要让div-1层向下移动20px,左移40px: example: #div-1 { position:relative; top:20px; le...[ 查看全文 ]
  • 标签:Web开发
    CSS文档流与块级元素(block)、内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的CSS权威指南,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. ...[ 查看全文 ]
  • 标签:Web开发
    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法 就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额...[ 查看全文 ]
  • 标签:Web开发
    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的...[ 查看全文 ]
  • 标签:Web开发
    块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。“form”这个块元素比较非凡,它只能用来容纳其他块元素。 假如没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table...[ 查看全文 ]
  • 标签:Web开发
    最近两个月断断续续做了好几个网站的美工,做的过程中对DIV+Css的标准开发有了进一步的了解。有两点收获最大,一是彻底弄懂了CSS的盒子模式(Box Model),再一个就是搞定了困扰我很久的闭合浮动元素的问题: 一般说来如果某个子元素使用了浮动(float),那父元素总是不能确切地知道子元素是在什么位置结束的,所以父元素的下边框总是从子元素的中间甚至是顶部穿过,看起来很不舒服。 最早时我...[ 查看全文 ]
  • 标签:Web开发
    在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(selector)。 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素。 类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[clas...[ 查看全文 ]
  • 标签:Web开发
    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外...[ 查看全文 ]
  • 标签:Web开发
    伪元素吸附在选择上和pseudo classes伪类很像,像这样selector:pseudoelement{property: value;}。有四种方式。 First letters and First lines 首字母和首行 first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可以,例如为段落创建一个drop caps和首行加粗。 p:first-letter {     font-size: 3em...[ 查看全文 ]
  • 这个时代,最不能容忍的就是没有创意,除了扁平化设计、复古设计、拟物设计、还有神马可以注入到我们的页面设计中呢? 嘿!还记得我们初中时候的几何课么?显然,有很多设计师已经不愿意提及这段不堪回首的往事?角边角、边角边、边边边!哈哈,好吧瞧我还记得这些概念!那么今天我们要谈的就是如何把这些几何元素运用到网页设计中。 其实web页面天然包含几何元素:栏、列、版块、表格,所以这也让许多web...[ 查看全文 ]
  • 标签:Web开发
    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法 就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而...[ 查看全文 ]
  • 标签:Web开发
    CSS3草案中定义了 {opacity: | inherit;} 来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性 来实现的,所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素透明的方案: 浏览器 最低 版本 方案 Internet Explorer filter: "alpha(opacity=xx)"; filter: "progid:DXImageTransform.Microsoft.Alpha(...[ 查看全文 ]
  • 标签:Web开发
    div和span用来为内容指定样式或绑定脚本。虽然大多数HTML元素可以通过style属性来设置样式信息,但是许多HTML元素有自己默认的样式,该样式可能和style定义的样式混合甚至冲突,是我们不希望看到的。如:strong style = “color: red”I am strong!/strong。和其他html元素不同,div和span没有默认的显示样式。所以可以通过它们来指定样式。 (1)div(division)是块级元素,可以包含段落、标题、...[ 查看全文 ]
  • 标签:Web开发
    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通...[ 查看全文 ]
  • 标签:Web开发
    原文:http://rong179.blogbus.com/logs/24966909.html 声明 定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。 平台:win/IE win/FF z-index: 用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序 值: auto | 整数 | inherit 默认: auto 适用于: 定位元素 继承性: no 理解stacking context 每个box都归属于一个stacking ...[ 查看全文 ]
  • 标签:网络游戏
    《天堂II》写给元素同行和喜欢元素的人     所有的元素同行们,我想问问你们,你们自己了解我们自己的职业吗?当初,你们为什么选择这个职业?是因为喜欢这个职业?还是喜欢带着小马拉风?     为什么你们中的很多人坚持不下去?时间不够?太烧钱觉得不划算?还是渐渐自己失去信心,觉得玩元素没有意思?我看到一个三章时就一起在古战场烧怪的元素朋友,现在依然是66级…另四...[ 查看全文 ]
手机页面 收藏网站 回到头部