常见css布局总结

最新推荐文章于 2025-02-11 12:18:01 发布

「已注销」

最新推荐文章于 2025-02-11 12:18:01 发布

阅读量397

点赞数 1

分类专栏： css 文章标签：布局 css

本文链接：https://blog.youkuaiyun.com/qq_35936643/article/details/78382888

版权

css 专栏收录该内容

3 篇文章

订阅专栏

CSS布局总结

写在前面

最近总结了一下css布局方面的知识，也做了相应的练习，查了些资料，当然也可能有很多地方没有考虑到，想的是在学习过程中不断更新这篇博文，博文在写的过程中也掺杂了一点自己的理解，若有错误或者不恰当的地方，烦请指教。

绝对定位与浮动

绝对定位与浮动都会“block”化元素

绝对定位：绝对定位后的元素生成一个块级框，而不论原来它在正常流中生成何种类型的框。（css绝对定位）
浮动：“block”化元素是指：行内元素在设置浮动后，会拥有块级元素的部分特性，可以设置高宽等，其实质上还是行内元素。

脱离文档流

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围，可实现文字环绕图片的效果。
使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

清除浮动

元素脱离文档流后可能导致父容器塌陷，这个时候需要清除浮动避免塌陷。

clearfix清除浮动
overflow:hidden清除浮动(父容器溢出隐藏)

圣杯与双飞翼（三栏式布局）

圣杯与双飞翼是在做IFE百度前端小薇学院的三栏式布局的时候了解到的，通过尝试不同种布局，查阅了一些资料后，发现这个题比较好的解决方法就是圣杯布局。

目的：两边定宽中间自适应
中心思想：
- 中间栏宽度设为100%独占一行
- 为左右栏的“拉升”腾出空间（实现圣杯与双飞翼的不同之处）
- 用margin-left负值将左右栏分别拉升回与中间栏同一高度的左右两边
需要注意的地方
- 对中间栏进行优先渲染
- 圣杯基本布局之后需要做一些适当的调整实现具体布局要求，比如相对定位左右栏的位置进行优化
- 在使用布局的时候要考虑盒子的border属性，必要时用到box-sizing:border-box；

任务描述

注：图片来自IFE百度前端小薇学院三栏式布局

三栏式布局

圣杯布局的具体实现：

中间栏宽度设为100%独占一行
设置父容器的左右padding值为左右栏的“拉升”腾出空间
用margin-left负值将左右栏分别拉升回与中间栏同一水平高度的左右两边
使用相对定位设置左右栏的位置

注：代码只截取了重要部分

/*这是html代码*/
<div id="header"></div>
<div id="container">
   <div id="center" class="column"></div>
   <div id="left" class="column"></div>
   <div id="right" class="column"></div>
</div>
<div class="footer"></div>

第一步：给中间栏设置宽度为100%，并设置父容器的左右padding值。给三栏加上浮动，并清除浮动使得父容器高度不塌陷

/*这是最初的css样式（截取了关键部分）*/

#container {
    padding-left: 240px;        /* 左栏宽度+两倍padding值 */
    padding-right: 160px;       /* 右栏宽度+两倍padding值 */
    background: #eee;
}
#container .column{
    float:left;
}
#container::after{      /* 防止父容器高度塌陷 */
    content: '';
    display: block;
    clear: both;
}
#center {
    width: 100%;        /* 中间栏宽度设为100% */
}
#left {
    width: 200px;       /* 左栏宽度固定 */  
}
#right {
    width: 120px;       /* 右栏宽度固定 */
}

效果如下：
float+padding

第二步：将左右栏分别拉升到与中间栏同一水平高度

    #left{
        margin-left: -100%;         /* 负的100% */
    }
    #right{
        margin-right: -120px;       /* 负的右栏宽 */
    }

效果如下：
拉升左右栏

第三步：使用相对定位设置左右栏的位置

    #container .column{
        position: relative;
    }
    #left{
        right:220px;    /* 左栏向左平移到适当位置 */
    }
    #right{
        left:20px;      /* 右栏向右平移到适当位置 */
    }

效果如下：

基本上三栏式布局就完成啦~ 再设置一些内外边距值就可以达到效果Demo

参考资料：

Holygrail圣杯

双飞翼的具体实现：

与圣杯的相同之处不再赘述，不同点在于：

给中间栏再设置一个div，给div设置左右margin值为左右栏的“拉升”腾出空间

/*这是html代码*/
<div id="header"></div>
<div id="container">
   <div id="center" class="column">
        <div id="wrap"></div>       /* 添加的div */
   </div>
   <div id="left" class="column"></div>
   <div id="right" class="column"></div>
</div>
<div class="footer"></div>


#wrap{
    margin-left: 220px;         /* 腾出左边部分 */
    margin-right: 140px;        /* 腾出右边部分 */
    padding: 20px;
}

实现效果：

双飞翼的缺点在于中间栏的高度只适应新添加的div的高度，当左右栏高度超出中间的高度，就会有上图的情况出现，而圣杯布局可以适应三栏中任意最高的高度。

居中

水平居中

text-align:center;只能适用于行内元素,块状元素可以通过改变元素的display属性（display:inline-block或者display:inline）
固定宽度的块状元素设置margin:0 auto;使其居中显示

垂直居中

单行行内元素，设置行高（line-height）与height一致
多行行内元素或者文字与图片一行用vertical-align:center;
块状元素，父元素相对布局，子元素绝对定位（top:50%），再设置偏移（margin-top:子元素高度的一半）
若子元素高度未知，将margin改为transform:translateY(-50%);

水平垂直居中

跟块状元素垂直居中的思路一样，父元素相对布局，子元素绝对定位（top:50%;left:50%;）,再设置偏移量（margin-top:子元素高度的一半;margin-left:子元素宽度的一半）
子元素高度未知，将两个margin改为transform:translate(-50%,-50%);