元素的分类:

块状元素

内联元素

可变元素

块状元素与内联元素的区别:

块状元素可以设置宽度和高度,内联元素不可以,内联元素的宽高是其自身的内容;

块状元素自上而下在显示,内联元素自左向右在一排显示;

内联元素和块状元素都遵循和模型设置,都可以设置padding、border、margin,但是内联元素的padding、和margin有时显示不正常;

块状元素一般作为其他内联元素的盒子使用;

常见的块状元素:div 、h1、h2、h3、h4、h5、h6、p、ul、dl、ol、li、dd、dt、form

常见的内联元素:span、a、b、strong、i、em、sup、sub、u、ins、s、del

元素类型转换的属性display

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

大多数块状元素的display默认值为block,

li的display默认值为list-item

大多数的内联元素的display默认值为inline,

img、input、textarea、select的默认值为inline-block

 

当内联元素,在CSS中定义下列属性中的一种,便具有块元素的特征
1)display:block;
2)float:left; (不但具有块元素的特征,同时像左侧浮动)
但是这时候的内联元素,虽然具有块状元素的特征,但是这两种有一点区别,第一种,彻头彻尾和块元素一模一样,都要单独占一行,从左至右,前提没有width和height属性,严格遵循流动布局模型块状元素的流动方式,自上至下流动,第二种,大小是恰好能将内容包含,并且右侧浮动,可以多个在一行。

当加上position:absolute/relative的时候,块状元素和内联元素,就不受父级区域的限制了,可以移动到任何位置,此时如果加上width和height属性,那么就具有层的特征了。(加上width和height还有一点好处,就是可以兼容IE浏览器了,所有的浏览器现实效果都一样了)

块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素

块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。
如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和cssbased layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说,css layout code应该有更好的美学体验。
你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。
需要说明的是:inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。

注意!置换元素和非置换元素

什么是置换元素?

一个 内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。

什么是非置换元素?

w3c并没有给出明确的非置换元素的解释,但能确定的是除置换元素之外,所有的元素都是非置换元素。

行内级置换和非置换元素的宽度定义

对于行内级非置换元素,宽度设置是不适用的。

对于行内级置换元素来说,其宽度的设置需遵循以下几点:

  • 若宽高的计算值都为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度;
    典型的例子是:拥有默认宽高的 input 当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度
  • 若宽度的计算值为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度;
    例子同上
  • 若宽度的计算值为 auto 且高度有 非auto 的计算值,并且元素有固有宽高比,则 width 的使用值为 高度使用值 * 固有宽高比
    典型的例子:img 当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置
  • 除此之外,当 width 的计算值为 auto 时,则宽度的使用值为 300px
    典型的例子:比如iframe, canvas

其它类型的置换元素,其宽度的定义都参照行内置换元素的定义。

行内级置换和非置换元素的高度定义

对于行内级非置换元素,高度设置是不适用的。

对于行内级置换元素来说,其高度的设置需遵循以下几点:

  • 若宽高的计算值都为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
  • 若高度的计算值为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
  • 若高度的计算值为 auto 且宽度有 非auto 的计算值,并且元素有固有宽高比,则 height 的使用值为:宽度使用值 / 固有宽高比
  • 若高度的计算值为 auto 且上述条件完全不符,则 height 的使用值 不能大于150px,且宽度不能大于长方形高度的2倍。

其它类型的置换元素,其高度的定义都参照行内置换元素的定义。


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。