CSS
2016-07-21 14:43
274 查看
display:inline; 内联元素,简单来说就是在同一行显示。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
display:inline-block; 就是在同一行内的块级元素。
<a href="#" style="display:inline;background:#ccc;">链接一</a>
<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
A默认就是一行,所以inline用在这里是没用,宽高度设置也没用。
<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
块状,这里高宽度就生效了,但是因为是块状,前后有换行符,所以这是两行了。
<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>
这样就是同时达到块状,而且在同一行显示。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
display:inline-block; 就是在同一行内的块级元素。
<a href="#" style="display:inline;background:#ccc;">链接一</a>
<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
A默认就是一行,所以inline用在这里是没用,宽高度设置也没用。
<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
块状,这里高宽度就生效了,但是因为是块状,前后有换行符,所以这是两行了。
<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>
这样就是同时达到块状,而且在同一行显示。
相关文章推荐
- 响应式布局----像素密度与viewport
- normalize.css
- 前端reset样式
- css
- css中clearfix清除浮动的用法及其原理示例介绍
- 关于css样式表里面什么时候用.和#
- css实现纯文字内容元素透明背景(兼容IE6)
- CSS border边框属性教程 CSS 边框即CSS
- css画布
- CSS3新增的属性
- CSS3跟CSS2相比较,有哪些重大的变化
- css3八大新功能
- CSS布局分享
- HTML/CSS]盒子模型,块级元素和行内元素
- css三角绘制探究(tooltip类似组件绘制)
- css三角绘制探究(tooltip类似组件绘制)
- css计数器详解
- font-face跨域办法
- css3动画简介以及动画库animate.css的使用
- css颜色+内联框架+嵌字矩形框