国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

講清楚基礎(chǔ)系列——css布局

qpwoeiru96 發(fā)布于2019-08-30 11:26 / 679人閱讀

摘要：兩列或三列布局使用左右中間圣杯和雙飛翼布局，都是為了實現(xiàn)一個兩側(cè)寬度固定，中間寬度自適應的三欄布局。，，同樣需要設(shè)置父元素的高度方案方案，，更適合子元素寬高固定的情況是父元素的中心點，減去圖片寬度和高度的一半從而達到定位效果

兩列或三列布局

使用flex

float

左右position:absolute,中間margin-left,margin-right

圣杯和雙飛翼布局，都是為了實現(xiàn)一個兩側(cè)寬度固定，中間寬度自適應的三欄布局。


header

  center
  left
  right

footer


header

  center

left
right

垂直水平居中

水平居中text-align:center和塊級元素的margin:0 auto;

table方案，（IE8+）

absolute+margin:auto方案，兼容主流的瀏覽器；但是需要定義父容器的高度，否則子元素絕對定位會導致父元素的坍塌。

.absolute-aligned {
    position: relative;
    min-height: 500px;
    background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
    margin: auto;
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
}

absolute+translate，(IE9+)，同樣需要設(shè)置父元素的高度

.center {
    background: hsl(180, 100%, 97%);
    position: relative;
    min-height: 500px;
}
.center img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30%; 
}

Flexbox方案

.center { 
    background: hsl(240, 100%, 97%);
    display: flex;
    justify-content: center;
    align-items: center;
}

calc方案，IE9+，更適合子元素寬高固定的情況

// 50%是父元素的中心點，減去圖片寬度和高度的一半從而達到定位效果
.calc {
  background-color: hsl(300, 100%, 90%);
  min-height: 350px;
  position: relative;
}

.calc img {
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}