css布局

最新推荐文章于 2024-09-30 15:56:28 发布

原创最新推荐文章于 2024-09-30 15:56:28 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了网页布局中的多种实用技巧，包括水平居中、垂直居中、两列布局、等分布局及等高布局等，通过具体示例展示了如何运用CSS属性如margin、table、float、position及flex等实现各种布局效果。

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

水平居中布局
一、margin + 定宽
.myDiv{
        width: 100 px;
    margin: 0 auto;
}

二、table + margin
.myDiv{
    display: table;
    margin: 0 auto;
}
　display: table 在表现上类似 block 元素，但是宽度为内容宽。
● 无需设置父元素样式（支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为 <table>

三、inline-block + text-align
<style>
.child {
    display: inline-block;
}
.parent {
      text-align: center;
}

</style>

<div class="parent">
<div class="child">Demo</div>
</div>
● 兼容性佳（甚至可以兼容 IE 6 和 IE 7）

四、 absolute + margin-left
<style>
.parent {
        position: relative;
}
.child {
    position: absolute;
    left: 50%;
    width: 100px;
      margin-left: -50px; /* 宽度的yiba*/
}

</style>

<div class="parent">
<div class="child">Demo</div>
</div>
● 宽度固定
● 相比于使用transform ，有兼容性更好

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

</style>

    <div class="parent">
        <div class="child">Demo</div>
    </div>
● 绝对定位脱离文档流，不会对后续元素的布局造成影响。
● transform 为 CSS3 属性，有兼容性问题

　六、 flex + justify-content
    <style>
        .parent {
            display: flex;
            justify-content: center;
          }

</style>

    <div class="parent">
        <div class="child">Demo</div>
    </div>
  ● 只需设置父节点属性，无需设置子元素
● flex有兼容性问题

垂直居中
一、table-cell + vertical-align
<style>
.parent {
      display: table-cell;
    vertical-align: middle;
}

</style>

<div class="parent">
      <div class="child">Demo</div>
</div>
● 兼容性好(IE 8以下版本需要调整页面结构至 <table>)

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

    <div class="parent">
          <div class="child">Demo</div>
    </div>
● 绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
● transform 为 CSS3 属性，有兼容性问题，同水平居中，这也可以用margin-top实现，原理水平居中

　三、flex + align-items

    <div class="parent">
        <div class="child">Demo</div>
     </div>

flex比absolute强大，但是有兼容问题

水平垂直居中
一、absolute + transform
    <style>
    .parent {
        position: relative;
    }
      .child {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
    }

</style>

    <div class="parent">
          <div class="child">Demo</div>
     </div>
● 绝对定位脱离文档流，不会对后续元素的布局造成影响。
● transform 为 CSS3 属性，有兼容性问题

二、 inline-block + text-align + table-cell + vertical-align
    <style>
    .parent {
       text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child {
        display: inline-block;
      }

</style>

    <div class="parent">
            <div class="child">Demo</div>
    </div>
● 兼容性好

　三、 flex + justify-content + align-items
        <style>
        .parent {
              display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /*垂直居中*/
              }

</style>

</div>

  ● 只需设置父节点属性，无需设置子元素
● 有兼容性问题

两列布局
一列定宽，一列自适应
一、float + margin
<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
　　IE 6 中会有3像素的 BUG，解决方法可以在 left 加入 margin-left:-3px

解决方案：
<style>
.left {
float: left;
width: 100px;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
    此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择，需要设置 .left {position: relative} 来提高层级。
    注意此方法增加了不必要的 HTML 文本结构。

二、float + overflow
<style>
.left {
float: left;
width: 100px;
}
.right {
overflow: hidden;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

    设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。此方法样式简单但不支持 IE 6
BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相    互作用。即：块级格式化上下文，
形成 BFC 的条件
1、浮动元素，float 除 none 以外的值；
2、绝对定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；

4、overflow 除了 visible 以外的值（hidden，auto，scroll）

三、table