免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
CSS常見布局解決方案

水平居中布局

1.margin 定寬

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    width: 100px;    margin: 0 auto;  }</style>

相必是個前端都見過,這定寬的水平居中,我們還可以用下面這種來實(shí)現(xiàn)不定寬的

2. table margin

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    display: table;    margin: 0 auto;  }</style>

display: table 在表現(xiàn)上類似 block 元素,但是寬度為內(nèi)容寬。

  • 無需設(shè)置父元素樣式 (支持 IE 8 及其以上版本)兼容 IE 8 一下版本需要調(diào)整為 <table>

3.inline-block text-align

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    display: inline-block;  }  .parent {    text-align: center;  }</style>
  • 兼容性佳(甚至可以兼容 IE 6 和 IE 7)

4. absolute margin-left

<div class="parent">  <div class="child">Demo</div></div><style>.parent {    position: relative;  }  .child {    position: absolute;    left: 50%;    width: 100px;    margin-left: -50px;  /* width/2 */  }  </style>
  • 寬度固定

  • 相比于使用transform ,有兼容性更好

5. absolute transform

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    position: relative;  }  .child {    position: absolute;    left: 50%;    transform: translateX(-50%);  }</style>
  • 絕對定位脫離文檔流,不會對后續(xù)元素的布局造成影響。

  • transformCSS3 屬性,有兼容性問題

6. flex justify-content

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    justify-content: center;  }</style>
  • 只需設(shè)置父節(jié)點(diǎn)屬性,無需設(shè)置子元素

  • flex有兼容性問題

垂直居中

1.table-cell vertical-align

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: table-cell;    vertical-align: middle;  }</style>
  • 兼容性好(IE 8以下版本需要調(diào)整頁面結(jié)構(gòu)至 table

2.absolute transform

強(qiáng)大的absolute對于這種小問題當(dāng)然也是很簡單的

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    position: relative;  }  .child {    position: absolute;    top: 50%;    transform: translateY(-50%);  }</style>
  • 絕對定位脫離文檔流,不會對后續(xù)元素的布局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。

  • transformCSS3 屬性,有兼容性問題
    同水平居中,這也可以用margin-top實(shí)現(xiàn),原理水平居中

3.flex align-items

如果說absolute強(qiáng)大,那flex只是笑笑,因?yàn)?,他才是最?qiáng)的。。。但它有兼容問題

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    align-items: center;  }</style>

水平垂直居中

1. absolute transform

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    position: relative;  }  .child {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);  }</style>
  • 絕對定位脫離文檔流,不會對后續(xù)元素的布局造成影響。

  • transformCSS3 屬性,有兼容性問題

2. inline-block text-align table-cell vertical-align

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    text-align: center;    display: table-cell;    vertical-align: middle;  }  .child {    display: inline-block;  }</style>
  • 兼容性好

3. flex justify-content align-items

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    justify-content: center; /* 水平居中 */    align-items: center; /*垂直居中*/  }</style>
  • 只需設(shè)置父節(jié)點(diǎn)屬性,無需設(shè)置子元素

  • 蛋疼的兼容性問題

一列定寬,一列自適應(yīng)

1.float margin

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .left {    float: left;    width: 100px;  }  .right {    margin-left: 100px    /*間距可再加入 margin-left */  }</style>

IE 6 中會有3像素的 BUG,解決方法可以在 .left 加入 margin-left:-3px 當(dāng)然也有解決這個小bug的方案如下:

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right-fix">    <div class="right">      <p>right</p>      <p>right</p>    </div>  </div></div><style>  .left {    float: left;    width: 100px;  }  .right-fix {    float: right;    width: 100%;    margin-left: -100px;  }  .right {    margin-left: 100px    /*間距可再加入 margin-left */  }</style>

此方法不會存在 IE 63像素的 BUG,但 .left 不可選擇, 需要設(shè)置 .left {position: relative} 來提高層級。 注意此方法增加了不必要的 HTML 文本結(jié)構(gòu)。
傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器

2.float overflow

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .left {    float: left;    width: 100px;  }  .right {    overflow: hidden;  }</style>

設(shè)置 overflow: hidden 會觸發(fā) BFC 模式(Block Formatting Context)塊級格式上下文。BFC是什么呢。用通俗的來講就是,隨便你在BFC 里面干啥,外面都不會受到影響 。此方法樣式簡單但不支持 IE 6

3 .table

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .parent {    display: table;    width: 100%;    ;  }  .left {    display: table-cell;    width: 100px;  }  .right {    display: table-cell;    /*寬度為剩余寬度*/  }</style>

table 的顯示特性為每列的單元格寬度和一定等與表格寬度。 可加速渲染,也是設(shè)定布局優(yōu)先。table-cell 中不可以設(shè)置 margin 但是可以通過 padding 來設(shè)置間距

4. flex

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .parent {    display: flex;  }  .left {    width: 100px;    margin-left: 20px;  }  .right {    flex: 1;  }</style>
  • 低版本瀏覽器兼容問題

  • 性能問題,只適合小范圍布局
    我們在學(xué)會一列定寬,一列自適應(yīng)的布局后也可以方便的實(shí)現(xiàn) 多列定寬,一列自適應(yīng) 多列不定寬加一列自適應(yīng) 這里我們不一一講解,大家自行嘗試,也可以鞏固前面學(xué)習(xí)的

等分布局

1. float

<div class="parent">  <div class="column">    <p>1</p>  </div>  <div class="column">    <p>2</p>  </div>  <div class="column">    <p>3</p>  </div>  <div class="column">    <p>4</p>  </div></div><style>  .parent {    margin-left: -20px;  }  .column {    float: left;    width: 25%;    padding-left: 20px;    box-sizing: border-box;  }</style>
  • 此方法可以完美兼容 IE8 以上版本

2. flex

<div class="parent">  <div class="column">    <p>1</p>  </div>  <div class="column">    <p>2</p>  </div>  <div class="column">    <p>3</p>  </div>  <div class="column">    <p>4</p>  </div></div><style>  .parent {    display: flex;  }  .column {    flex: 1;  }  .column .column { /* 相鄰兄弟選擇器 */    margin-left: 20px;  }</style>
  • 強(qiáng)大簡單,有兼容問題

3. table

<div class='parent-fix'>  <div class="parent">    <div class="column">      <p>1</p>    </div>    <div class="column">      <p>2</p>    </div>    <div class="column">      <p>3</p>    </div>    <div class="column">      <p>4</p>    </div>  </div></div><style>  .parent-fix {    margin-left: -20px;  }  .parent {    display: table;    width: 100%;    /*可以布局優(yōu)先,也可以單元格寬度平分在沒有設(shè)置的情況下*/    ;  }  .column {    display: table-cell;    padding-left: 20px;  }</style>

等高布局

1.table

table 的特性為每列等寬,每行等高可以用于解決此需求

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .parent {    display: table;    width: 100%;    ;  }  .left {    display: table-cell;    width: 100px;  }  .right {    display: table-cell    /*寬度為剩余寬度*/  }</style>

2.flex

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .parent {    display: flex;  }  .left {    width: 100px;    margin-left: 20px;  }  .right {    flex: 1;  }</style>

注意這里實(shí)際上使用了 align-items: stretchflex 默認(rèn)的 align-items 的值為 stretch

3. float

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .parent {    overflow: hidden;  }  .left,  .right {    padding-bottom: 9999px;    margin-bottom: -9999px;  }  .left {    float: left;    width: 100px;    margin-right: 20px;  }  .right {    overflow: hidden;  }</style>

此方法為偽等高(只有背景顯示高度相等),左右真實(shí)的高度其實(shí)不相等。 兼容性較好。

到此,我們了解常見的布局解決方案,這些只是參考,一樣的布局實(shí)現(xiàn)方式多種多樣。主要就使用position、flex 、table(從很久很久以前起,我們就拋棄了table布局頁面,但display: table;是異常強(qiáng)大)、float等屬性目前flex兼容性較差 傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器
轉(zhuǎn)自:CSS常見布局解決方案

來源:https://www.icode9.com/content-4-658651.html
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
史上最全Html與CSS布局技巧
HTML與CSS布局技巧總結(jié)
CSS布局解決方案(多列布局)
css簡單布局(左側(cè)固定右側(cè)自適應(yīng))
圖書館圖片邊框
超詳細(xì)常用css布局
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服