网页布局方案

Posted 2020-10-05

一、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
很多浏览器还不支持啊，栅格布局。