`

css的inline与block的区别

CSS 
阅读更多

display:inline就是将元素显示为块级元素.

block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

display:inline就是将元素显示为行内元素.

inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:

让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

分享到:
评论

相关推荐

    display:inline、block、inline-block的区别(转的)

    本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...

    CSS inline-block属性概述及其使用示例

    块级元素(block elements)来源于CSS盒子模型。块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。 行内元素(inline elements)排列方式是水平排列。行内块元素(inline-block ...

    css块状元素与内联元素以及inline-block

    CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...

    CSS属性display:inline-block用法深入理解

    **CSS属性`display:inline-block`深入理解** 在CSS布局中,`display:inline-block`是一个非常重要的属性,它结合了`block`和`inline`两种显示方式的优点,使得元素既能保持内联元素的特性(如同行排列,允许空格)...

    关于css display: inline block inline-block的区别分析

    display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有:Opera、Safari。 但很遗憾,最...

    css之display属性之inline-block布局实现详解

    `inline`值使得元素作为行内元素显示,这意味着元素会与其他行内元素如`&lt;span&gt;`、`&lt;a&gt;`等共享一行,不会单独占据一行。行内元素的宽度和高度是由其内容自动确定的,无法直接通过设置`width`和`height`来改变。此外...

    兼容浏览器的css inline-block写法

    在CSS中,display属性主要有四个值:none、block、inline和inline-block。其中block是默认值,代表块级元素,比如div,它会独占一行;inline则是内联元素的默认值,例如span,它不会独占一行;而inline-block则是...

    inline-block 前世今生1

    display:inline-block 属性是CSS布局中的一个重要概念,它允许元素具有内联元素的特性(如排列在同一行内),同时又能像块级元素那样设置宽度、高度和垂直对齐。这个属性在前端开发中被广泛应用,尤其是用于创建响应...

    跨浏览器的inline-block声明上承诺了很多提供的却很少

    在web设计中,"inline-block"是一种常用的CSS显示属性,它兼具内联元素和块级元素的特点。内联元素如,块级元素如,分别有其独特的布局特性。内联元素不会以新行开始,而是按照它们在文档中出现的顺序排列,而块级...

    有关display:inline-block在FF出现空白的解决方案

    在网页布局设计中,`display:inline-block` 是一个非常常用且强大的CSS属性,它允许元素在保持块级元素特性的同时,像内联元素一样并排显示。然而,在不同浏览器之间,尤其是在Firefox(FF)上,可能会遇到一些显示...

    CSS中使用inline-block来进行居中的示例

    迫切需要的方法:inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。  内容区...

    浅谈inline-block及解决空白间距

    在网页布局中,`display: inline-block` 是一个非常有用的 CSS 属性,它允许元素表现得像内联元素(inline)一样,同时可以设置宽高(block-like)。然而,在使用 `display: inline-block` 时,经常会遇到一个问题,...

    css几种解决inline-block间隙的方案(整理)

    为了弥补inline和block的不足,又扩充了inline-block属性; inline-blcok可以将对象呈递为内联对象,而内容作为块对象呈递。 通俗点讲就是“可定宽高的堆在一起”显示 为什么会有间隙 inline-blcok块之间的不可见...

    CSS教程:inline-block在各浏览器的显示

    《CSS教程:深入理解inline-block在各浏览器的显示差异》 CSS中的display属性是一个非常重要的样式规则,它决定了元素如何在页面上呈现。在众多的display值中,`inline-block`是一个特别有用的值,它结合了`inline`...

    display:inline-block的实际应用

    在网页设计中,`display` 属性是CSS...总之,`display:inline-block` 是一个强大的CSS工具,它能够帮助开发者实现更为灵活和精细的页面布局。在日常开发中,熟练运用这一属性,可以提高工作效率,提升网页设计的质量。

    CSS解决inline-block的错位问题

    ### CSS解决inline-block的错位问题 #### 一、问题背景 在网页布局中,`inline-block` 是一种常用的元素显示方式,它结合了 `inline` 和 `block` 的特性,使得元素既可以像 `inline` 元素那样不换行显示,又能够...

Global site tag (gtag.js) - Google Analytics