免费日本一三区黄视频,嗯嗯啊啊在线视频一区,老鸭窝在线网站

個(gè)人博客已上線，歡迎前去訪問評論！
無媛無故 - wangchloe的個(gè)人博客

嗯！明天請假不更了。這幾天把性能優(yōu)化和面向?qū)ο蠼o整出來，又是費(fèi)腦子的幾篇。
啊對，面試題有更新，記得復(fù)看。
最近遇到的前端面試題(2017.02.23更新版)

以下內(nèi)容若有問題煩請即時(shí)告知我予以修改，以免誤導(dǎo)更多人。

本次內(nèi)容主要整理來源：布局 - 代碼庫 - NEC : 更好的CSS樣式解決方案

一. 單列布局

1. 水平居中

(1) 文本、圖片等行內(nèi)元素

<style>
    .parent {
        text-align: center;
    }
</style>

(2) 定寬塊級元素

<style>
    .child {
        margin: 0 auto;
    }
</style>

(3) 不定寬塊元素

inline + text-align

<style>
    .parent {
        text-align: center;
    }
    .child {
        display: inline;
    }
</style>

table + margin

<style>
    .child {
        display: table;
        margin: 0 auto;
    }
</style>

float + relative

<style>
    .parent {
        float: left;
        position: relative;
        left: 50%;
    }
    .child {
        position: relative;
        left: -50%;
    }
</style>

absolute + transform

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>

(4) 多個(gè)塊級元素(單個(gè)塊級元素也可用)

inline-block + text-align

<style>
    .parent {
        text-align: center;
    }
    .child {
        display: inline-block;
        *display: inline;
        *zoom:1;
    }
</style>

flex + justify-content

<style>
    .parent {
        display: flex;
    }
    .child {
        justify-content: center;
    }
</style>

2. 垂直居中

(1) 父元素高度確定的單行文本

<style>
    .parent {
        height: 20px;
        line-height: 20px;
        overflow:hidden;
    }
</style>

(2) 父元素高度確定的多行文本

<style>
    .parent {
        display: table;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

(3) 子元素定高塊級元素

<style>
    .child {
        position: absolute;
        top: 50%;
        margin-top: -50px;
        width: 100px;
        height: 100px;
    }
</style>

(4) 子元素不定高塊級元素

absolute + transform

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

flex + align-items

<style>
    .parent {
        display: flex;
        align-items: center;
    }
</style>

3. 水平垂直居中

(1) 定寬高

<style>
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -75px;
        width: 150px;
        height: 150px;
    }
</style>

(2) 不定寬高

inline-block + table-cell

<style>
    .parent {
        display: tabel-cell;
        text-align: center;
        vertical-align: middle;
    }
    .child {
        display: inline-block;
        *display: inline;
        *zoom:1;
    }
</style>

table-cell + absolute

<style>
    .parent {
        display: tabel;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .child {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
</style>

absolute + transform

<style>
    .parent {
        position: relative
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

flex + justify-content + align-items

<style>
    .parent {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

jQuery

<script>
    $(window).resize(function() {
        $('.child').css({
            position: 'absolute',
            left: ($(window).width()-$('.child').outerWidth())/2,
            top: ($(window).height()-$('.child').outerHeight())/2
        });
    });

    $(function() {
        $(window).resize();
    })
</script>

二. 兩列布局

1. 兩個(gè)div并排的多種方法

定位
margin負(fù)值
浮動(dòng)
行內(nèi)塊
table

2. 左側(cè)定寬，右側(cè)自適應(yīng)

float + margin

<style>
    .left {
        float: left;
        width: 100px;
    }
    .right {
        margin-left: 120px;
    }
</style>

    <div class="left">左側(cè)定寬</div>
    <div class="right">右側(cè)自適應(yīng)</div>

float + margin

<style>
    .left {
        float: left;
        width: 100px;
        margin-right: 20px;
    }
    .right {
        overflow: hidden;
    }
</style>

    <div class="left">左側(cè)定寬</div>
    <div class="right">右側(cè)自適應(yīng)</div>

absolute + margin

<style>
    .left {
        width: 300px;
        height: 500px;
        background: red;
        font-size: 30px;
        color: #fff;
        position: absolute;
        left: 0;
        top: 0;
    }
    .right {
        height: 500px;
        background: blue;
        font-size: 30px;
        color: #fff;
        /* padding-left: 300px; */
        margin-left: 300px;
    }
</style>

    <div class="left">左側(cè)定寬</div>
    <div class="right">右側(cè)自適應(yīng)</div>

relative + float + margin

<style>
    .g-sd1 {
        position: relative;
        float: left;
        margin-right: -190px;
        width: 190px;
    }
    .g-mn1 {
        float: right;
        width: 100%;
    }
    .g-mn1c {
        margin-left: 200px;
    }
</style>

    <div class="g-sd1">
        <p>左側(cè)定寬</p>
    </div>
    <div class="g-mn1">
        <div class="g-mn1c">
            <p>右側(cè)自適應(yīng)</p>
        </div>
    </div>

absolute + margin

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

    <div class="parent">
        <div class="left">
            <p>左側(cè)定寬</p>
        </div>
        <div class="right">
            <p>右側(cè)自適應(yīng)</p>
        </div>
    </div>

3. 左側(cè)自適應(yīng)，右側(cè)定寬(基本同理，不一一列舉)

margin + absolute

<style>
    .left {
        /* padding-right: 300px; */
        margin-left: 300px;
        height: 500px;
        background: blue;
        font-size: 30px;
        color: #fff;
    }
    .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
        height: 500px;
        background: red;
        font-size: 30px;
        color: #fff;
    }
</style>

    <div class="left">左側(cè)自適應(yīng)</div>
    <div class="right">右側(cè)定寬</div>

relative + float + margin

<style>
    .g-sd2 {
        position: relative;
        float: right;
        width: 230px;
        margin-left: -230px
    }
    .g-mn2 {
        float: left;
        width: 100%;
    }
    .g-mn2c {
        margin-right: 240px;
    }
</style>

    <div class="g-mn2">
        <div class="g-mn2c">
            <p>左側(cè)自適應(yīng)</p>
        </div>
    </div>
    <div class="g-sd2">
        <p>右側(cè)定寬</p>
    </div>

三. 等高布局

float + margin-bottom負(fù)值

<style>
    .box {
        width: 800px;
        overflow: hidden;   /* 搭配使用 */
        margin: 10px auto;
    }
    .l-box {
        float: left;
        margin-bottom: -2000px;     /* 搭配使用 */
        padding-bottom: 2000px;     /* 搭配使用 */
        width: 300px;
        background: red;
    }
    .r-box {
        float: left;
        margin-bottom: -2000px;     /* 搭配使用 */
        padding-bottom: 2000px;     /* 搭配使用 */
        width: 500px;
        background: blue;
    }
</style>

    <div class="box">
        <div class="l-box">
            左側(cè)左側(cè)左側(cè)左側(cè)<br/>
            左側(cè)左側(cè)左側(cè)左側(cè)<br/>
            左側(cè)左側(cè)左側(cè)左側(cè)<br/>
            左側(cè)左側(cè)左側(cè)左側(cè)<br/>
        </div>
        <div class="r-box">
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
        </div>
    </div>

flex

<style>
    .box {
        display: flex;
    }
    .l-box {
        margin-right: 20px;
        width: 100px;
    }
    .r-box {
        flex: 1;
    }
</style>

    <div class="box">
        <div class="l-box">
            左側(cè)左側(cè)左側(cè)左側(cè)<br/>
            左側(cè)左側(cè)左側(cè)左側(cè)<br/>
            左側(cè)左側(cè)左側(cè)左側(cè)<br/>
            左側(cè)左側(cè)左側(cè)左側(cè)<br/>
        </div>
        <div class="r-box">
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
            右側(cè)右側(cè)右側(cè)右側(cè)<br/>
        </div>
    </div>

四. 多列布局

1. 左右定寬，中間自適應(yīng)

absolute + margin

<style>
    .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 500px;
        background: red;
        color: #fff;
        font-size: 20px;
    }
    .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 500px;
        background: red;
        color: #fff;
        font-size: 20px;
    }
    .content {
        /* padding: 0 200px; */
        margin: 0 200px;
        height: 500px;
        background: blue;
        font-size: 20px;
        color: #fff;
    }
</style>

    <div class="left">左側(cè)定寬</div>
    <div class="content">中間自適應(yīng)</div>
    <div class="right">右側(cè)定寬</div>

relative + float + margin

<style>
    .g-sd51, .g-sd52 {
        position: relative;
        float: left;
        width: 230px;
        margin: 0 -230px 0 0;
    }
    .g-sd52 {
        float: right;
        width: 190px;
        margin: 0 0 0 -190px;
    }
    .g-mn5 {
        float: left;
        width: 100%;
    }
    .g-mn5c {
        margin: 0 200px 0 240px;
    }
</style>

    <div class="g-sd51">
        <p>左側(cè)定寬</p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>中間自適應(yīng)</p>
        </div>
    </div>
    <div class="g-sd52">
        <p>右側(cè)定寬</p>
    </div>

圣杯布局

中間欄放到文檔流前面，保證先行渲染
三欄全部float:left浮動(dòng)
中間欄在添加相對定位，并配合left和right屬性

效果上表現(xiàn)為三欄是單獨(dú)分開的

可參考該篇圣杯的分析過程：【CSS】布局之圣杯布局)

<style>
    #hd {
        height: 50px;
        background: #666;
        text-align: center;
    }
    #bd {
        /*左右欄通過添加負(fù)的margin放到正確的位置了，此段代碼是為了擺正中間欄的位置*/
        padding: 0 200px 0 180px;
        height: 100px;
    }
    #middle {
        float: left;
        width: 100%;
        height: 100px;
        background: blue;
    }
    #left {
        float: left;
        width: 180px;
        height: 100px;
        margin-left: -100%;  /*左欄上去到第一行*/
        background: #0c9;
        position: relative;
        left: -180px;  /*中間欄的位置擺正之后，左欄的位置也相應(yīng)右移，通過相對定位的left恢復(fù)到正確位置*/
    }
    #right {
        float: left;
        width: 200px;
        height: 100px;
        margin-left: -200px;
        background: #0c9;
        position: relative;
        right: -200px;  /*中間欄的位置擺正之后，右欄的位置也相應(yīng)左移，通過相對定位的right恢復(fù)到正確位置*/
    }
    #footer {
        height: 50px;
        background: #666;
        text-align: center;
    }
</style>

<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>

雙飛翼布局

中間欄放到文檔流前面，保證先行渲染
三欄全部float:left浮動(dòng)
在中間欄的div中嵌套一個(gè)div，內(nèi)容寫在嵌套的div里，然后對嵌套的div設(shè)置margin-left和margin-right

效果上表現(xiàn)為左右兩欄在中間欄的上面

區(qū)別：雙飛翼多了1個(gè)div，少用大致4個(gè)css屬性（圣杯布局中間div padding-left和padding-right這2個(gè)屬性，加上左右兩個(gè)div用相對布局position: relative及對應(yīng)的right和left共4個(gè)屬性，一共6個(gè)；而雙飛翼布局子div里用margin-left和margin-right共2個(gè)屬性，6-2=4）
作者：呂延慶
鏈接：https://www.zhihu.com/question/21504052/answer/50053054
來源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。

<style>
    #hd {
        height: 50px;
        background: #666;
        text-align: center;
    }
    #middle {
        float: left;
        width: 100%;
        height: 100px;
        background: blue;
    }
    #left {
        float: left;
        width: 180px;
        height: 100px;
        margin-left: -100%;   /*左欄上去到第一行*/
        background: #0c9;
    }
    #right {
        float: left;
        width: 200px;
        height: 100px;
        margin-left: -200px;
        background: #0c9;
    }

    /*給內(nèi)部div添加margin，把內(nèi)容放到中間欄，其實(shí)整個(gè)背景還是100%*/
    #inside {
        margin: 0 200px 0 180px;
        height: 100px;
    }
    #footer {
        clear: both; /*記得清除浮動(dòng)*/
        height: 50px;
        background: #666;
        text-align: center;
    }
</style>

<div id="hd">header</div>
<div id="middle">
    <div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="footer">footer</div>

2. 左側(cè)自適應(yīng)，中間右側(cè)定寬

<style>
    .g-sd41, .g-sd42 {
        position: relative;
        float: right;
        width: 190px;
    }
    .g-sd41 {
        width: 230px;
        margin-left: 10px;
    }
    .g-mn4 {
        float: left;
        width: 100%;
        margin-right: -430px;
    }
    .g-mn4c {
        margin-right: 440px;
    }
</style>

    <div class="g-mn4">
        <div class="g-mn4c">
            <p>左側(cè)自適應(yīng)</p>
        </div>
    </div>
    <div class="g-sd41">
        <p>中間定寬</p>
    </div>
    <div class="g-sd42">
        <p>右側(cè)定寬</p>
    </div>

3. 右側(cè)自適應(yīng)，中間左側(cè)定寬

<style>
    .g-sd31, .g-sd32 {
        position: relative;
        float: left;
        width: 230px;
    }
    .g-sd31 {
        width: 190px;
        margin-right: 10px;
    }
    .g-mn3 {
        float: right;
        width: 100%;
        margin-left: -430px;
    }
    .g-mn3c {
        margin-left: 440px;
    }
</style>

    <div class="g-sd31">
        <p>左側(cè)定寬</p>
    </div>
    <div class="g-sd32">
        <p>中間定寬</p>
    </div>
    <div class="g-mn3">
        <div class="g-mn3c">
            <p>右側(cè)自適應(yīng)</p>
        </div>
    </div>

五. 圖片絕對居中

<style>
    .box {
        width: 500px;
        height: 600px;
        margin: 10px auto;
        border: 1px solid red;
        text-align: center;
    }
    .box img {
        vertical-align: middle;
    }
    .box span {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
</style>

<div class="box">
    ![](img/xxx.png)
    <span></span>
</div>

圖片居中溢出隱藏

<style>
    .m-demo {
        position: relative;
        width: 300px;
        height: 300px;
        overflow: hidden;
        border: 1px solid #ddd;
    }
    .m-demo p {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        padding: 0;
    }
    .m-demo img {
        position: absolute;
        top: -50%;
        left: -50%;
        display: block;
    }
    .m-demo img.hidden {
        visibility: hidden;
        position: static;
    }
</style>

<div class="m-demo">
    <p>
        ![](http://upload-images.jianshu.io/upload_images/2125655-c8e8dd40292927d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](http://upload-images.jianshu.io/upload_images/2125655-c8e8dd40292927d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </p>
</div>
<div class="m-demo">
    <p>
        ![](http://upload-images.jianshu.io/upload_images/2125655-da04da0d01be925b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](http://upload-images.jianshu.io/upload_images/2125655-da04da0d01be925b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </p>
</div>
<div class="m-demo">
    <p>
        ![](http://upload-images.jianshu.io/upload_images/2125655-9ec86b9faa6c1022.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](http://upload-images.jianshu.io/upload_images/2125655-9ec86b9faa6c1022.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </p>
</div>

六. 兩列三列自適應(yīng)

<style>
    /* 兩列布局  主列左 側(cè)列右 */
    .g-mn1 {
        float: left;
        width: 100%;
        margin-right: -200px;
    }
    .g-mnc1 {
        margin-right: 210px;
    }
    .g-sd1 {
        float: right;
        width: 200px;
    }

    /* 兩列布局  主列右 側(cè)列左*/
    .g-mn2 {
        float: right;
        width: 100%;
        margin-left: -200px;
    }
    .g-mnc2 {
        margin-left: 210px;
    }
    .g-sd2 {
        float: left;
        width: 200px;
    }

    /* 三列布局  主列右 兩側(cè)列左*/
    .g-mn3 {
        float: right;
        width: 100%;
        margin-left: -520px;
    }
    .g-mnc3 {
        margin-left: 520px;
    }
    .g-sd3a {
        float: left;
        width: 300px;
        margin-right: 10px;
    }
    .g-sd3b {
        float: left;
        width: 200px;
    }

    /* 三列布局  主列中 兩側(cè)列分居左右*/
    .g-mn4 {
        float: right;
        width: 100%;
        margin-left: -200px;
    }
    .g-mnc4 {
        margin-left: 210px;
    }
    .g-sd4 {
        float: left;
        width: 200px;
    }
    .g-mn5 {
        float: left;
        width: 100%;
        margin-right: -200px;
    }
    .g-mnc5 {
        margin-right: 210px;
    }
    .g-sd5 {
        float: right;
        width: 200px;
    }
</style>

<div class="g-bd">
    <div class="g-mn1">
        <div class="g-mnc1">
            <p>主列1內(nèi)容區(qū)</p>
        </div>
    </div>
    <div class="g-sd1">
        <p>側(cè)列1內(nèi)容區(qū)</p>
    </div>
</div>
<div class="g-bd">
    <div class="g-mn2">
        <div class="g-mnc2">
            <p>主列2內(nèi)容區(qū)</p>
        </div>
    </div>
    <div class="g-sd2">
        <p>側(cè)列2內(nèi)容區(qū)</p>
    </div>
</div>
<div class="g-bd">
    <div class="g-mn3">
        <div class="g-mnc3">
            <p>主列3內(nèi)容區(qū)</p>
        </div>
    </div>
    <div class="g-sd3a">
        <p>側(cè)列a內(nèi)容區(qū)</p>
    </div>
    <div class="g-sd3b">
        <p>側(cè)列b內(nèi)容區(qū)</p>
    </div>
</div>
<div class="g-bd">
    <div class="g-mn4">
        <div class="g-mnc4">
            <div class="g-mn5">
                <div class="g-mnc5">
                    <p>主列5內(nèi)容區(qū)</p>
                </div>
            </div>
            <div class="g-sd5">
                <p>側(cè)列5內(nèi)容區(qū)</p>
            </div>
        </div>
    </div>
    <div class="g-sd4">
        <p>側(cè)列4內(nèi)容區(qū)</p>
    </div>
</div>

七. 全屏自適應(yīng)

absolute

<style>
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
    }
    html {
        _height: auto;
        _padding: 100px 0 50px;
    }
    .g-hd, .g-sd, .g-mn, .g-ft {
        position: absolute;
        left: 0;
    }
    .g-hd, .g-ft {
        width: 100%;
    }
    .g-sd, .g-mn {
        top: 100px;
        bottom: 50px;
        _height: 100%;
        overflow: auto;
    }
    .g-hd {
        top: 0;
        height: 100px;
    }
    .g-sd {
        width: 300px;
    }
    .g-mn {
        _position: relative;
        left: 300px;
        right: 0;
        _top: 0;
        _left: 0;
        _margin-left: 300px;
    }
    .g-ft {
        bottom: 0;
        height: 50px;
    }
</style>

<div class="g-hd">
    頂部
</div>
<div class="g-sd">
    內(nèi)容左側(cè)
</div>
<div class="g-mn">
    內(nèi)容右側(cè)
</div>
<div class="g-ft">
    底部
</div>

flex

<style>
    html, body, .wrapper {
        height: 100%;
        overflow: hidden;
    }
    .wrapper {
        display: flex;
        flex-direction: column;
    }
    .g-hd {
        height: 100px;
    }
    .g-ft {
        height: 50px;
    }
    .g-md {
        flex: 1;
        display: flex;
    }
    .g-md .g-sd {
        width: 200px;
    }
    .g-md .g-mn {
        flex: 1;
        overflow: auto;
    }
</style>

<div class="wrapper">
    <div class="g-hd">
        頂部
    </div>
    <div class="g-md">
        <div class="g-sd">
            內(nèi)容左側(cè)
        </div>
        <div class="g-mn">
            內(nèi)容右側(cè)
        </div>
    </div>
    <div class="g-ft">
        底部
    </div>
</div>

八. 底部顯示自適應(yīng)

<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .g-doc {
        position: relative;
        min-height: 100%;
        _height: 100%;
    }
    .g-bd {
        padding: 0 0 60px;
        zoom: 1;
    }
    .g-ft {
        height: 50px;
        margin: -50px 0 0;
        background: #ddd;
    }
</style>

<div class="g-doc">
    <div class="g-bd">
        <p>請?jiān)黾踊驕p少內(nèi)容，或改變窗口大小，以便查看效果。</p>
        <p>請?jiān)黾踊驕p少內(nèi)容，或改變窗口大小，以便查看效果。</p>
        <p>請?jiān)黾踊驕p少內(nèi)容，或改變窗口大小，以便查看效果。</p>
        <p>請?jiān)黾踊驕p少內(nèi)容，或改變窗口大小，以便查看效果。</p>
        <p>請?jiān)黾踊驕p少內(nèi)容，或改變窗口大小，以便查看效果。</p>
    </div>
</div>
<div class="g-ft">
    <p>底部始終在文檔末尾，當(dāng)文檔較長時(shí)跟隨在文檔末尾，當(dāng)文檔較短時(shí)在窗口底部。</p>
</div>

九. 前自適應(yīng)后跟隨

<style>
    .m-demo {
        padding: 5px 0;
        border-bottom: 1px dotted #ddd;
        font-size: 12px;
    }
    .m-demo .cnt {
        float: left;
        margin-right: 80px;
    }
    .m-demo .date {
        display: inline;
        float: left;
        margin-left: -70px;
    }
</style>

<div class="m-demo f-cb">
    <div class="cnt">這是一段長度未知的文本，自動(dòng)換行，且不會(huì)把右邊的時(shí)間擠掉，修改這段文字長度或改變窗口寬度試試。</div>
    <div class="date">2009-08-08</div>
</div>

十. 圖文問題

<style>
    /* 左圖右文  */
    .m-demo:after, .m-demo li .cnt:after {
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        content: ".";
    }
    .m-demo, .m-demo li .cnt {
        zoom: 1;
    }
    .m-demo {
        width: 640px;
        margin: 0 0 1em;
        overflow: hidden;
        background: #dfedf0;
    }
    .m-demo ul {
        padding: 0;
        margin: -11px 0 -10px;
    }
    .m-demo li {
        padding: 10px 0;
        border-top: 1px dashed #999;
    }
    .m-demo .img {
        float: left;
        width: 100px;
        height: 100px;
        padding: 5px;
        border: 1px solid #ccc;
        margin-right: -112px;
        background: #eee;
    }
    .m-demo .img img, .m-demo .img a {
        display: block;
        width: 100px;
        height: 100px;
    }
    .m-demo .txt {
        line-height: 18px;
        color: #666;
        margin-left: 122px;
    }
    .m-demo .txt h3 {
        margin: 0 0 3px;
        font-size: 14px;
    }
    .m-demo .txt a, .m-demo .txt a:hover {
        color: #f60;
    }
    .m-demo .txt p {
        font-size: 12px;
        margin: 0;
    }

    /* 左圖右文列表 */
    .m-demo-1 ul {
        margin: -21px 0 0 -20px;
    }
    .m-demo-1 li {
        float: left;
        display: inline;
        width: 200px;
        overflow: hidden;
        margin: 1px 0 -11px;
        padding: 20px 0 10px 20px;
        border-top: none;
        border-bottom: 1px dashed #999;
    }

    /* 上圖下文列表 */
    .m-demo-2 ul {
        margin: -20px 0 0 -20px;
    }
    .m-demo-2 li {
        float: left;
        display: inline;
        width: 112px;
        padding: 0;
        border: none;
        margin: 20px 0 0 20px;
        overflow: hidden;
    }
    .m-demo-2 .img {
        float: none;
    }
    .m-demo-2 .txt {
        margin: 6px 0 0 0;
    }
</style>

<div class="m-demo">
    <ul>
       <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文左圖右文</p>
                </div>
            </div>
        </li> 
    </ul>
</div>
<div class="m-demo m-demo-1">
    <ul>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>左圖右文列表左圖右文列表左圖右文列表左圖右文列表左圖右文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>左圖右文列表左圖右文列表左圖右文列表左圖右文列表左圖右文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>左圖右文列表左圖右文列表左圖右文列表左圖右文列表左圖右文列表</p>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="m-demo m-demo-2">
    <ul>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>上圖下文列表上圖下文列表上圖下文列表上圖下文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>上圖下文列表上圖下文列表上圖下文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>上圖下文列表上圖下文列表上圖下文列表上圖下文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>上圖下文列表上圖下文列表上圖下文列表上圖下文列表上圖下文列表上圖下文列表上圖下文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](http://upload-images.jianshu.io/upload_images/2125655-67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">標(biāo)題標(biāo)題標(biāo)題</a></h3>
                    <p>上圖下文列表上圖下文列表上圖下文列表上圖下文列表上圖下文列表</p>
                </div>
            </div>
        </li>
    </ul>
</div>

十一. 表頭固定內(nèi)容滾動(dòng)

<style>
    .m-demo {
        margin: 0 0 20px;
        line-height: 18px;
    }
    .m-demo .scroll {
        max-height: 116px;
        border: 1px solid #ddd;
        border-top: 0;
        overflow-y: auto;
    }
    .m-demo table {
        width: 100%;
        table-layout: fixed;
    }
    .m-demo th, .m-demo td {
        width: 100px;
        padding: 10px;
        border: 1px solid #ddd;
    }
    .m-demo th {
        font-weight: bold;
        background: #eee;
    }
    .m-demo thead th:last-child, .m-demo tbody td:last-child {
        width: auto;
    }
    .m-demo tbody tr:nth-child(2n) {
        background: #fafafa;
    }
    .m-demo tbody tr:first-child td {
        border-top: 0;
    }
    .m-demo tbody tr:last-child td {
        border-bottom: 0;
    }
    .m-demo tbody tr td:first-child {
        border-left: 0;
    }
    .m-demo tbody tr td:last-child {
        border-right: 0;
    }
</style>

<div class="m-demo">
    <table>
        <thead>
           <tr><th>定寬a</th><th>定寬b</th><th>定寬c</th><th>最后列不定寬d</th></tr>
        </thead>
    </table>
    <div class="scroll">
        <table>
            <tbody>
                <tr><td>定寬a</td><td>定寬b</td><td>定寬c</td><td>最后列不定寬d</td></tr>
                <tr><td>定寬a</td><td>定寬b</td><td>定寬c</td><td>最后列不定寬d</td></tr>
                <tr><td>定寬a</td><td>定寬b</td><td>定寬c</td><td>最后列不定寬d</td></tr>
                <tr><td>定寬a</td><td>定寬b</td><td>定寬c</td><td>最后列不定寬d</td></tr>
                <tr><td>定寬a</td><td>定寬b</td><td>定寬c</td><td>最后列不定寬d</td></tr>
                <tr><td>定寬a</td><td>定寬b</td><td>定寬c</td><td>最后列不定寬d</td></tr>
            </tbody>
        </table>
    </div>
</div>

既然讀到這了，不如點(diǎn)個(gè)喜歡吧！

更多內(nèi)容可以訂閱本人微信公眾號，一起開啟前端小白進(jìn)階的世界！

公眾號是堅(jiān)持日更的，不發(fā)文的時(shí)候推送一些我覺得好用的前端網(wǎng)站或者看到的一些問題的解決方案，也更便于大家交流，就醬。

微信公眾號：無媛無故

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

每天10個(gè)前端知識(shí)點(diǎn)：布局大全

每天10個(gè)前端知識(shí)點(diǎn)：布局大全

一. 單列布局

1. 水平居中

(1) 文本、圖片等行內(nèi)元素

(2) 定寬塊級元素

(3) 不定寬塊元素

(4) 多個(gè)塊級元素(單個(gè)塊級元素也可用)

2. 垂直居中

(1) 父元素高度確定的單行文本

(2) 父元素高度確定的多行文本

(3) 子元素定高塊級元素

(4) 子元素不定高塊級元素

3. 水平垂直居中

(1) 定寬高

(2) 不定寬高

二. 兩列布局

1. 兩個(gè)div并排的多種方法

2. 左側(cè)定寬，右側(cè)自適應(yīng)

3. 左側(cè)自適應(yīng)，右側(cè)定寬(基本同理，不一一列舉)

三. 等高布局

四. 多列布局

1. 左右定寬，中間自適應(yīng)

圣杯布局

雙飛翼布局

2. 左側(cè)自適應(yīng)，中間右側(cè)定寬

3. 右側(cè)自適應(yīng)，中間左側(cè)定寬

五. 圖片絕對居中

圖片居中溢出隱藏

六. 兩列三列自適應(yīng)

七. 全屏自適應(yīng)

八. 底部顯示自適應(yīng)

九. 前自適應(yīng)后跟隨

十. 圖文問題

十一. 表頭固定內(nèi)容滾動(dòng)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

每天10個(gè)前端知識(shí)點(diǎn)：布局大全

一. 單列布局

1. 水平居中

(1) 文本、圖片等行內(nèi)元素

(2) 定寬塊級元素

(3) 不定寬塊元素

(4) 多個(gè)塊級元素(單個(gè)塊級元素也可用)

2. 垂直居中

(1) 父元素高度確定的單行文本

(2) 父元素高度確定的多行文本

(3) 子元素定高塊級元素

(4) 子元素不定高塊級元素

3. 水平垂直居中

(1) 定寬高

(2) 不定寬高

二. 兩列布局

1. 兩個(gè)div并排的多種方法

2. 左側(cè)定寬，右側(cè)自適應(yīng)

3. 左側(cè)自適應(yīng)，右側(cè)定寬(基本同理，不一一列舉)

三. 等高布局

四. 多列布局

1. 左右定寬，中間自適應(yīng)

圣杯布局

雙飛翼布局

2. 左側(cè)自適應(yīng)，中間右側(cè)定寬

3. 右側(cè)自適應(yīng)，中間左側(cè)定寬

五. 圖片絕對居中

圖片居中溢出隱藏

六. 兩列三列自適應(yīng)

七. 全屏自適應(yīng)

八. 底部顯示自適應(yīng)

九. 前自適應(yīng)后跟隨

十. 圖文問題

十一. 表頭固定內(nèi)容滾動(dòng)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

(1) 文本、圖片等行內(nèi)元素

2. 左側(cè)定寬，右側(cè)自適應(yīng)

3. 左側(cè)自適應(yīng)，右側(cè)定寬(基本同理，不一一列舉)

1. 左右定寬，中間自適應(yīng)

2. 左側(cè)自適應(yīng)，中間右側(cè)定寬

3. 右側(cè)自適應(yīng)，中間左側(cè)定寬