一、二排布局：左侧定宽，右侧适应
方法1 :利用绝对定位
在右侧设置绝对位置，从文档流中删除，然后设置100%的宽度和左值。 确定左侧宽度的位置
文档* {
margin: 0；
padding: 0；
}
. sitebar{
width: 200px；
背景色： green；
}
. content{
位置： absolute；
left: 200px；
right: 0；
top: 0；
背景色： red；
}
右侧自适应块左侧固定宽度200px块方法2 :浮动法(与后3列相同的想法) ) ) ) )。
文档* {
margin: 0；
padding: 0；
}
. sitebar{
浮点：左；
width: 200px；
背景色： green；
}
. content{
背景色： red；
玛格琳- left : 200 px；
}
左定宽200px块右侧机身自适应块的优点：代码简洁、易于理解
缺点：不利于页面优化，加载到右侧的主内容区域之后
方法margin负值法
该方法在网站布局中非常常见，也是面试的常考点，优点是三栏相互关联，有一定的耐受性。
请求：在middle外部添加div。 在此div中，必须设置浮动属性以形成BFC，并设置宽度。 此宽度与左、右块的边距负值匹配。 看看代码吧
方法css3新属性flex方法
写一个
、在flex中，像容器一样，将left、right、middle全部包起来
并列设置div的显示： flex。
将flex:1 (或自动)添加到middle块样式中
三列布局
方法1 )利用绝对定位)使用左右两排固定宽度、绝对定位
3列自适应布局左右绝对位置absolute *{
padding: 0； margin: 0；
}
. left{
width: 200px；
高： 200 px；
后台： yellow；
位置： absolute；
top: 0；
left: 0； //注意这里
}
. right{
width: 200px；
高： 200 px；
后台： blue；
位置： absolute；
top: 0；
right: 0； //注意这里
}
. middle{
高： 200 px；
后台： red；
文本对齐3360中心；
}
middle left right方法2 :浮动法
浮动法原理：
左右块分别使用float:left和float:right。 使用float时，左侧和右侧的元素与文档流分离，而中间元素位于常规文档流中。
注意：
middle位置要求： middle块必须位于左和右之后。 这占据了文档流的位置，因此必须将其放在最后
3列自适应布局左右绝对位置absolute *{
padding: 0； margin: 0；
}
. left{
width: 200px；
高： 200 px；
后台： yellow；
浮点：左；
}
. right{
width: 200px；
高： 200 px；
后台： blue；
浮点：轻型；
}
. middle{
高： 200 px；
后台： red；
文本对齐3360中心；
}
left right middle法margin负值法
该方法在网站布局中非常常见，也是面试的常考点，优点是三栏相互关联，有一定的耐受性。
请求：在middle外部添加div。 在此div中，必须设置浮动属性以形成BFC，并设置宽度。 此宽度与左、右块的边距负值匹配。 看看代码吧
文档* {
padding: 0； margin: 0；
}
. main{
width: 100%；
高： 200 px；
后台： blue；
浮点：左； 包含middle外层的div设置浮动*/
}
. left{
width: 200px；
高： 200 px；
后台： yellow；
浮点：左；
margin-left: -100%； /*-100%是因为它们相对移动到下一行*/
}
. right{
width: 300px；
高： 200 px；
后台： blue；
浮点：左；
玛格琳- left :-300 px； /*其中为right宽度的负值*/
}
. middle{
高： 200 px；
后台： red；
文本对齐3360中心；
}
middle left right方法css3新属性flex方法
写一个
、在flex中，像容器一样，将left、right、middle全部包起来
并列设置div的显示： flex。
将flex:1 (或自动)添加到middle块样式中
3列自适应布局css3新属性flex方法#box{
width: 100%；
高： 200 px；
显示： Flex；
}
#left，#right{
width: 200px；
高： 200 px；
后台： pink；
}
#middle{
flex :自动； /* flex属性是flex-grow、flex-shrink和flex-basis的缩写，默认值为0 1自动。 以下两个属性是可选的： /
背景：天空蓝；
}
左中右