Css 中的 block,inline和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
- 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的同行特性。
Css 中的 block,inline和inline-block概念和区别的更多相关文章
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- 英文单词断行问题:CSS中word-break、word-wrap以及hyphens的兼容性和区别
CSS中一提到单词断行,最先映入脑海的肯定是word-break和word-wrap这两条属性.但对于这两条属性到底有什么区别,兼容性如何,我一直都概念模糊.今天抽空把它们以及CSS3中新加入的断行属 ...
- CSS中px,em,rem,pt的区别及四者换算?
本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...
- CSS中的块级元素(block)与行内元素(inline)
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...
- css中字体单位px,pt,em,百分比之间的区别和用法
px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em 相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem 结合相对定位和绝对定位的优势,相对根元素htm ...
- CSS 中 transform、animation、transition、translate的区别
在前端页面的开发过程中,经常会碰到这么几个 CSS 属性容易搞混:transform.translate.animation还有transition.下面就针对这几个 CSS 属性做一个对比,辨别这几 ...
- CSS中一个冒号和两个冒号有什么区别
一个冒号是伪类,两个冒号是伪元素 伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的.不存在于文档树中且表达方式也不同,所以叫伪类.伪元素所控制的内容和一 ...
- css中的单位px,em和rem的区别
一.px: px就是像素,用px设置字体大小的时候会比较精确,但是有时候我们会使用不同屏幕尺寸去浏览网页.当页面相应的扩大或者缩小的时候,页面的字体大小就会出现过小或者过大.由于这种问题,就提出了使用 ...
- div+css中height:auto !important; height:663px; min-height:663px !important;区别
height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已hei ...
随机推荐
- Apache POI HSSF,XSSF和SXSSF的区别
http://blog.csdn.net/benben_1678/article/details/39989683 写的很好,用SXSSF即可解决大数据量,内存占用过高问题
- 【转】微信公众开发URL和token填写详解
很多人不明白微信公众号开发者中心服务器配置里面的url和token是什么,不会填写.看了教程也不理解是什么,本文详述一下这个问题. 第一步:作为一名微信公众号开发者,别人进入你的微信公众号,肯定会看见 ...
- 放假前来个笑话:IT人士群聚喝酒的讲究(超级搞笑)
大家喝的是啤酒,这时你入座了…… 你给自己倒了杯可乐,这叫低配置. 你给自已倒了杯啤酒,这叫标准配置. 你给自己倒了杯茶水,这茶的颜色还跟啤酒一样,这叫木马. 你给自己倒了杯可乐,还滴了几滴醋,不仅颜 ...
- Bootstrap——网站添加字体图标
@font-face { font-family: 'itcast'; src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype ...
- PHP框架 Yii framework 用yiic命令时提示“php.exe”不是内部或外部命令
解决方案 yii/framework/yiic.bat,修改 if "%PHP_COMMAND%" == "" set PHP_COMMAND=php.exei ...
- iOS开发之-- 字符串的操作,去掉某一个字符或者替换成其他字符
一个简单的操作,记录下: NSString *strUrl = [urlString stringByReplacingOccurrencesOfString:@" " withS ...
- wordpress for sae
帮人建个站,准备用sae+wordpess,小研究一下 http://sae.sina.com.cn/?m=apps&a=detail&aid=1 http://wp4sae.org/ ...
- requests 安装
requests 是用来发送 HTTP 请求的一个库,requests 是对 urllib 和 urllib2 进行封装的一个模块,用来取代 urllib 和 urllib2,可以使用以下两种方法安装 ...
- 网站前端性能优化之javascript和css
之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...
- js 中的break continue return
break:跳出整个循环 1.当i=6时,就跳出了整个循环,此for循环就不继续了: continue:跳出当前循环,继续下一次循环: return :指定函数返回值 1.在js当中,常使用retur ...