css -- 通俗理解inline、block、inline-block
display:inline; 内联元素,简单来说就是在同一行显示。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
display:inline-block; 就是在同一行内的块级元素。
<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
默认就是inline,所以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>
这样就是同时达到块状,而且设置高度有效并在同一行显示。
css -- 通俗理解inline、block、inline-block的更多相关文章
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- block, inline和inline-block的区别
display:block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1& ...
- div横排放置对齐问题;block,inline,inline-block区别
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. 缺点:不易控制 2.只有左侧div设置为float:left,右侧div设置 ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- dispay属性的block,inline,inline-block
转自下面的几位大神: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 bl ...
- block inline 和 inline-block
概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素). block元素通常 ...
- 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展
1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向 ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:block;inline;inline-block大总结
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
随机推荐
- Response.ContentType 详细列表-请求的内容类型详细记录
Response.ContentType 详细列表-请求的内容类型详细记录 作者:王春天一.应用实例: Response.Clear(); Response.ContentType = "t ...
- python函数中参数是如何传递的?
python中一切皆对象,函数中参数传递的是对象的引用. 1在函数中改变变量指向的对象,即指向不同对象. 当在函数中修改传递进来的变量指向另一个对象时,实参的对象不会改变. >>> ...
- ubuntu14中创建python虚拟环境
一.安装python-virtualenv包 sudo apt-get install python-virtualenv 安装完成后,创建一个虚拟环境文件夹. mkdir VENVcd VENV 创 ...
- cocos2dx 3.3将坐标由父空间转化到局部空间
设在node的父空间内有一点p,要求其转化到node局部空间后的坐标p_local,代码如下: node->getNodeToParentTransform();//in order node- ...
- Android开发2——创建测试项目
一.创建普通Android项目 二.在AndroidManifest.xml添加两个配置 <?xml version="1.0" encoding="utf-8 ...
- 【Android】11.5 创建和管理Fragments
分类:C#.Android.VS2015: 创建日期:2016-02-22 一.简介 想要管理activity中的fragment,可以用FragmentManager类来实现.通过在activity ...
- Objective-C之成魔之路【13-预处理程序】
郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠.支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 预处理提供 ...
- Jmeter常见用法
Jmeter (底层语言是Java) 单进程 Loadrunner (底层语言是C) 多进程 性能更好,更稳定 Tomcat 线程模式(与Java有关的都是单进程) lr的支持最大并发 跟lic ...
- LeetCode: Populating Next Right Pointers in Each Node II 解题报告
Populating Next Right Pointers in Each Node IIFollow up for problem "Populating Next Right Poin ...
- 解决 windows10和ubuntu16.04双系统下时间不对的问题