css菜鸟学习之block,inline和inline-block概念和区别
block,inline和inline-block概念和区别
总体概念
- block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
- 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
- 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
- block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
- 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
block,inline和inlinke-block细节对比
- display:block
- block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
- display:inline
- 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
- 简单来说就是将对象呈现为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属性的表象。
css菜鸟学习之block,inline和inline-block概念和区别的更多相关文章
- css菜鸟学习之text-align属性,行内元素,块级元素居中详解
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...
- CSS基础学习(一) 之 line-height 与 height 属性区别
官方定义: height:定义了了元素的高度.默认情况下,该属性订了 content area(内容区域) 的高度.如果box-sizing属性设置为 border-box,那么height就表示bo ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- css(二) block,inline和inline-block概念和区别
转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...
- Css 中的 block,inline和inline-block概念和区别
1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现 ...
- HTML/CSS:block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 2017-08-20 block,inline和inline-block概念和区别
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- block,inline和inline-block概念和区别(转)
转自 http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...
随机推荐
- ggplot2绘图系统
ggplot2包实现了一个在R中基于全面一致的语法创建图形时的系统 .在ggplot2中,图是采用串联起来(+)号函数创建的.详细内容参见<ggplot2:数据分析与图形艺术>,这里只简要 ...
- 中国移动OnetNet云平台 使用WIFI模块ESP8266 TCP透传模式传输数据流步骤
测试使用工具: WIFI模块型号:ESP8266 https://item.taobao.com/item.htm?spm=a1z10.1-c.w137712-175513579.2.btbD9X&a ...
- 用Visual Studio编辑Linux代码
估计很多人都是用惯了Visual Studio的主,怎么也不适应Linux的一套编辑器,比如vim.source insight这些东西,可视化的eclipse效果还好点,但一般以远程共享一台Linu ...
- ubuntu下使用free命令查看内存实际占用(待补充)
free不带选项运行会显示一个以kb为单位的默认输出 free -h人类能看懂的方式显示 free -m MB的方式显示 free -g GB方式显示 used=total-free即total=us ...
- JavaWeb:前端开发基础
JavaWeb:前端开发基础 内联元素和块级元素 说明: 联元素和块级元素都是html中的范畴,块元素和内联元素的主要差异是块元素是从新的一行开始.而内联元素一般显示在一行上.但是可以通过css的di ...
- Mysql 导入实战
这个几天公司迁移预览版数据库,当前公司使用的是 Mysql 数据库,版本为 5.6.迁移的数据库大小也不算很大,2G 多一点,总体以小表为主,就几张表数据比较大,有业务记录表达到了 150W 的数量级 ...
- PHP常用正则验证
手机号,身份证,ip验证 //正则验证手机号 正确返回 true function preg_mobile($mobile) { if(preg_match("/^1[34578]\d{9} ...
- Netty入门例子
新建maven项目,添加依赖 <!-- https://mvnrepository.com/artifact/io.netty/netty-all --> <dependency&g ...
- HTTP- 头部信息
HTTP 头部信息由众多的头域组成,每个头域由一个域名,冒号(:)和域值三部分组成.域名是大小写无关的,域值前可以添加任何数量的空格符,头域可以被扩展为多行,在自每行开始处,使用至少一个空格或制表符. ...
- html怎样可是使文本框内容不可修改
html怎样可是使文本框内容不可修改 <input type="text" readonly="readonly" onfocus="alert ...