今天在测试时,意外发现inline元素是可以设置background与border的, 之前有所误解, 故对其它的css属性重新回顾了下
随手写了一个demo:
<h3>inline测试</h3>
<div style="width:110px">
<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 2.0的所有核心概念和属性,是学习和查询CSS不可或缺的资源。通过深入研究这个手册,开发者可以更好地掌握网页设计的细节,创造出美观且功能丰富的网页界面。
CSS 属性查询以及用法 CSS 属性查询是指在 HTML 标记语言中使用的样式表语言 CSS 的各种属性的查询和使用方法。该查询包含了绝大多数常用的 HTML 标签,以及其对应的属性和用法。 字体属性(Font) * font-...
同样,我们可以把块元素加上 display:inline 属性,让它也在一行上排列。 五、重点中的重重点 在 HTML 中,P 标签内不可包含 DIV 标签,这是因为 P 标签是一个块状元素,而 DIV 标签也是一个块状元素。在 HTML 中...
### CSS属性大全—基础属性详解 #### 一、字体属性 **1. 字体族科 (Font Family)** - **语法**: `font-family: [ <族科名称> | <种类族科> ],...[ <族科名称> | <种类族科> ];` - **允许值**: - `<族科名称>`: ...
在深入探讨CSS属性之前,我们先来了解一下CSS(层叠样式表)的基本概念。CSS是一种用于定义HTML或XML文档中元素的外观和布局的语言。它允许网页开发者将样式与结构分离,提供了一种控制字体、颜色、大小、位置以及更...
其他Css属性 * display:设置元素所属类别 * none:不显示在屏幕上 * block:块级元素 * inline:内联元素 * list-item:列表元素 本文总结了Css+div中常用的标签及属性,并对其进行了分类和说明,旨在帮助开发者...
CSS属性定义了元素的视觉效果,如颜色、字体、大小、位置等。常见的属性有: - `color`:设置文本颜色。 - `background-color`:设置背景颜色。 - `font-size`:设置字体大小。 - `margin`/`padding`:控制元素...
这个“CSS属性速查表”PDF文件显然是一个非常实用的工具,旨在帮助开发者快速查找和理解各种CSS属性,提高工作效率。 在CSS中,属性是用来设置元素外观、布局和结构的关键元素。以下是一些常见的CSS属性类别及其...
`display`属性控制元素如何显示,如`block`、`inline`、`none`。 5. **尺寸属性**:`width`和`height`定义元素宽度和高度,可用像素或百分比。`max-width`和`min-width`限制最大最小宽度,同理适用于高度。 6. **...
### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中,**文档流**是一个核心概念,它指的是HTML文档中元素的自然流动...通过合理利用这些元素的特性和CSS属性,可以创建出既美观又实用的网页设计。
**CSS属性`display:inline-block`深入理解** 在CSS布局中,`display:inline-block`是一个非常重要的属性,它结合了`block`和`inline`两种显示方式的优点,使得元素既能保持内联元素的特性(如同行排列,允许空格)...
### CSS文档流与块级元素(block)、内联元素(inline)详解 #### 一、文档流的概念 在深入探讨块级元素与内联元素之前,我们首先要理解**文档流**的基本概念。文档流是指HTML文档中元素按照一定规则排列的方式。在...
(2)块级元素转换为行内元素 display:inline; (3)行内块 元素 display:inline-block√、 单行文字垂直居中 文字的行高line-height=盒子高度 仅限于单行文字垂直居中 3.css的背景属性 (1)背景颜色 选择器{ ...
### 简单实用的CSS属性详解 #### CSS Clip 属性 **CSS Clip** 属性是一种非常实用且灵活的方法,可以用来隐藏元素的部分内容。它的工作原理类似于在页面上放置了一个“面具”,允许我们通过定义一个矩形区域来裁剪...
CSS属性是定义元素外观的关键组成部分,它们控制着颜色、布局、字体、位置等视觉效果。以下是一些常见的CSS属性及其重要性: 1. **颜色属性**:如`color`用于设置文本颜色,可以使用颜色名称、十六进制代码、RGB、...
CSS属性是CSS的核心组成部分,它们定义了元素如何在页面上呈现。以下是一些关键的CSS属性及其作用: 1. **颜色属性**:如`color`,用于设置文本颜色;`background-color`用于设置元素背景色。你可以使用颜色名称、...
`display` 控制元素的显示方式,`block`使元素变为块级元素,`none`隐藏元素,`inline`使其成为内联元素。 `overflow` 管理元素内部内容溢出,`hidden`会隐藏超出元素边界的内容。 `cursor` 定义光标样式,如`cursor...
这只是CSS属性中的一小部分,实际上,CSS有上百个属性,每个都有其特定用途,构建出丰富多样的网页设计。通过熟练掌握这些属性,开发者能够精确控制网页元素的显示效果,从而创建出美观、响应式的网页。