css布局

本文详细介绍了网页布局中的多种实用技巧,包括水平居中、垂直居中、两列布局、等分布局及等高布局等,通过具体示例展示了如何运用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

    <style>
      .parent {
            display: flex;
           align-items: center;
      }
    </style>

    <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 class="parent">
              <div class="child">Demo</div>

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

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*宽度为剩余宽度*/
  }
</style>
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>
  table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染,也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距

四、flex
<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>
  ● 低版本浏览器兼容问题
  ● 性能问题,只适合小范围布局
  
等分布局
一、float
<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column">
    <p>4</p>
  </div>
</div>
<style>
  .parent {
    margin-left: -20px;
  }
  .column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
  }
</style>
  ● 此方法可以完美兼容 IE8 以上版本

二、flex
<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column">
    <p>4</p>
  </div>
</div>

<style>
  .parent {
    display: flex;
  }
  .column {
    flex: 1;
  }
  .column+.column { /* 相邻兄弟选择器 */
    margin-left: 20px;
  }
</style>
  ● 强大简单
 ● 有兼容问题

三、table
<div class='parent-fix'>
  <div class="parent">
    <div class="column">
      <p>1</p>
    </div>
    <div class="column">
      <p>2</p>
    </div>
    <div class="column">
      <p>3</p>
    </div>
    <div class="column">
      <p>4</p>
    </div>
  </div>
</div>

<style>
  .parent-fix {
    margin-left: -20px;
  }
  .parent {
    display: table;
    width: 100%;
    /*可以布局优先,也可以单元格宽度平分在没有设置的情况下*/
    table-layout: fixed;
  }
  .column {
    display: table-cell;
    padding-left: 20px;
  }
</style>

等高布局
一、table
  table 的特性为每列等宽,每行等高可以用于解决此需求
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>


<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell
    /*宽度为剩余宽度*/
  }
</style>

二、flex
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>

</div>

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>
  注意这里实际上使用了 align-items: stretch,flex 默认的 align-items 的值为 stretch

三、float
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>

</div>

<style>
  .parent {
    overflow: hidden;
  }
  .left,
  .right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
  }
</style>
  此方法为伪等高(只有背景显示高度相等),左右真实的高度其实不相等。 兼容性较好。

  常见的布局解决方案:主要就使用position、flex 、table(从很久很久以前起,我们就抛弃了table布局页面,但display: table是异常强大)、float等属性目前flex兼容性较差 )

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值