css的元素表现

块级元素和行内元素的表现：

块级元素：块级元素和父元素的宽度一致，默认情况下就是和body的宽度一样，也可以说和浏览器窗口的宽度一致，致使同一行不能再放下另外的元素，所以块级元素表现为独占一行。

块级元素可以设置宽高。

行内元素：行内元素不能设置宽高，它的宽度是由内容撑开的。但是当将元素设置为块级元素之后就可以设置宽高了。

特别说明：

      当给元素添加position:absolute或者设置float的时候，就可以设置宽高了。这是因为：position和float会隐式的改变display类型，不论之前是什么类型的元素，只要设置了上面两个中的任意一个，都会让元素以display:block的方式显示，并获取block的一些特性：可以设置宽高，但是默认宽度并不占满父元素。

那么这里引申一些display、position和float之间关系的内容：

浏览器会为每个html元素生成矩形盒子，矩形盒子按照可见版式模型在页面上排布，可见的页面版式主要有position、display、float三个属性控制：

position属性控制页面上元素之间的位置关系
display属性控制元素是堆叠、并排还是根本不在页面上出现
float属性提供控制的方式，以便把元素组成多栏布局

他们之间的关系如下：

1. 如果'display'值为'none'，那么'position'和'float'不会生效。此时，元素不生成盒子
2. 否则，如果'position'值为'absolute'或者'fixed'，盒是绝对定位的，并且'float'的计算值为'none'。那么display就根据下表来设置，盒的位置将由'top'，'right'，'bottom'和'left'属性和盒的包含块决定
3. 否则，如果'float'值不为'none'，那么盒是浮动的，'display'根据下表来设置
4. 否则，如果该元素是根元素，'display'根据下表来设置，但指定值'list-item'应该变成计算值'block'还是'list-item'，在CSS 2.1中是未定义的
5. 否则，其它'display'属性值（计算值）就用指定值

转载于:https://www.cnblogs.com/shineLh/p/6806003.html