CSS布局学习总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS布局学习总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含13300字，纯文字阅读大概需要20分钟。

内容图文

一. 居中相关布局

1.1 水平居中布局

方案一. inline-block + text-align

text-align是可以控制行内内容（文字、行内元素、行内块级元素）进行水平对齐。

对于块级元素我们可以设置display: inline-block进行对齐。

注：text-align属性具有继承性，会导致自己元素内部的文本也是居中显示的，需要自身设置text-align覆盖

        <style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
        text-align: center;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: inline-block;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二：定位 + transform

此方法不需要知道子元素的宽，利用transform的相对自身定位，可以解决定位。

注：父级元素是否脱离文档流，不影响子元素水平居中效果，但是transform是css3属性，存在浏览器兼容问题

        <style>
    .wrap {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;  /* 可以不用知道宽 */
        height: 200px; /* 可以不用知道高 */
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案三：dispaly: block + margin: auto

此方法需要知道子元素的宽和高或者使子元素成为块级元素。margin: 0 auto会自动分配实现外边距效果。

注：这里子元素设置display为block或者table都是可以的，如果子元素脱离文档流（浮动，定位），会导致margin属性的值无效。

        <style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: block;
        margin: 0 auto;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.2 垂直相关布局

方案一：定位 + transform

该方案与水平居中方案二同样原理，不赘述。

        <style>
    .wrap {
        position: relative;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二：display：table-cell + vertical

设置display: table-cell的元素具有td元素的行为，它的子元素布局方式类似文本元素，可以在父元素使用vertical-align: middle;实现子元素的垂直居中。

注意：vertical-align属性具有继承性，导致父元素内文本也是垂直居中显示的。

        <style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.3 水平垂直居中

方案一：定位 + 负mrgin

结合上面水平+垂直的方案，该方案兼容性很好，但是需要知道子元素的高宽

        <style>
    .wrap {
        position: relative;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        top: 50%;
      	margin-top:-100px;
      	margin-left:-100px;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二：定位 + transform

该方案不需要知道子元素的高和宽，但老浏览器可能会存在兼容性问题。

        <style>
    .wrap {
        position: relative;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案三：css-table + 行内/行内块元素

利用新增的table属性该方案兼容性不错，不需要知道子元素的宽和高

        <style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        diplay: inline-block;
        width: 200px;
        height: 200px;  /* 此处不一定需要宽高，内容撑开就可 */
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案四：css-table + 块元素

该方案，是对方案三的补充，可以不用使子元素成为行内块元素就可以水平垂直居中。

        <style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.4 更简便的布局方法：flex布局

使用flex布局更加简便、有效对元素进行布局，无论是水平、垂直亦或是水平垂直居中都不在话下，但是flex布局会有一些兼容性的问题，但如果没有兼容性的要求，flex布局无疑是最好的方式之一。

         <style>
     .wrap {
         display: flex;
         align-items: center;  /* 垂直居中 */
         justify-content: center;  /* 水平居中 */
         width: 1200px;
         height: 800px;
         background-color: aqua;
     }
     .content {
         width: 200px;
         height: 200px;
         background-color: blueviolet;
     }
 </style>
 <body>
     <div class="wrap">
         <div class="content"></div>
     </div>
 </body>

二. N列布局

2.1 两列布局

这里的两列布局指的是，其中一列是定宽元素，另一列元素宽度自适应。比如，我们实现做列定宽，右列自适应的布局。

方案一：左边元素浮动，定宽，右边元素设置`margin-left`

左边元素定宽并且设置为浮动，右边元素margin-left设置为左边元素宽度大小。

        <style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        margin-left: 400px;
    }
</style>
<body>
    <div class="l">定宽</div>
    <div class="r">自适应</div>
</body>

方案二：左边元素浮动、定宽，右边元素设置为`overflow：hidden`

右边元素因为设置了overflow: hidden开启了BFC，与外界隔离，所以能实现效果。

注意：overflow:hidden的设置也使得右边元素内容超出隐藏。这里如果不设置overflow:hidden，右边元素的宽度是100%，有一部分被左边浮动元素盖住，不是我们要的结果，虽然看起来没什么区别。

        <style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        overflow: hidden;
    }
</style>
<body>
    <div class="l">定宽</div>
    <div class="r">自适应</div>
</body>

方案三：将左右元素用一个`display:table`的元素包裹，左右元素设置为`display: table-cell`

基于表格元素，没有定宽和高的元素会被按比例分配布局

        <style>
    .w {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .l, .r {
        display: table-cell;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .r {
        background-color: blueviolet;
    }
</style>
<body>
    <div class="w">
        <div class="l">定宽</div>
        <div class="r">自适应</div>
    </div>
</body>

方案四：flex布局

父容器采用flex布局，左边元素定宽之后，右边元素，因为只有一个，所以flex属性设置为不是0的正值（也就是设置flex-grow），都会占满剩余空间。

但会有兼容性问题

         <style>
     .p {
         display: flex;
         height: 600px;
     }
     .l {
        background-color: aqua;
        width: 400px;
     }
     .r {
         flex: 1;
         background-color: blueviolet;
     }
 </style>
 <body>
     <div class="p">
         <div class="l">定宽</div>
         <div class="r">自适应</div>
     </div>
 </body>

2.2 三列布局

三列布局主要分三种情况，普通布局，以及有名的圣杯布局、双飞翼布局，详细区别下面讲

2.2.1 普通三列布局: 定宽 + overflow: hidden

        <style>
    .l, .c, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .c {
        width: 400px;
        background-color: blueviolet;
        float: left;
    }
    .r {
        background-color: brown;
        overflow: hidden;
    }
</style>
<body>
    <div class="l">定宽</div>
    <div class="c">定宽</div>
    <div class="r">自适应</div>
</body>

2.2.2 圣杯布局

解决两边定宽，中间自适应的经典方法。但圣杯布局具有缺陷，当中间的子元素小于两边的子元素的时候，布局就会出现混乱。以下是大致流程：

左中右三者都设置float
设置main的宽度为100%
设置左右两边子元素margin-left，左边设置为：-100%，右边设置为：-自身宽度。
设置容器（父元素）的padding值，将左右padding值设为相应的子元素宽度
最后利用相对定位进行最后的设置就可。

            <style>
        .w{
            padding: 0 200px;
        }
        .c {
            width: 100%;
            height: 200px;
            float: left;
            background-color: blueviolet;
        }
        .l {
            width: 200px;
            height: 200px;
            float: left;
            margin-left: -200px;
            background-color: aqua;
            position: relative;
            left: -200px;
        }
        .r {
            width: 200px;
            height: 200px;
            float: left;
            margin-left: -200px;
            background-color: brown;
            position: relative;
            right:  -200px;
        }
    </style>
    <body>
        <div class="w">
          <!-- 为了更快的将主页面的内容将加载出来，并且使得SEO更好，将主栏目放在前面。 -->
            <div class="c">自适应</div>
            <div class="l">定宽</div>
            <div class="r">定宽</div>
        </div>
    </body>

2.2.3双飞翼布局

双飞翼布局相较于圣杯布局，不仅解决了圣杯布局的问题，也同时做到了更简洁。主要步骤为：

让三者左浮动
通过在居中子元素设置一个容器，使容器满足宽度100%
为两侧子元素设置负边距，左侧子元素设置：margin-left为-100%，右侧元素设置为：-自身宽度
给居中容器的子元素设置margin分别为两侧的宽度

        <style>
    .l, .c, .r {
        height: 600px;
        float: left;
    }
    .l {
        width: 400px;
        background-color: aqua;
        /* 为了让l元素从当前行移动到第一行同一位置*/
        margin-left: -100%;
    }
    .c {
        width: 100%;
        background-color: blue;
    }
    .i {
        height: 600px;
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }
    .r {
        width: 400px;
        background-color: brown;
         /* 为了让r元素移动到第一行*/
        margin-left: -400px;
    }
</style>
<body>
    <div class="c">
        <div class="i">自适应</div>
    </div>
    <div class="l">定宽</div>
    <div class="r">定宽</div>
</body>

2.2.4 flex布局

flex布局会更加简单有效，毕竟就是为了一维布局而生的。只是会在老浏览器上有兼容性问题。

        <style>
    .w {
        display: flex;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .c {
        flex: 1;
        background-color: blueviolet;
    }
    .r {
        width: 400px;
        background-color: brown;
    }
</style>
<body>
    <div class="w">
        <div class="l">定宽</div>
        <div class="c">自适应</div>
        <div class="r">定宽</div>
    </div>
</body

2.3多列等分布局

多个列高度不定，自适应等分宽度布局。

方案一：浮动 + 百分数平分

        <style>
   .col {
       float: left;
       width: 20%;
       height: 300px;
   }
   .col1 {
       background-color: blue;
   }
   .col2 {
       background-color: blueviolet;
   }
   .col3 {
       background-color: aqua;
   }
   .col4 {
       background-color: beige;
   }
   .col5 {
       background-color: salmon;
   }
</style>
<body>
    <div class="w">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

方案二：使用column布局

在父元素指定column属性几列即可

浏览器会有兼容性问题

         <style>
     .w {
         /* 指定列数 */
         column-count: 5;
         /* 指定列与列之间的间隙，默认1em */
         column-gap: 0;
     }
     .col {
         height: 300px;
     }
     .col1 {
         background-color: blue;
     }
     .col2 {
         background-color: blueviolet;
     }
     .col3 {
         background-color: aqua;
     }
     .col4 {
         background-color: beige;
     }
     .col5 {
         background-color: salmon;
     }
 </style>
 <body>
     <div class="w">
         <div class="col col1"></div>
         <div class="col col2"></div>
         <div class="col col3"></div>
         <div class="col col4"></div>
         <div class="col col5"></div>
     </div>
 </body>

方案三：最简便的flex布局

         <style>
     .w {
        display: flex;
     }
     .col {
         height: 300px;
         flex: 1;
     }
     .col1 {
         background-color: blue;
     }
     .col2 {
         background-color: blueviolet;
     }
     .col3 {
         background-color: aqua;
     }
     .col4 {
         background-color: beige;
     }
     .col5 {
         background-color: salmon;
     }
 </style>
 <body>
     <div class="w">
         <div class="col col1"></div>
         <div class="col col2"></div>
         <div class="col col3"></div>
         <div class="col col4"></div>
         <div class="col col5"></div>
     </div>
 </body>
 </html>

2.4 多列等高布局

多列内容不一致，保证每一列的高度是相同的。最高的高度由内容最多的列决定

方案一：使用display：table布局

为父元素设置display：table,子元素设置diaplay: table-cell。

         <style>
    .w {
        display: table;
    }
    .col {
        display: table-cell;
        width: 20%;
    }
    .col1 {
        background-color: blue;
    }
    .col2 {
        background-color: blueviolet;
    }
    .col3 {
        background-color: aqua;
    }
    .col4 {
        background-color: beige;
    }
    .col5 {
        background-color: salmon;
    }
 </style>
 <body>
     <div class="w">
         <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col4"></div>
         <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
     </div>
 </body>

方案二：使用flex布局

默认情况下,display: flex元素align-item属性值默认为stretch。如果项目未设置，则子元素会占满整个容器的高度。

         <style>
    .w {
        display: flex;
    }
    .col {
        flex: 1;
    }
    .col1 {
        background-color: blue;
    }
    .col2 {
        background-color: blueviolet;
    }
    .col3 {
        background-color: aqua;
    }
    .col4 {
        background-color: beige;
    }
    .col5 {
        background-color: salmon;
    }
 </style>
 <body>
     <div class="w">
         <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col4"></div>
         <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
     </div>
 </body>

三. 全屏布局

全屏布局就是头部、内容区、底部三大区域占满屏幕的布局。

实现效果：

技术分享图片

         <style>
        html, body {
            margin: 0;
            overflow: hidden;
        }
        .header {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            height: 100px;
            background-color: salmon;
        }

        .w {
            position: fixed;
            left: 0;
            right: 0;
            top: 100px;
            bottom: 100px;
            overflow: auto;
            background-color: palevioletred;
        }

        .w .l {
            width: 400px;
            /* height: 100%; */
            position: fixed;
            left: 0;
            top: 100px;
            bottom: 100px;
            background-color: greenyellow;
        }

        .w .r {
            position: fixed;
            left: 400px;
            right: 0;
            top: 100px;
            bottom: 100px;
            background-color: blueviolet;
        }

        .footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100px;
            background-color: goldenrod;
        }
    </style>
    <body>
        <div class="header"></div>
        <div class="w">
            <div class="l"></div>
            <div class="r"></div>
        </div>
        <div class="footer"></div>
    </body>

搬运文章

干货!各种常见布局实现+知名网站实例分析

给你一份详细的CSS布局指南，请查收

[CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里？](CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里？ - Shelley Lee的回答 - 知乎 https://www.zhihu.com/question/21504052/answer/149611362)

原文：https://www.cnblogs.com/chuncode/p/13356088.html

内容总结

以上是互联网集市为您收集整理的CSS布局学习总结全部内容，希望文章能够帮你解决CSS布局学习总结所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1271417.html

来源：【匿名】

【上一篇】CSS揭秘之《背景图案》【下一篇】php无法调用css怎么办

更多 ►

【CSS布局学习总结】教程文章相关的互联网学习教程文章

一. 居中相关布局1.1 水平居中布局方案一. inline-block + text-aligntext-align是可以控制行内内容（文字、行内元素、行内块级元素）进行水平对齐。对于块级元素我们可以设置display: inline-block进行对齐。注：text-align属性具有继承性，会导致自己元素内部的文本也是居中显示的，需要自身设置text-align覆盖<style>.wrap {width: 100%;height: 200px;background-color: aqua;text-align: center;}.content {width: 200px;heig...

CSS水平垂直居中方法总结【代码】

部分HTML代码如下：<div class="wrap block"><div class="block-center">块儿居中</div></div><div class="wrap inline"><span class="inline-center">内联居中</span></div>一、absolute拔河效应（元素宽高需设定） .block{ position: relative; } .block-center{ position: absolute; margin: auto; /*这句要写，否则无效果*/ left: 0; top: 0; right: 0; bottom: 0; } 利用margin（元素宽高需设定） .block{positio...

Div+CSS常见错误总结

CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误： 1. 检查HTML元素是否有拼写错误、是否忘记结束标记　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2...

CSS选择器优先级总结

CSS三大特性—— 继承、优先级和层叠继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类　　1.标签选择器(如：body,div,p,ul,li)　　2.类选择器(如：class="head",class="head_logo")　　3.ID选择器(如：id="name",id="name_txt")　　4.全局选择器(如：*号)　　5.组合选择器(如：.head .head_logo)　　6.后代选择器 (如：#head .nav ul li...

css 列表属性详细总结

列表类型（list-style-type）要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。属性值有以下：list-style-type：none无标记list-style-type：disc默认，标记是实心圆list-style-type：circle 空心圆list-style-type：square实心方块list-style-type：decimal标记是...

animate.css总结【代码】

本文对animate.css的各个效果进行总结bounce从上掉落，在地上小幅度跳起<!DOCTYPE html> <meta charset="utf-8"> <html> <head><title>mode</title><link rel="stylesheet" type="text/css" href="animate.css"><style type="text/css">#mode{margin: 0 auto;width: 300px;height: 100px;text-align: center;line-height: 100px;color: blue;font: 50px "微软雅黑";}</style> </head> <body><div id="mode" class="animated infini...

HTML+CSS知识点总结

转自：http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=referral一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色...

CSS选择器总结【代码】

1.通配选择器匹配所有元素　　*{color:red;}2.标签选择器匹配所有p元素　　p{color:red;}3.ID选择器匹配ID="div1"的元素　　#div1{color:red;}4.类选择器匹配class="red"的元素，CSS和HTML对大小写不敏感，但ID是大小写敏感的。　　.red{color:red;} 应用多个class，类名中间用空格隔开，class="red green"。元素将应用red和green的所有规则，重复规则只有一个生效，但不取决于class中类名顺序，而是CSS定义的顺序。 1<!DOCTYPE ht...

css中清除浮动的方法总结【代码】

1、父级div定义height<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </di...

css基础总结一【代码】

最近在弄一个简单管理系统的前端，所以打算将做项目的一些个人感想以及总结简单罗列下，当然，主要针对前端的基础部分以及一些常用的前端个人简单技巧总结。主要分为js部分和css部分，下面是css的基础部分总结　一、基础知识　　1、前端基本概念以及常识　　　　web应用，主要分为前端和后端，而前端的话，主要是想用户展示内容，后端的话主要是处理用户数据。前端内容呈现中，主要有几个问题：内容是什么？如何展示内容？如何展示...

html和css面试题总结

1.对WEB标准以及W3C的理解与认识　　标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;　　2.xhtml和html有什么区别　　HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语...

7-3总结制作海豚家细静态页面小结css

一个div里面有多个相同的元素的时候给头或者尾部的元素去掉某些样式的时候用 first-child 给第一个元素去掉某个元素 last-child 给末尾的去掉今天制作海豚家使用最多的就是 position:fixed 搭配 top bottom left regiht来使用固定在页面上，制作抖动动画使用到relative margin 和relative 定位的区别 margin会影响后继元素的布局而relative不会. 原文：https://www.cnblogs.com/wzsoul/p/14967428.html

HTML5+CSS3静态页面项目-PayPaul的总结【代码】【图】

学习前端有一段时间了，一直在看书上的理论知识，而实战项目却很少。师兄常说，想要知道自己的实力有多少，知识掌握了多少，最好的方法就是去实践了，实践出真知嘛。于是决定在这个假期里，主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个HTML5+CSS3静态页面布局的练习，查缺补漏知识点并且总结在实践过程中遇到的一些错误。页面的设计稿主要是网络上找来了的，也尝试自己切图、测量位置、获得内容的属性等等...

SaberSama【css总结】

为什么要转过来呢？　　　　因为我觉到，同样是一个初学者，应该互相学习，交流。 css：Cascading Style Sheets 层叠样式表CSS引入方式：1.内嵌： <p style="color:red;">xx</p>，这种方式使用最少，因为不方便阅读2.内联：写在<head>中，<style>　　　　　　　　　　　　　　p{xxxxx}　　　　　　　　　　　　</style> 所有p元素都会执行{}中的代码。3.外联：在外部创建一个CSS，再通过link连接这个css.也写在<head>中。选择器:1....

CSS3学习总结

1、border-radius:圆角效果　　（1）border-radius:5px 5px 5px 5px ;如果有4个参数，代表4个角　　（2）border-radius:5px 5px；2个参数，代表top-left,bottom-rigt和top-right,bottom-left; 　　（2）border-radius:5px 5px 5px；3个参数，代表top-lett和top-right，bottom-left和bottom-right；2、box-shadow: 添加阴影第一个参数是往右偏移: box-shadow:10px 0 0 0 red ；第二个参数是往下...

首页 / CSS / CSS布局学习总结

CSS布局学习总结

内容导读

内容图文

一. 居中相关布局

1.1 水平居中布局

方案一. inline-block + text-align

方案二：定位 + transform

方案三：dispaly: block + margin: auto

1.2 垂直相关布局

方案一：定位 + transform

方案二：display：table-cell + vertical

1.3 水平垂直居中

方案一：定位 + 负mrgin

方案二：定位 + transform

方案三：css-table + 行内/行内块 元素

方案四：css-table + 块元素

1.4 更简便的布局方法：flex布局

二. N列布局

2.1 两列布局

方案一：左边元素浮动，定宽，右边元素设置margin-left

方案二：左边元素浮动、定宽，右边元素设置为overflow：hidden

方案三：将左右元素用一个display:table的元素包裹，左右元素设置为display: table-cell

方案四：flex布局

2.2 三列布局

2.2.1 普通三列布局: 定宽 + overflow: hidden

2.2.2 圣杯布局

2.2.3双飞翼布局

2.2.4 flex布局

2.3多列等分布局

方案一： 浮动 + 百分数平分

方案二：使用column布局

方案三：最简便的flex布局

2.4 多列等高布局

方案一：使用display：table布局

方案二：使用flex布局

三. 全屏布局

搬运文章

内容总结

内容备注

内容手机端

【CSS布局学习总结】教程文章相关的互联网学习教程文章

布局 - 相关标签

CSS - 技术教程分类

CSS - 最新教程

CSS - 最热教程

方案三：css-table + 行内/行内块元素

方案一：左边元素浮动，定宽，右边元素设置`margin-left`

方案二：左边元素浮动、定宽，右边元素设置为`overflow：hidden`

方案三：将左右元素用一个`display:table`的元素包裹，左右元素设置为`display: table-cell`

方案一：浮动 + 百分数平分