058 - 三位一体(II),Web开发,技术交流,鱼C论坛

不二如是 发表于 2020-11-29 09:57:27

058 - 三位一体(II)

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

上一集：057 - 三位一体(I)

哈哈，废话不多说了，#敲黑板时刻！{:10_281:}

在线视频：传送门

课程思维导图

猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清

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

两列布局

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

<!DOCTYPE html>
<html>

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

.left {
   width: 512px;
   padding: 20px;
   background-color: pink;
   float: left;
}

.right {
   width: 512px;
   padding: 20px;
   background-color: lightblue;
   float: left;
}
</style>
</head>

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

</html>
效果：

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

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

.left {
   width: 512px;
   padding: 20px;
   background-color: pink;
   float: left;
   box-sizing: border-box;
}

.right {
   width: 512px;
   padding: 20px;
   background-color: lightblue;
   float: left;
   box-sizing: border-box;
}
效果：

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

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

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

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

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

.left {
   /* 自适应修改 */
   width: 50%;
   padding: 20px;
   box-sizing: border-box;
   background-color: pink;
   float: left;
}

.right {
   /* 自适应修改 */
   width: 50%;
   padding: 20px;
   box-sizing: border-box;
   background-color: lightblue;
   float: left;
}
效果：

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局演示</title>
<style type="text/css">
   aside {
         width: 20%;
         height: 500px;
         background-color: pink;
         float: left;
   }

   main {
         width: 80%;
         height: 500px;
         margin-left: 20%;
         background-color: lightblue;
   }
</style>
</head>
<body>
<aside></aside>
<main></main>
</body>
</html>
效果：

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

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

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

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

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

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

<style type="text/css">
   aside {
         width: 20%;
         height: 500px;
         background-color: pink;
         position: absolute;
         top: 0;
         left: 0;
   }

   main {
         width: 80%;
         height: 500px;
         margin-left: 20%;
         background-color: lightblue;
   }
</style>
效果：

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

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

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

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>两列布局演示</title>
<style type="text/css">
aside {
   width: 20%;
   height: 500px;
   background-color: pink;
   position: absolute;
   top: 0;
   left: 0;
}

main {
   width: 80%;
   height: 500px;
   margin-left: 20%;
   background-color: lightblue;
}

/* 新增外层 */
.container {
   position: relative;
}
</style>
</head>

<body>
<div class="container">
<aside></aside>
<main></main>
</div>
</body>

</html>
这样就会很和谐啦～

三列布局

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

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

[*]浮动
[*]绝对定位
[*]margin 负值法

我们一个一个来说。

浮动大法

此方法最简单，左边栏向左浮动，右边栏向右浮动，中间主内容同样通过设置左右 margin 来避开覆盖：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局演示</title>
<style type="text/css">
   .left {
         width: 200px;
         height: 500px;
         float: left;
         background-color: pink;
   }

   .right {
         width: 200px;
         height: 500px;
         float: right;
         background-color: lightblue;
   }

   .center {
         height: 500px;
         margin: 0 200px;
         background-color: cornsilk;
   }
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
效果自己实现。

有两个点要注意：

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

绝对定位法

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局演示</title>
<style type="text/css">
   .left {
         width: 200px;
         height: 500px;
         position: absolute;
         top: 0;
         left: 0;
         background-color: pink;
   }

.right {
         width: 200px;
         height: 500px;
         position: absolute;
         top: 0;
         right: 0;
         background-color: lightblue;
   }

.center {
         height: 500px;
         margin: 0 200px;
         background-color: cornsilk;
   }

   .container {
         position: relative;
   }
</style>
</head>
<body>
<div class="container">
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>
</body>
</html>
如果理解两列布局，这个也没难度。

margin负值法

这个是最难理解滴！

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

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

课后作业，完成了吗？

传送门

http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集：059 - 三位一体(III)

如果有收获，别忘了评分{:10_281:} ：

https://xxx.ilovefishc.com/forum/202011/20/092334ggd6inlzfisfrdir.png.thumb.jpg

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

aaron.yang 发表于 2020-11-29 10:59:16

占沙发{:10_256:}

yanghongchen666 发表于 2020-11-29 15:56:19

抢板凳

weiter 发表于 2020-11-29 17:34:52

坐地板{:10_256:}

心驰神往 发表于 2021-8-4 10:47:17

回复回复回复

hornwong 发表于 2021-8-4 10:58:09

{:5_95:}

QBR 发表于 5 天前

学习了{:10_333:}

页: [1]

鱼C论坛's Archiver

058 - 三位一体(II)