设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 058 - 三位一体(II)
返回列表 发新帖
查看: 4215|回复: 5

[学习笔记] 058 - 三位一体(II)

[复制链接]
不二如是
发表于 2020-11-29 09:57:27 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 不二如是 于 2020-12-31 08:55 编辑





哈哈，废话不多说了，#敲黑板时刻！




在线视频：传送门




课程思维导图

58.png

猛戳

                               
登录/注册后可看大图
超清




上一节实现了单列布局，这节来看两列和三列布局。

两列布局

最简单的方式就是使用浮动 float：

  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>两列布局演示</title>
  7.   <style type="text/css">
  8.     .box {
  9.       width: 1024px;
  10.     }

  12.     .left {
  13.       width: 512px;
  14.       padding: 20px;
  15.       background-color: pink;
  16.       float: left;
  17.     }

  19.     .right {
  20.       width: 512px;
  21.       padding: 20px;
  22.       background-color: lightblue;
  23.       float: left;
  24.     }
  25.   </style>
  26. </head>

  28. <body>
  29.   <div class="box">
  30.     <div class="left">
  31.       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ipsam earum excepturi eos quod distinctio
  32.         nihil modi blanditiis reprehenderit eligendi architecto error non magni dicta rerum suscipit qui repudiandae
  33.         corporis?</p>
  34.     </div>
  35.     <div class="right">
  36.       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore nihil odio nulla pariatur necessitatibus in
  37.         cumque porro quaerat nemo aperiam vel praesentium corrupti ut, dolores reiciendis. Adipisci vero magnam optio.
  38.       </p>
  39.     </div>
  40.   </div>
  41. </body>

  43. </html>
复制代码

效果：

2020-12-01_18-34-00.jpg


现在 left 和 right 都是块级元素，所以上下布局。

在 left 和 right 中分别添加 box-sizing:border-box：

  1. .left {
  2.       width: 512px;
  3.       padding: 20px;
  4.       background-color: pink;
  5.       float: left;
  6.       box-sizing: border-box;
  7.     }

  9.     .right {
  10.       width: 512px;
  11.       padding: 20px;
  12.       background-color: lightblue;
  13.       float: left;
  14.       box-sizing: border-box;
  15.     }
复制代码

效果：

2020-12-01_18-37-12.jpg


这个利用之前讲过的盒模型中，对于块级盒子设置为 border box，边框盒包裹内容和内边距。

两个盒子就会并排在一行显示。

这种方法比较简陋，随着页面缩小，元素不会自动适配。

想优化就需要外层设置 max-width 属性，内层设置 width 和 float:left：

  1. .box {
  2.       /* 自适应修改 */
  3.       max-width: 1024px;
  4.       margin: auto;
  5.     }

  7.     .left {
  8.       /* 自适应修改 */
  9.       width: 50%;
  10.       padding: 20px;
  11.       box-sizing: border-box;
  12.       background-color: pink;
  13.       float: left;
  14.     }

  16.     .right {
  17.       /* 自适应修改 */
  18.       width: 50%;
  19.       padding: 20px;
  20.       box-sizing: border-box;
  21.       background-color: lightblue;
  22.       float: left;
  23.     }
复制代码

效果：

2020-12-02_17-08-26 (1).gif


很实用的技巧，请大家熟练掌握。

还有一种情况是侧栏固定宽度，主内容自适应的布局，用语义化标签来实现：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>两列布局演示</title>
  6.     <style type="text/css">
  7.         aside {
  8.             width: 20%;
  9.             height: 500px;
  10.             background-color: pink;
  11.             float: left;
  12.         }
  13.    
  14.         main {
  15.             width: 80%;
  16.             height: 500px;
  17.             margin-left: 20%;
  18.             background-color: lightblue;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <aside></aside>
  24.     <main></main>
  25. </body>
  26. </html>
复制代码

效果：

2020-12-02_17-33-45.jpg


边栏浮动到左侧，就会遮住右侧没有使用浮动的主内容。

可以对主内容施加一个 margin-left 属性，使其避开左侧内容的覆盖。

margin 属性的作用是设置元素的外边距，那这个外边距是如何弄出来的呢？

是通过移动自身的位置得到的。

比如这里我们设置 margin-left为20%，说明该元素向右移动 20% 的位置，这样左侧就有了 20% 的外边距啦。

好了，同样的效果，如果不使用浮动，我们还可以通过 position 属性来实现：

  1.     <style type="text/css">
  2.         aside {
  3.             width: 20%;
  4.             height: 500px;
  5.             background-color: pink;
  6.             position: absolute;
  7.             top: 0;
  8.             left: 0;
  9.         }
  10.    
  11.         main {
  12.             width: 80%;
  13.             height: 500px;
  14.             margin-left: 20%;
  15.             background-color: lightblue;
  16.         }
  17.     </style>
复制代码

效果：

2020-12-02_17-39-18.jpg


注意箭头所指支持，有空隙了！

absolute 属性是相对于最近一个设置了 position 属性值的祖先元素重新定位。

可以人为地给它包裹一个 position 属性为非 static 的父元素：

  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>两列布局演示</title>
  7.   <style type="text/css">
  8.     aside {
  9.       width: 20%;
  10.       height: 500px;
  11.       background-color: pink;
  12.       position: absolute;
  13.       top: 0;
  14.       left: 0;
  15.     }

  17.     main {
  18.       width: 80%;
  19.       height: 500px;
  20.       margin-left: 20%;
  21.       background-color: lightblue;
  22.     }

  24.     /* 新增外层 */
  25.     .container {
  26.       position: relative;
  27.     }
  28.   </style>
  29. </head>

  31. <body>
  32.   <div class="container">
  33.     <aside></aside>
  34.     <main></main>
  35.   </div>
  36. </body>

  38. </html>
复制代码

这样就会很和谐啦～


三列布局

相对于两列布局来说，三列布局的灵活性得到了进一步的加强。

三列布局有几种经典方式：

  • 浮动
  • 绝对定位
  • margin 负值法

我们一个一个来说。

浮动大法

此方法最简单，左边栏向左浮动，右边栏向右浮动，中间主内容同样通过设置左右 margin 来避开覆盖：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>三列布局演示</title>
  6.     <style type="text/css">
  7.         .left {
  8.             width: 200px;
  9.             height: 500px;
  10.             float: left;
  11.             background-color: pink;
  12.         }
  13.    
  14.         .right {
  15.             width: 200px;
  16.             height: 500px;
  17.             float: right;
  18.             background-color: lightblue;
  19.         }
  20.    
  21.         .center {
  22.             height: 500px;
  23.             margin: 0 200px;
  24.             background-color: cornsilk;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="left"></div>
  30.     <div class="right"></div>
  31.     <div class="center"></div>
  32. </body>
  33. </html>
复制代码

效果自己实现。

有两个点要注意：
  • 中间主内容的 HTML 代码必须放在最后，否则右边栏会掉到下一行
  • 中间主内容不能去指定它的宽度，因为我们需要中间列的宽度自适应，应该让它默认 auto 就可以了

绝对定位法

绝对定位法也是通过将左右两个边栏脱离文档流，并固定于左右两侧，中间主内容同样通过设置左右 margin 来避开覆盖：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>三列布局演示</title>
  6.     <style type="text/css">
  7.         .left {
  8.             width: 200px;
  9.             height: 500px;
  10.             position: absolute;
  11.             top: 0;
  12.             left: 0;
  13.             background-color: pink;
  14.         }
  15.    
  16.                 .right {
  17.             width: 200px;
  18.             height: 500px;
  19.             position: absolute;
  20.             top: 0;
  21.             right: 0;
  22.             background-color: lightblue;
  23.         }
  24.    
  25.                 .center {
  26.             height: 500px;
  27.             margin: 0 200px;
  28.             background-color: cornsilk;
  29.         }
  30.    
  31.         .container {
  32.             position: relative;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="container">
  38.         <div class="left"></div>
  39.         <div class="center"></div>
  40.         <div class="right"></div>
  41.     </div>
  42. </body>
  43. </html>
复制代码

如果理解两列布局，这个也没难度。

margin负值法

这个是最难理解滴！

在日常应用也比较广泛的像：圣杯布局和双飞翼布局

预知如何布局，请先去看：一份关于负外边距使用的权威指南



课后作业，完成了吗？


传送门





                               
登录/注册后可看大图






如果有收获，别忘了评分 ：


                               
登录/注册后可看大图


这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅 ）

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
yanghongchen666 + 5 + 5 + 3

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

aaron.yang
发表于 2020-11-29 10:59:16 | 显示全部楼层
占沙发
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

yanghongchen666
发表于 2020-11-29 15:56:19 | 显示全部楼层
抢板凳
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

weiter
发表于 2020-11-29 17:34:52 | 显示全部楼层
坐地板
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

心驰神往
发表于 2021-8-4 10:47:17 | 显示全部楼层
回复回复回复
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

hornwong
发表于 2021-8-4 10:58:09 | 显示全部楼层
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-19 15:40

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表