一、float
想了解浮动吗?请看这里
二、position
有4个值,分别是absolute,fixed,relative,static。
1、absolute
绝对定位,相对于static定位以外的第一个父元素进行定位。脱离文档流,并且不占据原本的空间,后面的元素会顶替上去。
元素的位置通过"left","top","right","bottom"属性进行偏移。
2、fixed
固定定位,相对于浏览器窗口进行定位。
元素的位置通过"left","top","right","bottom"属性进行偏移。
3、relative
相对定位,相对于正常位置(原先本身位置)进行定位。原本的空间也占据着,下面的元素并不会顶替上去。
元素的位置通过"left","top","right","bottom"属性进行偏移。
4、static
默认值。没有定位,元素出现在正常的流中,忽略top,bottom,left,right或者z-index。
三、display
1、inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果。
2、block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然独占一行。
block元素可以设置margin,padding属性。
3、inline-block
将元素呈现为内联对象,但是对象的内容作为块对象呈现。既有行级元素的特性,也有块级元素的特性,能设置width,height,margin,padding。
IE浏览器下不支持该属性,解决方案是.dil{ display:inline; zoom:1; /*触发块元素的layout*/ }
4、none
将元素从页面中移走,消失了,它下面的元素就会自动跟上。这不同于visiblity属性,visibility:hidden表示元素虽然被隐藏了,但它仍然占据它原来所在的位置。
5、table
让元素以表格的形式呈现,类似于table标签。IE6,7不支持。
6、table-row
让元素以表格行的形式呈现,类似于tr标签。
7、table-cell
让元素以表格单元格的形式呈现,类似于td标签。
使用了display:table-cell的元素设置margin值无效,但padding值是有效的,所以如果要在设置了table-cell的元素上应用margin,需要再包裹一层元素。
另外,如果设置了display:table-cell的元素的父元素不是display:table-row,父元素的父元素不是display:table,那么浏览器会自动创建相应的匿名元素,使得DOM层次结构符合table/inline-table>table-row>table-cell三层嵌套关系,这就是“匿名创建表格元素规则”。
8、flex
想了解弹性盒子布局吗?请看这里
9、gird
很多浏览器还不支持啊,栅格布局。