欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2023-12-31 12:33:28
...
今天终于对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元素

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

    上一篇:

    下一篇: