块级元素与内联元素
来源:互联网 发布:淘宝坑产是什么意思 编辑:程序博客网 时间:2024/06/06 08:37
块级元素display:block-level elements ——默认为独立的一块,会单独换一行。
内联元素inline:inline elements—— 前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
display:inline 将块级元素显示为内联元素
display:inline-block
简单来说就是将对象呈现为内联对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
注意:并非所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari。在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。由于它本就是行布局,所以触发后,块元素依然还是行布局。
IE下块元素如何实现display:inline-block的效果
有两种方法:
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如
下:
内联元素inline:inline elements—— 前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
display:block、display:inline和display:inline-block区别和用法
display:block 将内联元素显示为块级元素
- 多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。
- block元素可以设置margin和padding属性。
display:inline 将块级元素显示为内联元素
- 其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为内联对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
注意:并非所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari。在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。由于它本就是行布局,所以触发后,块元素依然还是行布局。
IE下块元素如何实现display:inline-block的效果
有两种方法:
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如
下:
div {display:inline; zoom:1;...}
下面用一个例子说明这三者的区别和用法
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>display:inline、block、inline-block的区别</title></head><style>div,span{margin:5px;border:1px solid black;padding:5px;height:52px;color:#fff; font-size: 20px;}.block{display:block;background-color:skyblue;}.inline{display:inline;background-color:salmon;}div.ib{display:inline-block;background-color:sandybrown;}div.ib{display:inline;background-color:silver;}a.ib{display:inline-block;background-color:slateblue;}a.ib{display:block;background-color:seagreen;}span.son{padding:0;margin:0;border:0;vertical-align:middle;height:100%}</style><body><div style="background-color: cornflowerblue;">div display:block</div><div class="inline">div display:inline</div><div class="ib">div display:inline-block</div><span style="background-color: darkgoldenrod;">span display:inline</span><span class="block">span display:block</span><span><a class="ib">a display:block</a></span><br /><div style="background-color:sienna;">vertical-align:middle<span class="son" style=" background-color: burlywood;">div里的span</span></div></body></html>
效果图
0 0
- CSS块级元素与内联元素
- 块级元素与内联元素
- HTML--内联元素与块级元素
- 块级元素与内联元素区别
- 块级元素与内联元素
- 块级元素与内联元素整理
- 块级元素与内联元素整理
- 块级元素与内联元素整理
- 常见块级元素与内联元素
- 块级元素与内联元素总结
- 块级元素与内联元素
- 块级元素与内联元素用法
- 块级元素与内联元素总结
- 块级元素与行内元素(内联元素)
- 块级元素、内联元素、可变元素
- 块元素、内联元素
- CSS文档流与块级元素和内联元素
- CSS文档流与块级元素和内联元素
- ubuntu 14.04修改root环境变量
- 软工文档总结篇(一)
- 第2.1.9章 WEB系统最佳实践Spring文件配置之spring-dubbo.xml
- c#中字符串操作函数
- 判断完全二叉树
- 块级元素与内联元素
- 关于重载和比较函数
- 关于C语言内存移动函数的写法详解
- Java环境变量的配置
- 基本session与cookie代码中写入,以及url路径防非法登录
- 安卓精选面试题
- javascript入门基础篇重点 第五节
- android studio 找不到 javax.*包
- java动态代理