- 浏览: 992179 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1441)
- 软件思想&演讲 (9)
- 行业常识 (250)
- 时时疑问 (5)
- java/guava/python/php/ruby/R/scala/groovy (213)
- struct/spring/springmvc (37)
- mybatis/hibernate/JPA (10)
- mysql/oracle/sqlserver/db2/mongdb/redis/neo4j/GreenPlum/Teradata/hsqldb/Derby/sakila (268)
- js/jquery/jqueryUi/jqueryEaseyUI/extjs/angulrJs/react/es6/grunt/zepto/raphael (81)
- ZMQ/RabbitMQ/ActiveMQ/JMS/kafka (17)
- lucene/solr/nuth/elasticsearch/MG4J (167)
- html/css/ionic/nodejs/bootstrap (19)
- Linux/shell/centos (56)
- cvs/svn/git/sourceTree/gradle/ant/maven/mantis/docker/Kubernetes (26)
- sonatype nexus (1)
- tomcat/jetty/netty/jboss (9)
- 工具 (17)
- ETL/SPASS/MATLAB/RapidMiner/weka/kettle/DataX/Kylin (11)
- hadoop/spark/Hbase/Hive/pig/Zookeeper/HAWQ/cloudera/Impala/Oozie (190)
- ios/swift/android (9)
- 机器学习&算法&大数据 (18)
- Mesos是Apache下的开源分布式资源管理框架 (1)
- echarts/d3/highCharts/tableau (1)
- 行业技能图谱 (1)
- 大数据可视化 (2)
- tornado/ansible/twisted (2)
- Nagios/Cacti/Zabbix (0)
- eclipse/intellijIDEA/webstorm (5)
- cvs/svn/git/sourceTree/gradle/jira/bitbucket (4)
- jsp/jsf/flex/ZKoss (0)
- 测试技术 (2)
- splunk/flunm (2)
- 高并发/大数据量 (1)
- freemarker/vector/thymeleaf (1)
- docker/Kubernetes (2)
- dubbo/ESB/dubboX/wso2 (2)
最新评论
总体概念
1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): •常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
•常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
3.block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
4.一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
block,inline和inlinke-block细节对比
•display:block
1.block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3.block元素可以设置margin和padding属性。
•display:inline
1.inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
2.inline元素设置width,height属性无效。
3.inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
•display:inline-block
1.简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
补充说明
•一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。
•IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。
1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): •常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
•常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
3.block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
4.一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
block,inline和inlinke-block细节对比
•display:block
1.block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3.block元素可以设置margin和padding属性。
•display:inline
1.inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
2.inline元素设置width,height属性无效。
3.inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
•display:inline-block
1.简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
补充说明
•一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。
•IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。
发表评论
-
a标签置灰不可点击
2017-08-25 10:08 1074a标签的title属性可以实现鼠标放上去显示信息的功能 ... -
CSS 让div内的span在一行显示
2016-12-14 10:07 2038让div内的span在一行显示只需把span的style. ... -
jsf中xhtml文件访问
2016-12-11 23:12 562web.xml中的配置: ? 1 ... -
webpack 入门指南
2016-09-30 15:12 523什么是 webpack? webpack是近期最火的一款 ... -
用css 添加手状样式,鼠标移上去变小手,变小手
2016-08-16 14:25 1865用css 添加手状样式,鼠标移上去变小手,变小手 curso ... -
css学习3
2016-07-07 11:16 449一、概述 除了正常运 ... -
css 的学习1
2016-06-20 19:32 324css 中的 transparent到底是什么意思 透明的 ... -
标签<noscript>
2016-05-25 11:13 459<noscript> <iframe s ... -
CSS技术
2016-05-13 16:13 446padding是内边距 margin是外边距 一、CSS ... -
CSS原理与CSS经验分享
2016-05-13 15:52 388一、浏览器的发展与CSS ... -
html上显示默认值
2016-01-29 14:07 594使用onfocus事件检查当前值,如果是默认值,就将val ... -
html
2016-01-27 22:10 377html通常指的是用来写网页的超文本代码,HTML5只是HT ... -
html中化柱状图,折线图
2016-01-27 20:36 731<!DOCTYPE HTML PUBLIC " ... -
css学习
2015-12-07 23:38 299CSS(层叠样式表)是一种简单的设计语言,能够将页面变漂亮这回 ... -
ionic
2015-11-30 01:18 642PhoneGap是一个用基于HTML,CSS和JavaScri ... -
bootstarp基本CSS样式
2015-11-26 15:30 729路径: http://bootstrap.kinghack.c ... -
css的学习
2015-11-26 01:34 283学习css http://t.mb5u.com/css3/ -
如何在网页中循环播放声音
2015-08-06 23:48 764HTML中可以播放声音的标签有bgsound、embed、au ...
相关推荐
NULL 博文链接:https://tianqiushi.iteye.com/blog/2101378
NULL 博文链接:https://hc24.iteye.com/blog/832493
display:inline-block 将...不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似,为什么是“形似”而不是“神似”呢?这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症,比如使用这一属性后,
inline/inline-block这个 bug 也存在于 IE8 下,在 IE6 和 IE7 下正常,要解决这个 bug,貌似目前没有什么好的方法,只能改变代码的缩进,把换行去掉,整个代码写入一行,需要的朋友可以参考下
css块状元素与内联元素以及inline-block
1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...
display:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于display:inline-block最大的不同就是其没有...每一行所有的inline元素和inline-block元素会共同形成一个line boxes,这个l
本文提供inline-block空隙--letter-spacing与字体大小/字体关系数据表,需要的朋友可以参考下
国内的论坛也好,国外的论坛也好,似乎大家都会比较疑惑这两者究竟是用来干什么的。想想其实好多人都会在这里犯一些比较常见错误,所以干脆就开一篇文章专门讲讲 block 和 inline 吧。
主要介绍了inline-block带来的元素间距问题解决,同时附上block和inline以及inlinke-block的作用对比,需要的朋友可以参考下
本文将带你深入剖析该属性值的前世今生,让你更好的理解和运用 inline-block。(本文约定 display:inline-block 简写为 inline-block) 开篇我们来看几个问题: IE6、7 真的不支持 display:inline-block 吗?di
元素均分宽度、两端自适应对齐的布局在移动web项目中的需求还是挺多的,使用inline-block元素,配合text-align:justify,再注意处理好一些细节问题,便可以在现代浏览器上实现两端对齐,但是最后一行的处理却是个...
为了弥补inline和block的不足,又扩充了inline-block属性; inline-blcok可以将对象呈递为内联对象,而内容作为块对象呈递。 通俗点讲就是“可定宽高的堆在一起”显示 为什么会有间隙 inline-blcok块之间的不可见...
一年前网上还找不到关于 inline-block 属性的文章,为了方便大家更好的理解该属性,当时总结整理了篇《display:inline-block的深入理解》。 而现在对于 inline-block 属性运用的需求也越来越多,可惜依旧只有 Fire...
display:block就是将元素显示为块级元素. block元素的特点是:总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度, , , <form>, <ul> 和 是块元素的例子。
各浏览器inline-block 元素默认的间隙,与字号。两个input,通过改变父元素font-size,用js计算他们之间空白的距离。貌似跟字体也有关系,测试时没有设置字体,也就是默认的字体。IE全系列chrome 39.0.2171.95(64-...
IE6中inline-block与text-indent同时使用时没想到也存在BUG,给a标签加上文本后使用text-indent将文字“隐藏”掉,在谷歌中显示完好,放到IE6中测试,却显示的很诡异,于是搜集整理中
使用display: inline-block构建的简单网格系统。 有关此技术如何工作的更多信息,请阅读。 安装 有几种方法可以做到这一点。 下面列出了两个: NPM 安装它 npm install inline-block-grid --save-dev 如果你这样做...
inline-flex 和 inline-block 一样,对内部元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块。