黄色小说视频网址,黄色网天堂偷偷操,国产精品网红系列,AV网站在线免费观看,逼特逼进入网站,久久久久久久av麻豆果冻,欧美日韩精品一区二区天天拍,欧美电影一级片

來(lái)源 |?http://www.fly63.com/article/detial/9541

一，什么是兩列布局

兩列布局分為兩個(gè)，一種是垂直定寬，右側(cè)自適應(yīng)，另一種是兩列都自適應(yīng)（即縱向?qū)挾扔勺釉貨Q定，右側(cè)補(bǔ)齊剩余空間）。

在css面試題里面屬于常考題，也是一個(gè)前端開(kāi)發(fā)工程師必須掌握的技能，下面將分別介紹實(shí)現(xiàn)方式。

二，頂端定寬，右側(cè)自適應(yīng)如何實(shí)現(xiàn)？

1、雙列直插式

原理：兩個(gè)元素都設(shè)置dislpay：inline-block，為了消除HTML空間的影響，父元素的字體大小需要設(shè)置為0，正確匹配元素的寬度使用計(jì)算函數(shù)計(jì)算。如果兩個(gè)元素的高度不一樣，可以給元素設(shè)置vertical-align：top調(diào)整。

缺點(diǎn)：由于父元素設(shè)置了font-size為0，子元素內(nèi)文字不會(huì)顯示。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>       *{         padding: 0;         margin: 0;       }      .box{        height: 600px;        width: 100%;        font-size:0;      }      .left{        display: inline-block;        width: 100px;        height: 200px;        background-color: red;        vertical-align: top;
      }      .right{        display: inline-block;        width: calc(100% - 100px);        height: 400px;        background-color: blue;        vertical-align: top;      }style>  head>  <body>    <div>      <div>        <span>1234span>      div>      <div>        <span>1234span>      div>    div>  body>html>

2、雙浮動(dòng)

原理：兩個(gè)元素設(shè)置浮動(dòng)，右側(cè)自適應(yīng)元素寬度使用calc函數(shù)計(jì)算

缺點(diǎn)：父元素需要清除浮動(dòng)


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;
      }      .left{        float: left;        width: 100px;        height: 200px;        background-color: red;      }      .right{        float: left;        width: calc(100% - 100px);        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>        <span>          123adadadddddddddddddddddddddddddddddddddddddddd        span>      div>      <div>div>    div>  body>html>

3、浮動(dòng)+保證金

原理：預(yù)設(shè)定寬元素浮動(dòng)，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度即可

缺點(diǎn)：父元素需要清除浮動(dòng)。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;
      }      .left{        float: left;        width: 100px;        height: 200px;        background-color: red;      }      .right{        margin-left: 100px;        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>        <p>1234p>      div>      <div>        <p>1234p>      div>    div>  body>html>

4、浮動(dòng)+ BFC

原理：父元素設(shè)置溢出：隱藏，左側(cè)定寬元素浮動(dòng)，右側(cè)自適應(yīng)元素設(shè)置溢出：自動(dòng)創(chuàng)建BFC

缺點(diǎn)：前端元素的內(nèi)容如果超過(guò)設(shè)定寬度會(huì)重疊到右側(cè)元素上。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;        overflow: hidden;      }      .left{        float: left;        width: 100px;        height: 200px;        background-color: red;      }      .right{        overflow: auto;        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>111111111111111111111111div>      <div>111111111111111111111111111111111111111111111div>    div>    <div>div>  body>html>

5、絕對(duì)+左邊距

原理：父元素相對(duì)定位，垂直元素絕對(duì)定位，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度

缺點(diǎn)：父元素設(shè)置了相對(duì)定位


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;        position: relative;      }      .left{        position: absolute;        width: 100px;        height: 200px;        background-color: red;      }      .right{        margin-left: 100px;        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>div>      <div>div>    div>  body>html>

6、flex布局

原理：父元素設(shè)置display：flex，自適應(yīng)元素設(shè)置flex：1

缺點(diǎn)：存在兼容性問(wèn)題，IE10以下不支持


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      *{        padding: 0;        margin: 0;      }      .box{        height: 600px;        width: 100%;        display: flex;      }      .left{        width: 100px;        height: 200px;        background-color: red;      }      .right{        flex: 1;        height: 400px;        background-color: blue;      }style>  head>  <body>    <div>      <div>div>      <div>div>    div>  body>html>

三，左右兩端元素都自適應(yīng)

嚴(yán)格來(lái)說(shuō)，并不算兩個(gè)元素都是適應(yīng)，只是將上面的定寬替換由子元素?fù)伍_(kāi)而已

1、浮動(dòng)+ BFC

原理和上面一樣，只是稍微元素的寬度沒(méi)有設(shè)置，由子元素?fù)伍_(kāi)

2、table布局

原理：父元素顯示：表格，垂直元素外圍用一個(gè)div包裝，該div設(shè)置顯示：表格單元格，寬度：0.1％（保證最小寬度），右側(cè)元素內(nèi)部設(shè)置margin-right，右側(cè)元素設(shè)置顯示：table-cell。

缺點(diǎn)：IE7及以下不支持，當(dāng)display：tabletime，padding失效，父元素的line-height屬性失效，當(dāng)display：table-cell時(shí)，margin無(wú)效。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      .parent{        display: table;        width: 100%;
      }      .box{        display: table-cell;        width: 0.1%;      }      .left{        margin-right: 20px;        background-color: red;        height: 200px;      }          .right{        display: table-cell;        background-color: blue;        height: 300px;      }style>  head>  <body>    <div>      <div>        <div>126545453dddddddd453453453div>      div>      <div>12121div>    div>  body>html>

3、flex布局

原理，缺點(diǎn)同上面的flex布局

4、網(wǎng)格布局

原理：父元素設(shè)置顯示：grid，grid-template-columns：auto 1fr;（這個(gè)屬性定義列寬，auto關(guān)鍵字表示由瀏覽器自己決定長(zhǎng)度。fr是一個(gè)相對(duì)尺寸單位，表示剩余空間做等分） grid-gap：20px（行間距）

缺點(diǎn)：兼容性太差，IE11都不支持，谷歌57以上才可以。


<html>  <head>    <meta charset="utf-8">    <title>title>    <style>      .parent{        display:grid;        grid-template-columns:auto 1fr;        grid-gap:20px      }        .left{        background-color: red;        height: 200px;      }      .right{        height:300px;        background-color: blue;      }style>  head>  <body>    <div>      <div>1111111111111111111111111div>      <div>div>    div>  body>html>

本文完~

最后

歡迎加我微信(winty230)，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

點(diǎn)個(gè)在看支持我吧

CSS兩列布局的N種實(shí)現(xiàn)

一，什么是兩列布局

二，頂端定寬，右側(cè)自適應(yīng)如何實(shí)現(xiàn)？

1、雙列直插式