`

行内元素和块级元素

    博客分类:
  • css
 
阅读更多

 

1.1.1 定义:

1.1.2 最常用的属性值:

block元素的特点:

总是另起一行开始;

宽度缺省是它所在容器的100%,除非设定一个宽度。

高度,行高以及顶、底边距都可控制;

inline元素的特点:

和其它元素都在一行上;

宽度就是它所容纳的文字或图片的宽度,不可改变。

高度,行高以及顶、底边距不可改变,左右(内、外)边距和边框,可以改变

注意元素范围是增大了,但是对元素周围的内容是没影响的

Inline-block元素的特点:

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。

注意对于inline-block属性,IE6/7只支持本身为inline的元素。

验证代码请参见附件:displayDemo.zip

1.1.3 inline-block浏览器兼容解决方案

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)

并不是所有浏览器都支持此属性,目前支持的浏览器有:OperaSafariIE中对内联元素使用display:inline-blockIE是不识别的,但使用display:inline-blockIE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

IE下块元素如何实现display:inline-block的效果?

有两种方法:
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inlineblocklayout不会消失)。代码如下(...为省略的其他属性内容):

div {display:inline-block;...}
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

div {display:inline; zoom:1;...}

 

  • 大小: 124.9 KB
分享到:
评论

相关推荐

    html中的行内元素和块级元素有哪些.pdf

    设置 position 属性也可以使行内元素转换为块级元素,但这只是副作用,它们的主要作用是干扰布局效果。 需要注意的是,块级元素的宽度会继承其父元素,但只有为行内元素设置 display:block; 才会有这样的效果,其他...

    行内元素和块级元素 displayDemo.html

    在HTML中,元素被分为两种主要类型:行内元素(Inline Elements)和块级元素(Block-level Elements)。这两种元素在页面布局中起着至关重要的作用,它们各自有不同的特性和使用场景。 1. 行内元素(Inline ...

    微信小程序布局之行内元素和块级元素

    元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...

    HTML行内元素与块级元素有哪些及区别?

    想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...

    CSS行内元素和块级元素的居中实例分析

    在CSS布局中,行内元素和块级元素的居中处理是常见的需求,尤其是在网页设计中。本篇文章主要探讨了这两种元素的水平居中和垂直居中的实例分析。 一、水平居中 1. **行内元素居中**:对于行内元素(如`<span>`、`...

    对行内元素和块级元素的一些认识

    在网页布局和设计中,了解行内元素和块级元素是非常基础且重要的概念。行内元素和块级元素是HTML中的两种主要元素类型,它们的行为和样式应用上有显著的差异,直接影响到页面的布局和内容展示。 首先,我们来看一下...

    前端日记01_行内元素和块级元素

    基本知识分类速览块级元素和行级元素的转换参考链接 欢迎大家来跟胖胖一起xio习! Hey,这里是胖胖的博客,目前正在学有关前端的知识,有时候会把一些遇到的问题记录下来和大家一起分享交流,有错误的话请大家指正~ ...

    行内块级元素.txt

    在HTML中,元素主要分为两大类:块级元素和行内元素。这两种类型的元素具有不同的显示特性和布局方式,掌握它们的区别对于编写高效且美观的网页至关重要。 #### 块级元素 块级元素(Block-level Elements)的特点...

    全面了解行内元素与块级元素的区别

    需要注意的是,块级元素能够包含行内元素和其它块级元素,但是行内元素不能包含块级元素,它只能包含文本或其他行内元素。这种特性在布局设计中常常被用来控制内容的组织和排布。 总结起来,行内元素和块级元素的...

    关于块级元素和行内元素

    块级元素和行内元素 块级元素和行内元素是 HTML 中两个基本的元素类型,它们在文档结构和布局中扮演着重要角色。本文将从块级元素和行内元素的定义、特点、区别、应用场景等方面,对它们进行详细的讲解。 块级元素...

    css中行内元素和块级元素的区别

    一、行内元素和块级元素的区别  1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列;  块级元素会占据一行,垂直方向排列。  2、 块级元素可以包含行内元素和块级元素;行内元素不能包含...

    css盒模型和块级、行内元素深入理解

    其中,盒模型和元素的分类(块级元素和行内元素)是理解页面布局的基础。本文将深入探讨这两个概念。 首先,盒模型是CSS中的核心概念,它定义了元素如何占用空间和与其他元素交互。每个HTML元素都可以被视为一个...

    【CSS基础学习】行内元素,块级元素,行内块级元素

    块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。 常见块级元素: header,form,ul,ol,table,article,div,hr,aside,...

    行内元素的盒模型1

    3. `inline-block`:结合了行内元素和块级元素的特性,元素在行内排列,但可以设置宽度和高度。 4. `table`:使元素呈现为表格,适用于创建简单的表格布局。 5. `none`:元素将不会在页面上显示,但依然保留其在DOM...

    HTML 80 道面试题及答案.docx

    行内元素只能包含文本和其他行内元素,而块级元素可以包含行内元素和其他块级元素。行内元素和块级元素在盒模型属性上也存在区别。 7. 空元素定义 空元素是指标签内没有内容的 HTML 标签。空元素是在开始标签中...

Global site tag (gtag.js) - Google Analytics