display:block 与 display:inline 用法 - Loiy - ITeye博客

`

lzj0470

浏览: 1273574 次
性别:
来自: 深圳

最近访客更多访客>>

hedgehog12

chen88358323

wyx065747

jklwan

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

水野哲也：不不不, 这个您真错了!其实是你引用的那个jsp和本身的jsp ...
解析关于jsp页面指令冲突问题contentType="text/html;charset=UTF-8"
caobo_cb： import xx.cn.weibo.Util;
[ java版]新浪微博之ruquest_token篇
caobo_cb：你好 Util包没有
[ java版]新浪微博之ruquest_token篇
小桔子：你好！我遇到个问题 max_allowed_packet值总是 ...
mysql查询占用内存,优化的技巧
donghustone：谢谢大神！
用JSmooth制作java jar文件的可执行exe文件教程(图文)

display:block 与 display:inline 用法

博客分类：

css

阅读更多

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>

分享到：

div 里面放H2，div会被撑大？ | css padding在ie6,ie8,firefox中兼容性用 ...

2013-09-05 23:11
浏览 815
评论(0)
分类:开源软件
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

display:inline-block的实际应用: 2. **兼容性问题**：虽然 `display:inline-block` 在现代浏览器中支持良好，但在一些较旧的浏览器，如IE6/7，需要使用 `*zoom:1` 或 `display:inline` 并结合 `*display:inline` 来实现兼容。 3. **内联限制**：尽管...

有关display:inline-block在FF出现空白的解决方案: 当使用`display:inline-block`时，元素会像内联元素那样排列，但是它们仍然保留了块级元素的某些特性，如宽度、高度和内边距。在HTML中，空格、换行符甚至缩进都会被浏览器解析为一个空格，导致元素间产生空白。在...

CSS属性display:inline-block用法深入理解: 下面我们将深入探讨`display:inline-block`的用法及其浏览器兼容性问题。首先，`display:inline-block`的作用是将元素呈现为内联对象，这意味着它们会与其他内联元素排列在同一行中，不会强制换行。同时，`inline-...

css中display:block;的用法及适用标签详解: `），则在恢复其原始块级显示状态时，就需要使用`display: block;`。 `display: block;`还有其他用途，例如在创建自定义布局时，它可以用来使原本是内联元素的标签（如`<img>`、`<button>`等）表现出块级元素的特性...

display:inline-block的原理分析: 在 IE 中实现 `display:inline-block` 效果有两种常见方法： 1. 首先设置 `display:inline-block` 触发 layout，然后在另一个声明中设置 `display:inline`，这样元素会呈现为内联对象。需要注意的是，这两个声明...

span掉落的演示代码: 1. 使用`display:inline-block`而不是`display:block-inline`。 2. 确保元素内部没有额外的空白字符，或者通过CSS将这些空白设置为不可见（例如，`font-size:0`或`letter-spacing:-0.3em`）。 3. 设置`line-height`...

关于css display: inline block inline-block的区别分析: 要使块元素在IE下实现`inline-block`的效果，可以通过两种方法： - 先设置 `display: inline-block` 触发layout，再定义 `display: inline` 让元素呈递为行内对象。 - 直接将块元素设置为 `display: inline`，然后...

标签设置display：none后设置diplay=“”不显示1: 解决这个问题的方法是明确指定元素的显示类型，如 `display: block` 或 `display: inline`。这样做是因为 `block` 适用于块级元素，如 `div`、`p` 和 `h1` 等，而 `inline` 适用于内联元素，如 `span`、`a` 和 `em` ...

display:inline的用法: <div> DIV1 </div> <div> DIV2 ...和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了 <span

display:inline-block的使用示例: 在给定的示例中，我们看到如何使用`display:inline-block`来解决浮动元素导致的换行问题。在传统的多列布局中，我们通常使用`float:left`来实现元素并排显示。然而，这种方法存在一个问题，即如果父容器的宽度小于...

CSS中display:block的作用介绍: 当需要这些内联元素占据整行并应用 `width`、`height` 或其他与尺寸相关的属性时，就需要使用 `display: block` 来转换它们的行为。例如，如果有一个链接 `<a>`，我们希望它能像块级元素一样占据整行并有特定的...

深入display:inline-block: 首先，`display:inline-block`将元素的呈现方式设为内联对象，这意味着元素会与其他内联元素并排显示，遵循文本流的方向。同时，它的内容会按照块级元素的方式进行布局，允许设置宽度、高度、内边距和外边距，这些都...

让IE6/IE7支持display:inline-block属性的两种方法: 方法一：使用`display:inline`覆盖`display:inline-block` 这种方法基于IE6和IE7的一个特性，它们会忽略星号(*)前的CSS声明。我们可以首先为所有浏览器设置`display:inline-block`，然后使用星号(*)选择器专门为IE6...

css之display属性之inline-block布局实现详解: 需要注意的是，`display: inline-block`在Internet Explorer 6和7中不被支持，需要使用特定的技巧来处理，例如使用`*zoom: 1;`和`display: inline;`的组合，或者利用`inline-table`等其他方法来模拟`inline-block`的...

Global site tag (gtag.js) - Google Analytics