display:block 让块级元素变成行级元素。而display:inline则相反。如:
span默认是块级元素
div默认是行级元素
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.boder{border: 1px solid #666;}
</style>
</head>
<body>
<div class="boder">
<span>我是块级元素</span>
<span>我是块级元素</span>
</div>
<div class="boder">
<span style="display:block;">我被加了“display:block;”,变成行级元素</span>
<span style="display:block;">我被加了“display:block;”,变成行级元素</span>
</div>
</body>
</html>
分享到:
相关推荐
本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...
2. **兼容性问题**:虽然 `display:inline-block` 在现代浏览器中支持良好,但在一些较旧的浏览器,如IE6/7,需要使用 `*zoom:1` 或 `display:inline` 并结合 `*display:inline` 来实现兼容。 3. **内联限制**:尽管...
当使用`display:inline-block`时,元素会像内联元素那样排列,但是它们仍然保留了块级元素的某些特性,如宽度、高度和内边距。在HTML中,空格、换行符甚至缩进都会被浏览器解析为一个空格,导致元素间产生空白。 在...
下面我们将深入探讨`display:inline-block`的用法及其浏览器兼容性问题。 首先,`display:inline-block`的作用是将元素呈现为内联对象,这意味着它们会与其他内联元素排列在同一行中,不会强制换行。同时,`inline-...
`),则在恢复其原始块级显示状态时,就需要使用`display: block;`。 `display: block;`还有其他用途,例如在创建自定义布局时,它可以用来使原本是内联元素的标签(如`<img>`、`<button>`等)表现出块级元素的特性...
在 IE 中实现 `display:inline-block` 效果有两种常见方法: 1. 首先设置 `display:inline-block` 触发 layout,然后在另一个声明中设置 `display:inline`,这样元素会呈现为内联对象。需要注意的是,这两个声明...
1. 使用`display:inline-block`而不是`display:block-inline`。 2. 确保元素内部没有额外的空白字符,或者通过CSS将这些空白设置为不可见(例如,`font-size:0`或`letter-spacing:-0.3em`)。 3. 设置`line-height`...
要使块元素在IE下实现`inline-block`的效果,可以通过两种方法: - 先设置 `display: inline-block` 触发layout,再定义 `display: inline` 让元素呈递为行内对象。 - 直接将块元素设置为 `display: inline`,然后...
解决这个问题的方法是明确指定元素的显示类型,如 `display: block` 或 `display: inline`。这样做是因为 `block` 适用于块级元素,如 `div`、`p` 和 `h1` 等,而 `inline` 适用于内联元素,如 `span`、`a` 和 `em` ...
<div> DIV1 </div> <div> DIV2 ...和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了 <span
在给定的示例中,我们看到如何使用`display:inline-block`来解决浮动元素导致的换行问题。 在传统的多列布局中,我们通常使用`float:left`来实现元素并排显示。然而,这种方法存在一个问题,即如果父容器的宽度小于...
当需要这些内联元素占据整行并应用 `width`、`height` 或其他与尺寸相关的属性时,就需要使用 `display: block` 来转换它们的行为。 例如,如果有一个链接 `<a>`,我们希望它能像块级元素一样占据整行并有特定的...
首先,`display:inline-block`将元素的呈现方式设为内联对象,这意味着元素会与其他内联元素并排显示,遵循文本流的方向。同时,它的内容会按照块级元素的方式进行布局,允许设置宽度、高度、内边距和外边距,这些都...
方法一:使用`display:inline`覆盖`display:inline-block` 这种方法基于IE6和IE7的一个特性,它们会忽略星号(*)前的CSS声明。我们可以首先为所有浏览器设置`display:inline-block`,然后使用星号(*)选择器专门为IE6...
需要注意的是,`display: inline-block`在Internet Explorer 6和7中不被支持,需要使用特定的技巧来处理,例如使用`*zoom: 1;`和`display: inline;`的组合,或者利用`inline-table`等其他方法来模拟`inline-block`的...