H5学习03之页面布局

一，居中布局：

• 1，对于宽度小于父标签的块级标签在父标签中居中或者或者宽度小于行宽的块级元素在本行中居中： margin: 0 auto;//自身居中
  注意：这里只能是块级标签，行内块级标签是不行的哦

• 2，对于块级或者行内块级标签内部内容或者子标签居中： text-align: center;//自身内容或者子内容居中

• 3，对于行内标签可以在其父标签中设置：text-align: center;

• 4，对于垂直居中就比较easy，不论块级海试行内标签，只要设置本标签的line-height等于父标签的高度即可

• text-align是内容居中，margin是布局居中，也即是标签居中。所以如果是想让inlineblock居中，那么要用margin，如果想让inlineblock内部内容居中，比如说文字，需要用text-align

二，脱离标准流

• 默认情况下，所有的网页标签都在标准流布局中从上到下，从左到右

脱离标准流的方法有

• 1， float脱离标准流：

• float只有两个属性：

• left：脱离标准流，浮动在父标签的最左边

• right：脱离标准流，浮动在父标签的最右边

• 如果一个标签内的子标签有float，并且这个标签的尺寸想跟随里面内容的尺寸那么这个标签最好为inline-block类型

• 2，position脱离标准流

• 如果需要在父标签中脱离标准流，需要设置子绝父相

• position属性有如下几种：

• 4.png

• 在设置了脱离标准流的方式之后，需要通过left、right、top、bottom属性来设置其具体脱离的位置