美文网首页知识点前端开发Web前端之路
每天10个前端知识点：布局大全

每天10个前端知识点：布局大全

作者: WangChloe | 来源:发表于2017-02-23 09:33 被阅读1078次

    个人博客已上线，欢迎前去访问评论！
    无媛无故 - wangchloe的个人博客

    嗯！明天请假不更了。这几天把性能优化和面向对象给整出来，又是费脑子的几篇。
    啊对，面试题有更新，记得复看。
    最近遇到的前端面试题(2017.02.23更新版)

    以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

    本次内容主要整理来源：布局 - 代码库 - NEC : 更好的CSS样式解决方案

    以下代码可复制至codePen实践

    一. 单列布局

    1. 水平居中

    (1) 文本、图片等行内元素

    <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) 多个块级元素(单个块级元素也可用)

    • 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. 两个div并排的多种方法

    • 定位
    • margin负值
    • 浮动
    • 行内块
    • table

    2. 左侧定宽，右侧自适应

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

        <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
    • float + margin
    <style>
    .left {
        float: left;
        width: 100px;
        margin-right: 20px;
    }
    .right {
        overflow: hidden;
    }
</style>

        <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</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">左侧定宽</div>
    <div class="right">右侧自适应</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>左侧定宽</p>
    </div>
    <div class="g-mn1">
        <div class="g-mn1c">
            <p>右侧自适应</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>左侧定宽</p>
        </div>
        <div class="right">
            <p>右侧自适应</p>
        </div>
    </div>

    3. 左侧自适应，右侧定宽(基本同理，不一一列举)

    • 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">左侧自适应</div>
    <div class="right">右侧定宽</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>左侧自适应</p>
        </div>
    </div>
    <div class="g-sd2">
        <p>右侧定宽</p>
    </div>

    三. 等高布局

    • float + margin-bottom负值
    <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">
            左侧左侧左侧左侧<br/>
            左侧左侧左侧左侧<br/>
            左侧左侧左侧左侧<br/>
            左侧左侧左侧左侧<br/>
        </div>
        <div class="r-box">
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<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">
            左侧左侧左侧左侧<br/>
            左侧左侧左侧左侧<br/>
            左侧左侧左侧左侧<br/>
            左侧左侧左侧左侧<br/>
        </div>
        <div class="r-box">
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
            右侧右侧右侧右侧<br/>
        </div>
    </div>

    四. 多列布局

    1. 左右定宽，中间自适应

    • 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">左侧定宽</div>
    <div class="content">中间自适应</div>
    <div class="right">右侧定宽</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>左侧定宽</p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>中间自适应</p>
        </div>
    </div>
    <div class="g-sd52">
        <p>右侧定宽</p>
    </div>

    圣杯布局

    • 中间栏放到文档流前面，保证先行渲染
    • 三栏全部float:left浮动
    • 中间栏在添加相对定位，并配合left和right属性

    效果上表现为三栏是单独分开的

    可参考该篇圣杯的分析过程：【CSS】 布局之圣杯布局)

    <style>
    #hd {
        height: 50px;
        background: #666;
        text-align: center;
    }
    #bd {
        /*左右栏通过添加负的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;  /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    }
    #right {
        float: left;
        width: 200px;
        height: 100px;
        margin-left: -200px;
        background: #0c9;
        position: relative;
        right: -200px;  /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    }
    #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浮动
    • 在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right

    效果上表现为左右两栏在中间栏的上面

    • 区别：双飞翼多了1个div，少用大致4个css属性（圣杯布局中间div padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4）
      作者：吕延庆
      链接：https://www.zhihu.com/question/21504052/answer/50053054
      来源：知乎
      著作权归作者所有，转载请联系作者获得授权。
    <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;
    }

    /*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
    #inside {
        margin: 0 200px 0 180px;
        height: 100px;
    }
    #footer {
        clear: both; /*记得清除浮动*/
        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. 左侧自适应，中间右侧定宽

    <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>左侧自适应</p>
        </div>
    </div>
    <div class="g-sd41">
        <p>中间定宽</p>
    </div>
    <div class="g-sd42">
        <p>右侧定宽</p>
    </div>

    3. 右侧自适应，中间左侧定宽

    <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>左侧定宽</p>
    </div>
    <div class="g-sd32">
        <p>中间定宽</p>
    </div>
    <div class="g-mn3">
        <div class="g-mn3c">
            <p>右侧自适应</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:https://img.haomeiwen.com/i2125655/c8e8dd40292927d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](https://img.haomeiwen.com/i2125655/c8e8dd40292927d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </p>
</div>
<div class="m-demo">
    <p>
        ![](https://img.haomeiwen.com/i2125655/da04da0d01be925b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](https://img.haomeiwen.com/i2125655/da04da0d01be925b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </p>
</div>
<div class="m-demo">
    <p>
        ![](https://img.haomeiwen.com/i2125655/9ec86b9faa6c1022.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](https://img.haomeiwen.com/i2125655/9ec86b9faa6c1022.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </p>
</div>

    六. 两列三列自适应

    <style>
    /* 两列布局  主列左 侧列右 */
    .g-mn1 {
        float: left;
        width: 100%;
        margin-right: -200px;
    }
    .g-mnc1 {
        margin-right: 210px;
    }
    .g-sd1 {
        float: right;
        width: 200px;
    }

    /* 两列布局  主列右 侧列左*/
    .g-mn2 {
        float: right;
        width: 100%;
        margin-left: -200px;
    }
    .g-mnc2 {
        margin-left: 210px;
    }
    .g-sd2 {
        float: left;
        width: 200px;
    }

    /* 三列布局  主列右 两侧列左*/
    .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;
    }

    /* 三列布局  主列中 两侧列分居左右*/
    .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内容区</p>
        </div>
    </div>
    <div class="g-sd1">
        <p>侧列1内容区</p>
    </div>
</div>
<div class="g-bd">
    <div class="g-mn2">
        <div class="g-mnc2">
            <p>主列2内容区</p>
        </div>
    </div>
    <div class="g-sd2">
        <p>侧列2内容区</p>
    </div>
</div>
<div class="g-bd">
    <div class="g-mn3">
        <div class="g-mnc3">
            <p>主列3内容区</p>
        </div>
    </div>
    <div class="g-sd3a">
        <p>侧列a内容区</p>
    </div>
    <div class="g-sd3b">
        <p>侧列b内容区</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内容区</p>
                </div>
            </div>
            <div class="g-sd5">
                <p>侧列5内容区</p>
            </div>
        </div>
    </div>
    <div class="g-sd4">
        <p>侧列4内容区</p>
    </div>
</div>

    七. 全屏自适应

    • 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">
    内容左侧
</div>
<div class="g-mn">
    内容右侧
</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">
            内容左侧
        </div>
        <div class="g-mn">
            内容右侧
        </div>
    </div>
    <div class="g-ft">
        底部
    </div>
</div>

    八. 底部显示自适应

    <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>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
    </div>
</div>
<div class="g-ft">
    <p>底部始终在文档末尾，当文档较长时跟随在文档末尾，当文档较短时在窗口底部。</p>
</div>

    九. 前自适应后跟随

    <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">这是一段长度未知的文本，自动换行，且不会把右边的时间挤掉，修改这段文字长度或改变窗口宽度试试。</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="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题标题</a></h3>
                    <p>左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文左图右文</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题标题</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="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题标题</a></h3>
                    <p>左图右文列表左图右文列表左图右文列表左图右文列表左图右文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题标题</a></h3>
                    <p>左图右文列表左图右文列表左图右文列表左图右文列表左图右文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题标题</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="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题</a></h3>
                    <p>上图下文列表上图下文列表上图下文列表上图下文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题</a></h3>
                    <p>上图下文列表上图下文列表上图下文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题</a></h3>
                    <p>上图下文列表上图下文列表上图下文列表上图下文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题</a></h3>
                    <p>上图下文列表上图下文列表上图下文列表上图下文列表上图下文列表上图下文列表上图下文列表</p>
                </div>
            </div>
        </li>
        <li>
            <div class="cnt">
                <div class="img"><a href="#">![](https://img.haomeiwen.com/i2125655/67b9544ea2498e0b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></div>
                <div class="txt">
                    <h3><a href="#">标题标题标题</a></h3>
                    <p>上图下文列表上图下文列表上图下文列表上图下文列表上图下文列表</p>
                </div>
            </div>
        </li>
    </ul>
</div>

    十一. 表头固定内容滚动

    <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>

    既然读到这了，不如点个喜欢吧！

    更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

    公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

    微信公众号：无媛无故

    相关文章

      网友评论

      • Sing_Chan:一会儿还看不完
      • a2934a679386:挺好，赞赞
        WangChloe:@千无 🤣
      • WangChloe:作者有话：嗯！明天请假不更了。这几天把性能优化和面向对象给整出来，又是费脑子的几篇。

        啊对，面试题有更新，记得复看。
        http://www.jianshu.com/p/3944732228f0
      • 酱油_:推荐的那个nec网站真好，谢谢
        WangChloe:@不只是个看客 🤣我也觉得那网站挺好，很多都是从那总结的，不过那个网站已经好几年不更了，有些东西可能会落后
      • WangChloe::hatching_chick:简书md是不是还没开[TOC]功能，发现这样看是有些麻烦

      本文标题：每天10个前端知识点：布局大全

      本文链接：https://www.haomeiwen.com/subject/uyufwttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      知识点

      前端开发

      Web前端之路

      让前端飞

      技术干货

      CSS

      程序猿阵线联盟-汇总各类技术干货

      关于我们|服务条款|联系我们|每天10个前端知识点：布局大全|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！