CSS布局小貼士

左右布局實現(xiàn)

• 使用浮動float

  可將左部分區(qū)域和右部分區(qū)域的float屬性都設(shè)置為left，然后使用margin來調(diào)節(jié)兩區(qū)域之間的間距未巫。

  或者將左部分區(qū)域設(shè)置float:left窿撬，右部分區(qū)域float:right，用margin調(diào)節(jié)兩區(qū)域間距叙凡。

  注意：使用float會造成元素脫標(biāo)劈伴，要注意寬度的設(shè)置，要給父元素清除浮動

• 使用inline-block

將左右部分區(qū)域display屬性均設(shè)置為inline-block握爷，然后左右區(qū)域即可在同一行顯示跛璧，達(dá)到左右布局效果。

注意：inline-block元素之間會因為換行導(dǎo)致有空隙新啼，可用margin來調(diào)節(jié)間距追城。

• 使用flex布局

  將父容器display屬性設(shè)置為flex，justify-content可以調(diào)節(jié)多種排布方式燥撞，居于兩側(cè)座柱、居中、開頭對齊物舒、末尾對齊等色洞。

  可以用flex-basis來設(shè)置左右區(qū)域的具體寬度值，也可用flex-grow來設(shè)置左右區(qū)域占父容器空間的比值冠胯。

左中右布局實現(xiàn)

和左右布局一樣火诸，可采用上述三種方式來實現(xiàn)

• 使用float方式來布局
• 使用inline-block方式來布局
• 使用flex彈性布局方式

居中小貼士

水平居中實現(xiàn)

行內(nèi)元素的水平居中

• 給父元素設(shè)置text-align:center;
• 給父元素設(shè)置display:flex;justify-content:center;

塊級元素的水平居中

• 元素寬度確定時，給元素設(shè)置margin:0 auto;
• 元素寬度不確定時荠察，
  • 給父元素設(shè)置display:flex;justify-content:center;
  • 給父元素設(shè)置display:flex;子元素設(shè)置margin:0 auto;
  • 給父元素設(shè)置display:grid;justify-content:center;
  • 給父元素設(shè)置display:grid;子元素設(shè)置margin:0 auto;

垂直居中實現(xiàn)

行內(nèi)元素的垂直居中

• 設(shè)置父元素的高度height與行高line-height一致置蜀，則父元素內(nèi)的行內(nèi)子元素會垂直居中顯示
• 給父元素設(shè)置display:flex;flex-direction:column;justify-content:center;
• 給父元素設(shè)置display:flex;align-items:center;
• 給父元素設(shè)置display:flex;子元素設(shè)置margin:auto 0;
• 給父元素設(shè)置display:grid;align-content:center;
• 給父元素設(shè)置display:grid;子元素設(shè)置margin:auto 0;

塊級元素的垂直居中

?? flex布局和grid布局的方法對行內(nèi)元素或塊級元素都適用

• 給父元素設(shè)置display:flex;flex-direction:column;justify-content:center;

• 給父元素設(shè)置display:flex;align-items:center;

• 給父元素設(shè)置display:flex;子元素設(shè)置margin:auto 0;

• 給父元素設(shè)置display:grid;align-content:center;

• 給父元素設(shè)置display:grid;子元素設(shè)置margin:auto 0;

• 元素高度確定時奈搜，

  • 父元素設(shè)置相對定位，子元素設(shè)置絕對定位盯荤，子元素top:50%;margin-top:-元素高度/2;

  • 子元素設(shè)置相對定位媚污，子元素top:50%;margin-top:-元素高度/2;

  • .father:before,.father:after{
                content:"";
                display:block;
                height: (父元素高度-子元素高度)/2;
    }
    

• 元素高度不確定時，

  • 父元素設(shè)置相對定位廷雅，子元素設(shè)置絕對定位耗美，子元素top:50%;translateY(-50%)/translate(0,-50%)
  • 子元素設(shè)置相對定位，子元素top:50%;translateY(-50%)/translate(0,-50%)

水平垂直居中萬用大法

行內(nèi)元素航缀、塊級元素均可 flex布局大法和grid布局大法

• 給父元素設(shè)置display:flex;justify-content:center;align-items:center;
• 給父元素設(shè)置display:flex;給子元素設(shè)置margin:auto;
• 給父元素設(shè)置display:grid;justify-content:center;align-content:center;
• 給父元素設(shè)置display:grid;給子元素設(shè)置margin:auto;