首頁 > web前端 > html教學 > CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose

CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:43:19
原創
1078 人瀏覽過

今天终于对html中的块级元素和行内元素有了一个较为理性的认识。首先w3c对于block和inline的解释为:

 

一、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元素

  • 块级元素
  • 行内元素
  • 可变元素
  •   

    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板