多栏布局
一、布局的几种方式
-
静态布局
页上的所有元素的尺寸一律使用px作为单位
1.布局特点
不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。
常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，
如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端
2.设计方法
PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分
优点:这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。
-
流式布局
流式布局的特点是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统网格系统
- 布局特点
屏幕分辨率变化时，页面里元素的大小会变化而但布局不变 - 设计方法
使用%百分比定义宽度，高度大都是用px来固定住
缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示
-
自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，
页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
-
响应式布局
- 布局特点
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变 - 设计方法
媒体查询+流式布局。
优点：适应pc和移动端，如果足够耐心，效果完美。
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
-
弹性布局（rem/em布局）
- rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素
- 使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示
- 浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，
CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，
因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。
结论
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
两栏布局
-
1、左侧固定宽度，右侧自适应
方法一： 左侧设置float:left，右侧设置margin-left为左侧的宽度。右侧不能设置float:left。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
width:500px;
height:300px;
float:left;
background:red;
}
#right{
height:300px;
margin-left:500px;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
方法二： 左侧设置float:left，右侧设置overflow:hidden。
利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
width:500px;
height:300px;
float:left;
background:red;
}
#right{
height:300px;
overflow:hidden;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
方法三： 左侧设置绝对定位，右侧设置margin-left为左边的宽度。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
margin:0;
}
#left{
width:500px;
height:300px;
position:absolute;
left:0px;
top:0px;
background:red;
}
#right{
height:300px;
margin-left:500px;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
方法四： 父元素设置display:flex,右侧设置flex:1
<!doctype html>
<html>
<head>
<style type="text/css">
body{
display:flex;
}
#left{
width:500px;
height:300px;
background:red;
}
#right{
height:300px;
flex:1;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
-
2、右侧固定宽度，左侧自适应
方法一： 左侧设置margin-right为右侧的宽度，右侧设置float:right。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
height:300px;
margin-right:300px;
background:red;
}
#right{
width:500px;
height:300px;
float:right;
background:blue;
}
</style>
</head>
<body>
<div id="right"></div>
<div id="left"></div>
</body>
</html>
注意：right要放在left的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素在先，那么float的元素将被排斥到下一行。由于right是float的元素，而left是非float的元素，为避免right内容换行下移，需要把right放在left的前面。
方法二： 左侧设置margin-right为右侧的宽度，右侧采用绝对定位，根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
margin:0;
}
#left{
height:300px;
margin-right:500px;
background:red;
}
#right{
width:500px;
height:300px;
position:absolute;
top:0;
right:0;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
此时left和right的位置前后无关紧要。
注意：由于body默认有margin，对绝对定位的right设置top:0和right:0会导致左右侧之间有缝隙且不等高，为此，可统一设置body的margin为0。
方法三： 左侧设置width为100%，float: left，margin-right为右侧的宽度的负值，右侧设置float: right。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
height:300px;
float:left;
width:100%;
margin-right:-500px;
background:red;
}
#right{
width:500px;
height:300px;
float:right;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
方法四： 父元素设置display:flex，左侧设置flex:1。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
display:flex;
}
#left{
height:300px;
flex:1;
background:red;
}
#right{
width:500px;
height:300px;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
三栏布局
-
左右固定宽度，中间自适应
https://codepen.io/myongchon/pen/abbveor
方法一：左侧设置float:left，右侧设置float：right，中间设置margin-right为右侧的宽度，margin-left为左侧的宽度。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
width:200px;
height:300px;
float:left;
background:red;
}
#middle{
height:300px;
margin-left:200px;
margin-right:500px;
background:blue;
}
#right{
width:500px;
height:300px;
float:right;
background:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</body>
</html>
注意：right要放在middle的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素在先，那么float的元素将被排斥到下一行。由于right是float的元素，而middle是非float的元素，为避免right内容换行下移，需要把right放在middle的前面。
方法二： 中间设置margin-right为右侧的宽度，margin-left为左侧的宽度，左侧和右侧采用绝对定位，根据左侧div所需的left与浏览器窗口的顶端和左边的距离分别设置top和left，根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
margin:0;
}
#left{
width:200px;
height:300px;
position:absolute;
left:0;
top:0;
background:red;
}
#middle{
height:300px;
margin-left:200px;
margin-right:500px;
background:blue;
}
#right{
width:500px;
height:300px;
float:right;
position:absolute;
right:0;
top:0;
background:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
此时middle和right的位置前后无关紧要。
注意：由于body默认有margin，对绝对定位的left设置top:0和left:0，right设置top:0和right:0会导致左右侧和中间之间有缝隙且不等高，为此，可统一设置body的margin为0。
方法三：父元素设置display:flex，中间设置flex:1。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
margin:0;
display:flex;
}
#left{
width:200px;
height:300px;
background:red;
}
#middle{
height:300px;
flex:1;
background:blue;
}
#right{
width:500px;
height:300px;
background:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
