本知识学习用时:2小时,总第70/10000小时
前言:拿到一张设计稿,我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替,以前很多老的布局方式现在也慢慢淡化了,那哪些是我们最基本的布局方式呢?
本篇给出答案,属于必掌握篇。
一、什么是布局?
现有样式不能满足人们的需求:
① 文档流
② 浮动
③ 定位
人们需要:
① 导航栏+内容
② 导航栏+内容+广告栏
③ 从上到下、从左到右、定宽、自适应...
二、最常用的布局有哪些?
① 单列布局:
现方式——定宽 + 水平居中。
-- (1)非通栏
html
css
-- (2)通栏
html
css
② 双列布局:
一列固定宽度,另外一列自适应宽度。
实现方式——浮动元素 + 普通元素 margin 。
-- (1)侧边栏在左
html
css
-- (2)侧边栏在右
时刻记着页面元素的渲染顺序!
html
css
③ 三列布局
两侧两列固定宽度,中间列自适应宽度。
注意顺序!
html
css
④ 水平等距排列
主要关注“负 margin ”的运用!
html
css
后记:对于“布局”,我们还有一些其他方式:弹性布局 flex、grid 布局等等。我们随后会一一探讨,这篇我们先掌握基础。
前端知识日新月异,迭代很快,但最基本的知识永远都不会变的。所以,夯实好基础,以不变应万变!
欢迎继续关注下文 :
(16)让这些“展示”有更好的扩展性——媒体查询
(本文版权归 “公号 | Oli的前端一万小时” 所有,转载需说明来源)
领取专属 10元无门槛券
私享最新 技术干货