- 浏览: 1053355 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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 1180a标签的title属性可以实现鼠标放上去显示信息的功能 ... -
CSS 让div内的span在一行显示
2016-12-14 10:07 2118让div内的span在一行显示只需把span的style. ... -
jsf中xhtml文件访问
2016-12-11 23:12 623web.xml中的配置: ? 1 ... -
webpack 入门指南
2016-09-30 15:12 571什么是 webpack? webpack是近期最火的一款 ... -
用css 添加手状样式,鼠标移上去变小手,变小手
2016-08-16 14:25 1922用css 添加手状样式,鼠标移上去变小手,变小手 curso ... -
css学习3
2016-07-07 11:16 496一、概述 除了正常运 ... -
css 的学习1
2016-06-20 19:32 375css 中的 transparent到底是什么意思 透明的 ... -
标签<noscript>
2016-05-25 11:13 505<noscript> <iframe s ... -
CSS技术
2016-05-13 16:13 476padding是内边距 margin是外边距 一、CSS ... -
CSS原理与CSS经验分享
2016-05-13 15:52 422一、浏览器的发展与CSS ... -
html上显示默认值
2016-01-29 14:07 649使用onfocus事件检查当前值,如果是默认值,就将val ... -
html
2016-01-27 22:10 414html通常指的是用来写网页的超文本代码,HTML5只是HT ... -
html中化柱状图,折线图
2016-01-27 20:36 789<!DOCTYPE HTML PUBLIC " ... -
css学习
2015-12-07 23:38 336CSS(层叠样式表)是一种简单的设计语言,能够将页面变漂亮这回 ... -
ionic
2015-11-30 01:18 691PhoneGap是一个用基于HTML,CSS和JavaScri ... -
bootstarp基本CSS样式
2015-11-26 15:30 782路径: http://bootstrap.kinghack.c ... -
css的学习
2015-11-26 01:34 338学习css http://t.mb5u.com/css3/ -
如何在网页中循环播放声音
2015-08-06 23:48 817HTML中可以播放声音的标签有bgsound、embed、au ...
相关推荐
本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...
display:inline-block 将...不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似,为什么是“形似”而不是“神似”呢?这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症,比如使用这一属性后,
在iOS和Objective-C编程中,Block是一种强大的特性,它允许我们定义代码块并在需要的时候执行。Block可以看作是轻量级的函数,能够捕获并封装执行上下文中的变量,使得代码更加简洁、易读。这篇博客"Block实例------...
在网页布局中,`inline-block` 是一种常用的CSS布局方式,它允许元素保持内联特性的同时,具有块级元素的宽度和高度可调整性。然而,`inline-block` 在不同浏览器间存在兼容性问题,特别是在Firefox中有一个知名的...
CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...
display:inline-block 属性是CSS布局中的一个重要概念,它允许元素具有内联元素的特性(如排列在同一行内),同时又能像块级元素那样设置宽度、高度和垂直对齐。这个属性在前端开发中被广泛应用,尤其是用于创建响应...
本文主要关注`inline-block`元素的间距问题及其解决方案,同时也会对比`block`和`inline`的特性。 首先,`display: inline-block` 是一种混合型布局模式,它结合了`inline`元素的并排显示特性与`block`元素的宽高...
了解`block`和`inline`的区别,有助于开发者更好地控制网页布局和元素的显示方式。在编写HTML时,正确使用这两种元素类型,可以提高代码的可读性和可维护性,同时避免因忽视概念差异而引发的布局问题。在实际开发中...
在web设计中,"inline-block"是一种常用的CSS显示属性,它兼具内联元素和块级元素的特点。内联元素如,块级元素如,分别有其独特的布局特性。内联元素不会以新行开始,而是按照它们在文档中出现的顺序排列,而块级...
`display:inline-block`是其中一种特殊的值,它结合了`inline`和`block`两种显示特性的优点,使得元素既能像内联元素一样并排显示,又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
首先,让我们了解下 `display:inline-block` 的基本概念。当一个元素设置为 `display:inline-block` 时,它会像内联元素那样在同一行内排列,但同时也保留了块级元素的宽度、高度以及垂直对齐的能力。这使得开发者...
当使用`display:inline-block`时,元素会像内联元素那样排列,但是它们仍然保留了块级元素的某些特性,如宽度、高度和内边距。在HTML中,空格、换行符甚至缩进都会被浏览器解析为一个空格,导致元素间产生空白。 在...
1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...
元素均分宽度、两端自适应对齐的布局在移动web项目中的需求还是挺多的,使用inline-block元素,配合text-align:justify,再注意处理好一些细节问题,便可以在现代浏览器上实现两端对齐,但是最后一行的处理却是个...
总之,`display`属性的`inline`、`block`和`inline-block`提供了丰富的布局选择,根据设计需求灵活运用这些属性,可以创建出各种复杂的页面布局。理解和掌握这些基本概念对于前端开发者来说至关重要。
"使用display:inline-block居中没有宽度的元素"这个主题主要涉及到CSS中的两个关键概念:`text-align`属性和`display`属性的`inline-block`值,它们在实现动态或未知宽度元素的居中对齐上发挥着重要作用。...
在本文中,我们将深入探讨一个特定的问题:在IE6中,当`<a>`标签同时使用`inline-block`和`text-indent`属性时出现的显示异常。 `inline-block`是一个CSS布局属性,它使元素表现得像内联元素,但同时允许设置宽度、...