本文目录一览：
几种常见的css布局方式
四种方式
比如想要做这样一个布局，有哪几种方式。
最简单、最快捷的方式。
element-ui提供的布局容器，el-header头标签，有height属性。el-aside左侧边栏标签，有width属性。el-footer底部标签，有height属性。其他样式可以通过class进行控制。-css布局
相对简单的方式。
利用el-col将每行分为24等分的特性，进行布局。其他属性通过class进行控制。
原生css布局的方式，float布局，也是最基础的方式。
将aside向左浮动，固定好宽度。main向右浮动，注意固定好宽度是 100vw - 左侧边栏的宽度 ，注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面，这边指定float为left、right都是可以的，都可以达到浮动到最下方的效果。-css布局
原生css布局的方式，position布局，也是最基础的方式。
sideBar设置好宽度，利用绝对定位将固定在最左边（由于是绝对定位，所以注意已经脱离了文档流）。main设置margin-left为侧边栏宽度，这样就可以使得main不会被遮挡。footer设置为固定定位，bottom为0固定在底部。其他height、width的值也要注意计算哦~-css布局
css网页布局方式 css布局的几种方式
1、一列布局：一般都是固定的宽高，设置margin : 0 auto来水平居中，用于界面显著标题的展示等。
2、两列布局：说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。
3、三列布局：两侧定宽中间自适应,首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响。
4、混合布局：在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。
CSS布局有哪几种类型？
五种基本布局定位类型:* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。-css布局
CSS的布局
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。-css布局
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
CSS3布局方式有哪些？
1.静态布局
——最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景
实现方式：PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。
缺点: 在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。
实践案例：Float 布局、绝对布局
2.自适应布局
——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。-css布局
注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
3.流失布局（百分比布局 %）
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。-css布局
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”-css布局
注：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
主要实践案例：左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局
4.响应式布局（媒体查询）
——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。-css布局
注：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
5.弹性布局
——rem/em、flex布局
