`
seavers
  • 浏览: 172995 次
  • 来自: ...
社区版块
存档分类
最新评论

inline元素上支持的css属性

    博客分类:
  • css
阅读更多
今天在测试时,意外发现inline元素是可以设置background与border的, 之前有所误解, 故对其它的css属性重新回顾了下

随手写了一个demo:

<h3>inline测试</h3>
<div style="width:110px">&nbsp;
<a href="#" style="
    background: #ccc;
    padding: 11px;
    margin-left: 80px;
    line-height: 70px;
    border: 1px solid blue;
">display</a>

<i href="#" style="
    background: #ccc;
    padding: 11px;
    margin-left: 80px;
    line-height: 70px;
    border: 1px solid blue;
    min-width: 10px;
    min-height: 10px;
    overflow: hidden;
    max-width: 10px;
    max-height: 10px;.;
    resize: both;
">inline</i>
</div>




经测试
1. inline元素, 有效的: background, margin-left, margin-right, padding, border
2. inline元素, 无效的: width, height, margin-top, margin-bottom
3. 因width, height无效, 因此下列属性也无效: text-align, text-indent, min|max-width|height, overflow
4. 原文字相关的依然有效, 如word-spacing,  word-wrap,  white-space, letter-spacing
5. 下面两个有效, line-height, vertical-align, box-shadow
6. float,position及与之相关top,left, 不考虑, 已经不是inline了

其中 border, line-height, 这两个可以多多利用

思考:
1. inline元素的宽高是不能定义, 即宽高度是由inline元素inline内容的元素决定的,(ie6,ie7下高度会受inline-block元素的影响)
2. 即宽高完全是自适应而得出的, 因此也不存在overflow的问题, min|max-width|height也没有影响
3. margin四个属性, left|right 与 top|bottom 有不同的待遇
4. margin-top, margin-bottom, 可以用line-height模拟, 但有很大不同, 与inline-block也不兼容,  另 margin:0 auto的居中效果, 也没有作用

其次:
1. div元素, 使用 display:inline 以上几条也成立
2. button元素, 使用display:inline, 样式没有变化, 等于于inline-block


最后:
mdn中说: 默认 inline-level 的元素 (inline + inline-block)
  • b, big, i, small, tt
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  • a, bdo, br, img, map, object, q, script, span, sub, sup
  • button, input, label, select, textarea

其中img, button, input, label, select, textarea 并没有以上的特征, 测试了一下, 设置inline与inline-block, 效果是一样的, 没有变化, 都等同于设置了inline-block







分享到:
评论

相关推荐

    css属性查询手册

    综上,《CSS属性查询手册》涵盖了CSS 2.0的所有核心概念和属性,是学习和查询CSS不可或缺的资源。通过深入研究这个手册,开发者可以更好地掌握网页设计的细节,创造出美观且功能丰富的网页界面。

    CSS属性查询以及用法

    CSS 属性查询以及用法 CSS 属性查询是指在 HTML 标记语言中使用的样式表语言 CSS 的各种属性的查询和使用方法。该查询包含了绝大多数常用的 HTML 标签,以及其对应的属性和用法。 字体属性(Font) * font-...

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

    同样,我们可以把块元素加上 display:inline 属性,让它也在一行上排列。 五、重点中的重重点 在 HTML 中,P 标签内不可包含 DIV 标签,这是因为 P 标签是一个块状元素,而 DIV 标签也是一个块状元素。在 HTML 中...

    CSS属性大全-基础属性

    ### CSS属性大全—基础属性详解 #### 一、字体属性 **1. 字体族科 (Font Family)** - **语法**: `font-family: [ &lt;族科名称&gt; | &lt;种类族科&gt; ],...[ &lt;族科名称&gt; | &lt;种类族科&gt; ];` - **允许值**: - `&lt;族科名称&gt;`: ...

    css属性表,非常详细

    在深入探讨CSS属性之前,我们先来了解一下CSS(层叠样式表)的基本概念。CSS是一种用于定义HTML或XML文档中元素的外观和布局的语言。它允许网页开发者将样式与结构分离,提供了一种控制字体、颜色、大小、位置以及更...

    Css+div_常用CSS标签及属性

    其他Css属性 * display:设置元素所属类别 * none:不显示在屏幕上 * block:块级元素 * inline:内联元素 * list-item:列表元素 本文总结了Css+div中常用的标签及属性,并对其进行了分类和说明,旨在帮助开发者...

    css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜 

    CSS属性定义了元素的视觉效果,如颜色、字体、大小、位置等。常见的属性有: - `color`:设置文本颜色。 - `background-color`:设置背景颜色。 - `font-size`:设置字体大小。 - `margin`/`padding`:控制元素...

    CSS属性速查表 pdf格式文件

    这个“CSS属性速查表”PDF文件显然是一个非常实用的工具,旨在帮助开发者快速查找和理解各种CSS属性,提高工作效率。 在CSS中,属性是用来设置元素外观、布局和结构的关键元素。以下是一些常见的CSS属性类别及其...

    CSS常用属性列表

    `display`属性控制元素如何显示,如`block`、`inline`、`none`。 5. **尺寸属性**:`width`和`height`定义元素宽度和高度,可用像素或百分比。`max-width`和`min-width`限制最大最小宽度,同理适用于高度。 6. **...

    CSS文档流与块级元素,css

    ### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中,**文档流**是一个核心概念,它指的是HTML文档中元素的自然流动...通过合理利用这些元素的特性和CSS属性,可以创建出既美观又实用的网页设计。

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

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

    CSS文档流与块级元素(block)、内联元素(inline)

    ### CSS文档流与块级元素(block)、内联元素(inline)详解 #### 一、文档流的概念 在深入探讨块级元素与内联元素之前,我们首先要理解**文档流**的基本概念。文档流是指HTML文档中元素按照一定规则排列的方式。在...

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    (2)块级元素转换为行内元素 display:inline; (3)行内块 元素 display:inline-block√、 单行文字垂直居中 文字的行高line-height=盒子高度 仅限于单行文字垂直居中 3.css的背景属性 (1)背景颜色 选择器{ ...

    简单实用的CSS 属性

    ### 简单实用的CSS属性详解 #### CSS Clip 属性 **CSS Clip** 属性是一种非常实用且灵活的方法,可以用来隐藏元素的部分内容。它的工作原理类似于在页面上放置了一个“面具”,允许我们通过定义一个矩形区域来裁剪...

    css属性值.rar

    CSS属性是定义元素外观的关键组成部分,它们控制着颜色、布局、字体、位置等视觉效果。以下是一些常见的CSS属性及其重要性: 1. **颜色属性**:如`color`用于设置文本颜色,可以使用颜色名称、十六进制代码、RGB、...

    更全的css属性分享

    CSS属性是CSS的核心组成部分,它们定义了元素如何在页面上呈现。以下是一些关键的CSS属性及其作用: 1. **颜色属性**:如`color`,用于设置文本颜色;`background-color`用于设置元素背景色。你可以使用颜色名称、...

    css常用属性

    `display` 控制元素的显示方式,`block`使元素变为块级元素,`none`隐藏元素,`inline`使其成为内联元素。 `overflow` 管理元素内部内容溢出,`hidden`会隐藏超出元素边界的内容。 `cursor` 定义光标样式,如`cursor...

    关于css属性的详细列表

    这只是CSS属性中的一小部分,实际上,CSS有上百个属性,每个都有其特定用途,构建出丰富多样的网页设计。通过熟练掌握这些属性,开发者能够精确控制网页元素的显示效果,从而创建出美观、响应式的网页。

Global site tag (gtag.js) - Google Analytics