css经典全布局

最新推荐文章于 2025-05-03 12:33:56 发布

若木七

最新推荐文章于 2025-05-03 12:33:56 发布

阅读量1.6k

点赞数 3

分类专栏： css精选文章标签： css html 前端 css3

本文链接：https://blog.youkuaiyun.com/weixin_44667463/article/details/123031451

版权

本文详细探讨了CSS布局的各种方法，包括水平居中（inline-block、table、relative+absolute+transform）、垂直居中（table-cell、relative+absolute+transform）、两列布局（float、overflow、display:table）以及圣杯和双飞翼布局。还介绍了overflow:hidden在清除浮动、解决外边距塌陷和溢出隐藏等方面的作用。同时，提到了CSS表格布局在等高列和影像图库栅格中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平居中布局

body{

<div id=”parent”>
<div id=”child”>水平居中布局<div>
<div>

}

1、inline-block(子)+text-align(父)

缺点：text-align具有继承性导致子集文本内容默认居中显示

#parent{

            background-color: palevioletred;
            width: 100%;
            height: 300px;
            text-align: center;
        }

  #child{
            background-color: papayawhip;
            display: inline-block;
            width: 200px;
            height: 100px;
        }

2、table（子）+margin（子）

缺点：如果子集元素脱离文档流（float，absolute，fixed），导致margin无效

#parent{
            background-color: palevioletred;
            width: 100%;
            height: 300px;
        }

 #child{
            background-color: papayawhip;
            margin: 0 auto;
            display: table;/*转换成块级元素*/
        }

3、relative(父开定位即可)+absolute（子）+transform(子) —>推荐

缺点：css3新增属性，浏览器支持性不好

#parent{
            background-color: palevioletred;
            position: relative;/*开定位即可fixed也行 */
            width: 100%;
            height: 300px;
        }
  #child{
            background-color: papayawhip;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

垂直居中布局

1、table-cell（父）+vertical-aligh(父)

父：相当于单元格，子相当于其中的文本
缺点具有继承性

#parent{
            background-color: palevioletred;

            display:table-cell;//单行,多行的文本垂直居中

            vertical-align: middle;//把此元素放置在父元素的中部

            width: 100%;

            height: 300px;
        }

 #child{
            background-color: papayawhip;
        }

2、relative(父)+absolute(子)+transform（子)

父加定位即可fixed也可

#parent{
            background-color: palevioletred;
            position: fixed;
            width: 100%;
            height: 300px;
        }

 #child{
            background-color: papayawhip;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

多列布局

一、两列布局

<body>
    <!-- 两列布局 -->
    <div id="left">两列布局左</div>
    <div id="right">两列布局右</div>
</body>

1.float+margin

#left{
           width: 200px;
           height: 300px;
           background-color:yellow;
           float:left;
       }
#right{
           height: 300px;
           background-color: purple;
           margin-left: 200px;
       }

2.float+overflow

overflow：hidden会开启BFC模式，当前元素的内部环境与外界完全隔离

#left{
           width: 200px;
           height: 300px;
           background-color:yellow;
           float:left;

最低0.47元/天解锁文章