前端必会三种CSS布局
概述
大概布局情形如下：
上面的说法可能有点抽象，我们通过京东商城来进一步了解一下布局：
头部可以看到是通栏的布局，网站的主体是放在一个盒子里的，然后这个盒子设置在水平方向居中的位置，接下来的内容就放在这个盒子里面来进行布局。
可以看见该盒子里面的布局都是一行两列一行三列多行多列等等等等的布局，即我们本篇文章要讲的。
只要掌握了这三种布局方式，搭建一个完整网页是没有问题的。
正文
一般的PC端网站宽度是1280px，这里方便我们用宽度为1000px。
另外如果我们不设置的话，默认浏览器会存在8px的边距，所以我们要设置一下将其全局删除一下（因为我是用Vue写的，所以我设置的方法和一般的不一样）：
然后创建文件叫global，意思是一个进行全局处理的文件样式：
然后在main.js中引入：
现在那8px的像素就没有啦。
<template><!--vue2必须要用一个div作为body在最外层--><div><div class="container"></div></div>
</template><script>export default {name: 'Home',}
</script><style>.container{width: 1000px;height: 1500px;/*border用来添加边框，solid是实线的意思，red是给这个实线设置为红色*/border: 2px solid red;/*我们让这个主体盒子水平居中，下面一行代码的意思是上30px边距，左右外边距自动相等，下外边距为0*/margin: 30px auto 0px;}
</style>
效果如下：
构建一行左右两列的布局
即做下面红色和黄色的部分：
这两个div也是合在一起放在一个大div里的：
<template><!--vue2必须要用一个div作为body在最外层--><div><div class="container"><!--第一行的大div--><div class="column2"><!--第一行左边红色盒子--><div class="column2-1"></div><!--第一行右边黄色盒子--><div class="column2-2"></div></div></div></div>
</template><script>export default {name: 'Home',}
</script><style>.container{width: 1000px;height: 1500px;/*border用来添加边框，solid是实线的意思，red是给这个实线设置为红色*/border: 2px solid red;/*我们让这个主体盒子水平居中，下面一行代码的意思是上30px边距，左右外边距自动相等，下外边距为0*/margin: 30px auto 0px;}.column2{border: 2px solid black;}.column2 .column2-1{width: 700px;height: 300px;/*如果不加下面这行，根据页面文档流的格式，下面黄色的div会出现在红色框下面而我们需要它们平行一左一右的放置，所以需要float：left让其左浮动*/float: left;background-color: red;}.column2 .column2-2{/*留出20px的空隙会好看些*/width: 280px;height: 300px;/*因为上面红色div使用了左浮动所以它飘了起来不再占有原来位置，所以黄色盒子就往上走占了红盒原来的位置从而被红盒给盖住了，为了避免这个情况我们要让这个黄盒也浮动，飘到右边去*/float: right;background-color: yellow;}
</style>
效果如下：
但我们可以看出，包裹这两个有色盒的div已经塌陷了，因为这两个有色盒浮动了。这肯定是不允许的，所以我们需要清除浮动。
我们只要在需要清除浮动的所有盒子的后面加一个div用来清除就可以了，那为什么必须得放在最后呢？因为clear只能清除位于它前面的div的浮动，位于后面的不管。
<template><!--vue2必须要用一个div作为body在最外层--><div><div class="container"><!--第一行的大div--><div class="column2"><!--第一行左边红色盒子--><div class="column2-1"></div><!--第一行右边黄色盒子--><div class="column2-2"></div><!--该div用来清除位于该div之前的所有浮动（不管是左浮动还是右浮动），用both--><div style="clear: both"></div></div></div></div>
</template>
构建一行三列的布局
如下图所示的样子：
一样的方式，不再赘述：
<template><!--vue2必须要用一个div作为body在最外层--><div><div class="container"><!--第一行的大div--><div class="column2"><!--第一行左边红色盒子--><div class="column2-1"></div><!--第一行右边黄色盒子--><div class="column2-2"></div><!--该div用来清除位于该div之前的所有浮动（不管是左浮动还是右浮动），用both--><div style="clear: both"></div></div><!--第二行的大div--><div class="column3"><div class="column3-1"></div><div class="column3-2"></div><div class="column3-3"></div><!--同样也要清楚浮动导致的外层div塌陷嗷--><div style="clear: both"></div></div></div></div>
</template><script>export default {name: 'Home',}
</script><style>.container{width: 1000px;height: 1500px;/*border用来添加边框，solid是实线的意思，red是给这个实线设置为红色*/border: 2px solid red;/*我们让这个主体盒子水平居中，下面一行代码的意思是上30px边距，左右外边距自动相等，下外边距为0*/margin: 30px auto 0px;}.column2{border: 2px solid black;}.column2 .column2-1{width: 700px;height: 300px;/*如果不加下面这行，根据页面文档流的格式，下面黄色的div会出现在红色框下面而我们需要它们平行一左一右的放置，所以需要float：left让其左浮动*/float: left;background-color: red;}.column2 .column2-2{/*留出20px的空隙会好看些*/width: 280px;height: 300px;/*因为上面红色div使用了左浮动所以它飘了起来不再占有原来位置，所以黄色盒子就往上走占了红盒原来的位置从而被红盒给盖住了，为了避免这个情况我们要让这个黄盒也浮动，飘到右边去*/float: right;background-color: yellow;}.column3{border: 2px solid blue;/*第二行的大div我们让其与上面的大div有20px的间距*/margin-top: 20px;}.column3 .column3-1{width: 200px;height: 300px;/*根据我们需要的样式图，我们让其左浮动*/float: left;background-color: aqua;}.column3 .column3-2{width: 400px;height: 300px;/*左浮动*/float: left;/*我们让它和上边的盒子有一点间距*/margin-left: 20px;background-color: coral;}.column3 .column3-3{width: 360px;height: 300px;/*前两个左浮动，我们让第三个右浮动则正好可以实现布局*/float: right;background-color: blueviolet;}
</style>
效果如下：
构建一行多列（多行多列）的布局
效果如下：
我们一般用ul无序列表标签来做这种多行多列的效果，用ul时的一个小技巧，以需要十个ui标签为例，我们如下输入：
然后按下tab补全键（idea环境中）就可以自动补全十个ui啦！
在最后完成时，将之前用来做辅助参考的线啊背景色啊都注释掉，就拿到我们最后的样子啦：
<template><!--vue2必须要用一个div作为body在最外层--><div><div class="container"><!--第一行的大div：一行两列效果--><div class="column2"><!--第一行左边红色盒子--><div class="column2-1"></div><!--第一行右边黄色盒子--><div class="column2-2"></div><!--该div用来清除位于该div之前的所有浮动（不管是左浮动还是右浮动），用both--><div style="clear: both"></div></div><!--第二行的大div：一行多列效果--><div class="column3"><div class="column3-1"></div><div class="column3-2"></div><div class="column3-3"></div><!--同样也要清楚浮动导致的外层div塌陷嗷--><div style="clear: both"></div></div><!--第三行的大div：多行多列效果--><div class="column-n"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><!--清除浮动--><div style="clear: both"></div></ul></div></div></div>
</template><script>export default {name: 'Home',}
</script><style>.container{width: 1000px;/*height: 1500px;*//*border用来添加边框，solid是实线的意思，red是给这个实线设置为红色*//*border: 2px solid red;*//*我们让这个主体盒子水平居中，下面一行代码的意思是上30px边距，左右外边距自动相等，下外边距为0*/margin: 30px auto 0px;}.column2{/*border: 2px solid black;*/}.column2 .column2-1{width: 700px;height: 300px;/*如果不加下面这行，根据页面文档流的格式，下面黄色的div会出现在红色框下面而我们需要它们平行一左一右的放置，所以需要float：left让其左浮动*/float: left;background-color: red;}.column2 .column2-2{/*留出20px的空隙会好看些*/width: 280px;height: 300px;/*因为上面红色div使用了左浮动所以它飘了起来不再占有原来位置，所以黄色盒子就往上走占了红盒原来的位置从而被红盒给盖住了，为了避免这个情况我们要让这个黄盒也浮动，飘到右边去*/float: right;background-color: yellow;}.column3{/*border: 2px solid blue;*//*第二行的大div我们让其与上面的大div有20px的间距*/margin-top: 20px;}.column3 .column3-1{width: 200px;height: 300px;/*根据我们需要的样式图，我们让其左浮动*/float: left;background-color: aqua;}.column3 .column3-2{width: 400px;height: 300px;/*左浮动*/float: left;/*我们让它和上边的盒子有一点间距*/margin-left: 20px;background-color: coral;}.column3 .column3-3{width: 360px;height: 300px;/*前两个左浮动，我们让第三个右浮动则正好可以实现布局*/float: right;background-color: blueviolet;}.column-n {/*border: 2px solid blue;*/margin-top: 20px;}.column-n ul{/*background-color: blue;*/}.column-n ul li{/*border: 1px solid red;*//*给每个li添加宽高*/width: 190px;height: 200px;/*添加左浮动，让它从左往右从上往下排列开排列*/float: left;/*让每个盒子上下左右都边距为5px*/margin: 5px;background-color: aquamarine;}/*去掉ul无序标签的点点*/ul {list-style: none;}
</style>
效果如下：
这三种布局可以解决99%以上的网页布局，学到啦学到啦~
总结
网页布局的样子无外乎上面三种，一开始可以设置border边框线和填充背景颜色来进行辅助布局，同时要记住大盒子套小盒子的套路，都是一个样子，还有就是浮动清楚的方法得记着，一些基础的CSS语法这回用到了就再记忆一下，就酱紫。
前端必会三种CSS布局相关推荐
- 前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式
前端必会的 HTML+CSS 常用技巧 之 虚线的特殊实现方式 利用边框 border 属性 利用background 的 linear-gradient 属性 上 下 左 右 矩形 利用边框 bor ...
- css 背景效果_css透明度怎么设置？三种css图片透明度的设置方法
css透明度的设置在网页的设计中是经常需要用到的,有时为了设计出的网页更加的美观,会对图片进行透明化处理,这样网页上面的内容就不会看不见,有的网页因为图片作为背景,也会更加美观,那么,css中的透明度 ...
- 一键学会三种定位布局，相对定位、绝对定位、固定定位!
定位布局 定位属性: position 作用: 指定元素的定位类型 取值:static 默认不定位相对定位绝对定位固定定位 相对定位 关键字 position:relative 特点:相对不脱离文档流 ...
- 前端页面的几种常用布局
一 .静态页面布局 传统页面布局,网页上的所有元素的尺寸一律使用px作为单位. 静态页面布局通常有几下几种: 1.表格布局 2.层布局 3.div+css样式表布局 表格布局: 表格布局容易把握,是最 ...
- 前端学习第三天——CSS
目录 1.CSS简介 1.html的局限性 1.2CSS-网页的美容师 1.3CSS语法规范 1.4CSS代码风格 2.CSS基础选择器 2.1CSS选择器的作用 2.2选择器分类 2.3标签选择器 ...
- 前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...
- 前端工程师的三种级别，技术决定你能拿5K，还是15K，还是25K
随着信息技术不断发展,前端技术的发展也经历了不同的阶段.前端概念随着移动智能手机的普及被正式提出,混合APP开始被广泛开发.近年来,由于前端技术开始实现工程化,一些企业前端开发任务逐渐向后端拓展,逻辑 ...
- 三种css垂直居中方案
前言 在使用CSS进行页面布局时,垂直居中的实现不像水平居中那么方便,下面分享3种实现垂直居中的方案. 准备 以下面html为基础进行扩展,一个div里包含一个img,目的是使图片相对于div垂直居中 ...
- java基础：map遍历使用；java使用 Patten 和Matches 进行正则匹配；后端传到前端展示图片三种情况，并保存到手机；
文章目录 前言 一.map 遍历方法 二.java正则学习 三.后端传到前端图片三种情况 1. 图片流数据(InputStream) 转 base64,前端展示保存 a. 后端:输入流转base,直接 ...
最新文章
- android培训内容明细,记录Android开发学习
- 项目开发--------XMPP即时通讯
- python免费入门_python入门 2018最新最全学习资料免费获取啦
- 数据集成--ETL工具
- 【分享】C# 字节帮助类 ByteHelper
- 网络延长器分为哪几类？其应用领域有哪些？
- python中print的用法_python中print用法
- grub linux rootfs,rootfs文件系统（笔记）（草稿）
- spring boot打包问题,访问问题
- python字符串批量替换、修改多个字符的方法实例
- 怎么用计算机弹that girl,抖音使用教程 抖音that girl 歌曲歌词介绍
- 优秀的用户体验设计，从讲好一个故事开始
- Javascript深入理解构造函数和原型对象
- Unity的包体压缩以及音效优化
- 好用的Java编程软件，别说你还不知道！
- python可以下载百度文库_Python在线百度文库爬虫(免下载券)
- 爬取中国地震台网以及地震科学数据
- GlassFish 理解
- 8：PMS和软件安装的介绍-步入Linux的现代方法
- 语音端点matlab,语音端点检测及其在Matlab中的实现