基础//页面布局——三栏布局1

最新推荐文章于 2023-09-19 19:46:20 发布

爱吃松果的美美

最新推荐文章于 2023-09-19 19:46:20 发布

阅读量211

点赞数

分类专栏： # 基础-知识点总结文章标签： html css

本文链接：https://blog.csdn.net/weixin_37877794/article/details/108490525

版权

基础-知识点总结专栏收录该内容

32 篇文章 0 订阅

订阅专栏

文章目录

一、题目
二、我的代码详情
三、总结

一、题目

根据题目给出你的答案。

二、我的代码详情

https://codepen.io/janmie-cjm/pen/gOrvBEw?editors=1100

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>页面布局</title>
</head>
<body>
<!--  1-浮动解决方案 float  -->
  <section class="wrapper float">
    <div class="left left1">左栏</div>
    <div class="right right1">右栏</div>
    <div class="middle1">
      <h3>1-浮动解决方案 float</h3>
      <ul>
        <li>1.浮动解决方案</li>
        <li>1.浮动解决方案</li>
      </ul>
    </div>
  </section>
<!-- 2-绝对定位解决方案 position: absolute -->
  <section class="wrapper abs-position">
    <div class="left left2">左栏</div>
    <div class="right right2">右栏</div>
    <div class="middle2">
      <h3>2-绝对定位解决方案 position: absolute</h3>
      <ul>
        <li>1.绝对定位解决方案</li>
        <li>1.绝对定位解决方案</li>
      </ul>
    </div>
  </section>
<!-- 3-flexbox display: flex -->
  <section class="wrapper dis-flex">
    <div class="left left3">左栏</div>
    <div class="middle3">
      <h3>3-flexbox display: flex</h3>
      <ul>
        <li>1.flexbox解决方案</li>
        <li>1.flexbox解决方案</li>
      </ul>
    </div>
   <div class="right right3">右栏</div>
  </section>
<!-- 4-表格布局 display: table&table-cell -->
  <section class="wrapper dis-table">
    <div class="left left4">左栏</div>
    <div class="middle4">
      <h3> 4-表格布局 display: table&table-cell</h3>
      <ul>
        <li>1.表格布局解决方案</li>
        <li>1.表格布局解决方案</li>
      </ul>
    </div>
   <div class="right right4">右栏</div>
  </section>
<!-- 5-网格布局 display: grid -->
  <section class="wrapper dis-grid">
    <div class="left left5">左栏</div>
    <div class="middle5">
      <h3>5-网格布局 display: grid</h3>
      <ul>
        <li>1.网格布局解决方案</li>
        <li>1.网格布局解决方案</li>
      </ul>
    </div>
   <div class="right right5">右栏</div>
  </section>
</body>
</html>

html *{
  padding: 0;
  margin: 0;
}
.wrapper {
  height: 100px;
  width: 100%;
  background-color: yellow;
  margin-bottom: 10px;
}
ul {
  list-style-type: none;
}
.left,.right {
  width: 300px;
  height: 100%;
  background-color: #cff;
} 
/* 1-浮动解决方案 float */
.left1 {
  float: left;
}
.right1 {
  float: right;
}
/* 2-绝对定位解决方案 position: absolute */
.abs-position {
  position: relative;
}
.abs-position div {
  position: absolute;
}
.left2 {
  left: 0px;
}
.right2 {
  right: 0px;
}
.middle2 {
  left: 300px;
  right:300px;
  text-align: left;
}
/* 3-flexbox display: flex */
.dis-flex {
  display: flex
}
.middle3 {
  flex: 1
}
/* 4-表格布局 display: table&table-cell */
.dis-table {
  display: table;
}
.dis-table div {
  display: table-cell;
}
/* 5-网格布局 display: grid */
.dis-grid {
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: 300px auto 300px;
}

三、总结

本题目的解决方案有哪些？
浮动 / 绝对定位 / flexbox / 表格布局 / 网格布局；
这5种方案有什么优缺点？
（1）浮动
特点：该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反。任何元素都可以浮动，带有 diaplay: inline-block 属性。
√：兼容性好，简单。
×：脱离文档流，处理不好与其它元素的话容易导致内容凌乱。
（2）绝对定位
√：快捷。
×：完全脱离文档流，不保留占位符，可使用性差。
（3）flexbox
√：完美解决了float和绝对定位的布局缺陷，兼容性好。
（4）表格布局
√：容易实现本题这样的布局，兼容性也好。
×：当其中一个单元格高度增高时，其它栏目也会一起增高。table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
（5）网格布局
√：与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，意味着它可以同时处理列和行。对复杂的布局可以简化代码。
若把题中“已知”去掉，哪些还能用哪些不能用？
当列表内容增多，float、绝对定位、table三种布局形式的内容呈现都出现了问题，只有flexbox、表格布局的呈现没有问题。
各方案的兼容性如何，业务中哪个方案优先选择？
首选flexbox，其次table。兼容性好，而且避免了float和绝对定位脱离文档流的问题，避免了网格布局行高被限制的情况。

-代码中 “html *{…}” 可以全局应用； table布局
-解决方案中，外层需要用display:table；里面子元素需要用到display: table-cell;
-网格布局解决方案中，代码直接应用在外层包裹层上，display: grid; grid-template-rows添加多行，grid-template-columns 添加多列。

*代码尚存在很多不足，望提出不同的意见，互相交流。*

爱吃松果的美美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础//页面布局——三栏布局1

文章目录一、题目二、我的代码详情三、总结一、题目根据题目给出你的答案。二、我的代码详情https://codepen.io/janmie-cjm/pen/gOrvBEw?editors=1100<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia.
复制链接

扫一扫

专栏目录