css基础布局

最新推荐文章于 2025-01-06 20:56:13 发布

enmmmm

最新推荐文章于 2025-01-06 20:56:13 发布

阅读量133

点赞数

分类专栏：知识补充文章标签： css css3

本文链接：https://blog.youkuaiyun.com/enmmmm/article/details/107764838

版权

知识补充专栏收录该内容

12 篇文章

订阅专栏

GitHub地址：https://github.com/enmmmm/css-three-column-layout

实现一个两侧宽度固定，中间宽度自适应的三栏布局。

要点：

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列

页面的DOM结构

<body>
 <div class="lay-header">
   Header
 </div>
 <div class="container">
   <div class="main">
      <h2>Main</h2>
      <p>This is main body</p>
   </div>
   <div class="left">
     <h2>left</h2>
     <p>This is left body</p>
   </div>
   <div class="right">
     <h2>right</h2>
     <p>This is right body</p>
   </div>
 </div>
 <div class="lay-footer">
   <h4>Footer</h4>
 </div>
</body>

圣杯布局（浮动和绝对定位）

<style>
body {
  /* 220px(左)+220px(右)+220px(左边绝对定位占的220px) */
  min-width: 660px;
}

.lay-header,.lay-footer {
   width: 100%;
   text-align: center;
   background-color: #ccc;
}

.container {
   box-sizing: border-box;
   width: 100%;
   background-color: aquamarine;
   padding: 0 220px 0 220px;
}

.main,.left,.right {
   float: left;
}

.main {
   width: 100%;
   background-color: cornflowerblue;
}

.left {
   position: relative;
   left: -220px;
   margin-left: -100%;
   width: 220px;
   background-color: bisque;
}

.right {
   width: 220px;
   margin-right: -220px;
   background-color: burlywood;
}

.lay-footer {
   clear: both;
}
</style>

双飞翼布局（浮动）--- 来源于淘宝UED（User Experience Design - 用户体验设计）

body {
  //220px(左)+220px(右)+150px(给中间main留的可用宽度)
  min-width: 590px;
}

.lay-header,.lay-footer {
   text-align: center;
   background-color: #ccc;
}

.main,.left,.right {
   min-height: 130px;
   float: left;
   word-break: break-all;
}

.main {
   width: 100%;
   background: cornflowerblue;
}

.main-corn {
   margin: 0 220px 0 220px;
   min-width: 220px;
}

.left {
   width: 220px;
   margin-left: -100%;
   background: bisque;
}

.right {
   width: 220px;
   margin-left: -220px;
   background: burlywood;
}

.lay-footer {
   clear: both;
}

<body>
  <div class="lay-header">
     Header
  </div>
  <div class="container">
    <div class="main">
       <!-- 双飞翼布局多套了一层div结构 -->
       <div class="main-corn">
         <h2>Main</h2>
         <p>This is main body</p>
       </div>
     </div>
     <div class="left">
       <h2>left</h2>
       <p>This is left body</p>
     </div>
     <div class="right">
       <h2>right</h2>
       <p>This is right body</p>
     </div>
   </div>
   <div class="lay-footer">
     <h4>Footer</h4>
   </div>
</body>

Flex布局（IE10+）

//flex布局不用设置min-width也可很好的适应
.container {
   display: flex;
}
.main {
   flex: 1;
}
.left {
   //flex-grow,flex-shrink,flex-basic 默认值为0 1 auto，后两个属性可选。
   flex: 0 0 220px;
   order: -1;
}
.right {
   flex: 0 0 220px;
}

Grid布局（IE10+）

body {
  /* 220px(左)+220px(右)+150px(给中间main留的可用宽度) */
   min-width: 590px;
}
.container {
   display: grid;
   grid-template-columns: 220px calc(100% - 440px) 220px;
}