CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose
一、block的研究
通过w3c的解释,也就是说block(块级)元素是独占一行显示的。它的兄弟元素必定不会与其在同一行中(除非脱离了文档流)。下面来说说block元素默认宽度的问题。
1、没设置宽度:默认为浏览器可视区同宽(浏览器默认样式被重置后)。
看到的那条黄线实为一个未设置宽高的DIV,边框为1像素黄色实线,可以看出是布满整个屏幕的。
2、自身没设置宽度,但是父元素设置了宽度:
这个例子中,黄线为一个未设置宽度的P,其父元素是一个宽度为200px的DIV,在控制台中输出P的offsetWidth(offsetWidth=border+width+padding)属性为:200。也就是说一定程度上P是继承了DIV的宽度的。但也不完全是,因为打印出的P的宽度是加上了2px的边框宽度的,所以说子元素未设置宽度的话是会100%填充父元素的宽的,但是不会填充高度!
看下面一道例题:
已有HTML代码:
如果应用了如下CSS:
.a{ width:200px; height:100px;}
.b{ padding:20%; background-color:red; } 问红色区域的大小为?width?height?
分析一下,因为.b是.a的子元素,而.b未设置宽度,我们通过刚才的研究得知,.b的宽度是完全填充.a的,这个宽度是包括边框(border)、边距(padding)在内的。也就是说我们可看到的.b的宽度仍为200px,不会因为加了padding而撑大!而高度则不然,为200*20%*2=80px。
所以本题的答案就呼之欲出了:width:200px;height:80px。(但未测试ie6下和混杂模式下的情况)
二、inline的研究
inline元素是可以在同一行显示多个的,直到浏览器窗口宽度不足以容纳才进行换行。我们来看看inline元素的宽高问题。
1、一个未设置宽高的span元素,加上1像素蓝色实线的显示效果是酱紫的:
2、给他的父亲加上50px的高度后是酱紫的:
1、2之间没有任何变化。
3、给他加上50px的高度后是酱紫的:
1、2、3显示是完全相同的。。
正常文档流下inline是不支持宽高设置的,所以例子中的span既不会继承父亲的宽高,自己设置的宽高也不能起作用。本身有的高度实为其默认的line-height的高度值。来看看给它加上padding的情况:
这个是加了padding:10的情况,他的父亲我设为了高度为10px的DIV。可以看出span超出了DIV,所以说,内联元素的宽高跟父元素是没关系的。
三、总结inline和block的区别
1、行内元素与块级元素直观上的区别
行内元素会在一条直线上排列,都是同一行的,水平方向排列
块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
2、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3、行内元素与块级元素属性的不同,主要是盒模型属性上。行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上无效。
四、常见的inline元素和block元素
推荐阅读
-
如何做出图中的效果?(块级元素浮动对齐)_html/css_WEB-ITnose
-
css——行内元素和块级元素的具体区别与行内块元素
-
HTML的行内元素与块级元素的区别?
-
html常见的块元素与内联(行内)元素用法说明(一)
-
块级元素 Vs 内联元素_html/css_WEB-ITnose
-
tips 前端 背景与元素的透明和模糊_html/css_WEB-ITnose
-
高度为0的块级元素的下外边距为什么没有效果?_html/css_WEB-ITnose
-
移除行块级元素之间的空格(译文)_html/css_WEB-ITnose
-
块级元素与行内元素_html/css_WEB-ITnose
-
深入理解CSS元素可见性visibility_html/css_WEB-ITnose