块级元素和行内元素的表现:
块级元素:块级元素和父元素的宽度一致,默认情况下就是和body的宽度一样,也可以说和浏览器窗口的宽度一致,致使同一行不能再放下另外的元素,所以块级元素表现为独占一行。
块级元素可以设置宽高。
行内元素:行内元素不能设置宽高,它的宽度是由内容撑开的。但是当将元素设置为块级元素之后就可以设置宽高了。
特别说明:
当给元素添加position:absolute或者设置float的时候,就可以设置宽高了。这是因为:position和float会隐式的改变display类型,不论之前是什么类型的元素,只要设置了上面两个中的任意一个,都会让元素以display:block的方式显示,并获取block的一些特性:可以设置宽高,但是默认宽度并不占满父元素。
那么这里引申一些display、position和float之间关系的内容:
浏览器会为每个html元素生成矩形盒子,矩形盒子按照可见版式模型在页面上排布,可见的页面版式主要有position、display、float三个属性控制:
position属性控制页面上元素之间的位置关系
display属性控制元素是堆叠、并排还是根本不在页面上出现
float属性提供控制的方式,以便把元素组成多栏布局
他们之间的关系如下:
- 如果'display'值为'none',那么'position'和'float'不会生效。此时,元素不生成盒子
- 否则,如果'position'值为'absolute'或者'fixed',盒是绝对定位的,并且'float'的计算值为'none'。那么display就根据下表来设置,盒的位置将由'top','right','bottom'和'left'属性和盒的包含块决定
- 否则,如果'float'值不为'none',那么盒是浮动的,'display'根据下表来设置
- 否则,如果该元素是根元素,'display'根据下表来设置,但指定值'list-item'应该变成计算值'block'还是'list-item',在CSS 2.1中是未定义的
- 否则,其它'display'属性值(计算值)就用指定值