前言:
搞前端必须知道的布局,工作中必会用到,面试必会考到!
实现步骤:
编写DOM代码:
<body> <header>header</header> <div id="container"> <div id="center">center</div> <div id="left">left</div> <div id="right">right</div> </div> <footer>footer</footer> </body>
为了保证中间区域优先显示,所以将 id 为center的div优先放到前边,优先加载
其中 container 容器中 包裹着 center 、 left 、right 容器
样式代码:
将 center、left、right 全部浮动
同时设置container宽度为100%,设置左右padding值,为了给 left 和 right 留出位置
因为container浮动会导致 footer 位置异常,所以需要清除浮动
#container,#left,#right{
float:left;
}
#container{
width:100%;
padding:0,200px;
}
footer{
clear:both;
}
开始调整 left 的位置,首先将其 设置 负边距 调整到和 center 相同的位置
然后 通过 设置 position:relative ,在设置 right 属性,使其 到达屏幕左侧位置
设置margin-left 为 负值 可以将元素往前拖动,达到 center的位置!
margin-left :-100%, 移动的距离 根据 父级元素的宽度计算,移动的宽度就是父级元素的宽度
#left{ width:200px; margin-left:-100%; position:relative; right:200px; }
给 right 元素进行位置的赋值
margin-right:-200px
这里 大家不要搞混,其实 left 、right、center 在一条线上,因为 container宽度 不够所有的元素都在一条直线上,因此left 和right 会被挤下来
所以,想让 right 跑到屏幕右侧,只需要将其拉扯到 屏幕右侧即可,就是 margin-right:-200px对其进行位置的设置即可
#right { margin-right:-200px; }
最终代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> header, footer { width: 100%; background-color: aqua; } #container { padding: 0 200px; } #center { height: 300px; width: 100%; float: left; background-color: green; } #left { height: 300px; width: 200px; float: left; position: relative; margin-left: -100%; right: 200px; background-color: yellow; } #right { height: 300px; width: 200px; float: left; margin-right: -200px; background-color: blue; } footer { clear: both; } </style> <body> <header>header</header> <div id="container"> <div id="center">center</div> <div id="left">left</div> <div id="right">right</div> </div> <footer>footer</footer> </body> </html>
双飞翼布局
两侧宽度固定,中间宽度自适应的“三栏布局”
实现步骤:
编写DOM代码:
和圣杯布局不同的是,container 容器只是包裹 center 元素,且 container 容器进行浮动
left 和 right 都在 container 容器外部浮动
<body> <header>header</header> <div id="container"> <div id="center">center</div> </div> <div id="left">left</div> <div id="right">right</div> <footer>footer</footer> </body>
样式代码:
container 、 left 、righ 都进行浮动
container 容器内的 center 设置 margin-left 和 margin-right 预留 左右 的空隙
left 元素 设置 margin-left : -100% ,将其移动到 屏幕最左侧
right 元素 设置 margin-left:-200px 将其移动到屏幕最右侧
<style> header, footer { width: 100%; background-color: aqua; } #container { float: left; width: 100%; } #center { height: 300px; margin: 0 200px 0; background-color: red; } #left { height: 300px; width: 200px; float: left; margin-left: -100%; background-color: blue; } #right { height: 300px; width: 200px; float: left; margin-left: -200px; background-color: yellow; } footer { clear: both; } </style>
最终代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> header, footer { width: 100%; background-color: aqua; } #container { float: left; width: 100%; } #center { height: 300px; margin: 0 200px 0; background-color: red; } #left { height: 300px; width: 200px; float: left; margin-left: -100%; background-color: blue; } #right { height: 300px; width: 200px; float: left; margin-left: -200px; background-color: yellow; } footer { clear: both; } </style> <body> <header>header</header> <div id="container"> <div id="center">center</div> </div> <div id="left">left</div> <div id="right">right</div> <footer>footer</footer> </body> </html>
flex 实现 三栏布局
实现结构和圣杯布局相似,但是更加简单
最终代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> header, footer { width: 100%; background-color: aqua; } #container { display: flex; } #center { /* 默认占满整个空间 */ flex:1; height: 300px; background-color: red; } #left{ /*不放大,不缩小,宽度为200px*/ flex:0 0 200px; /*越小的项目越靠前*/ order: -1; height: 300px; background-color: blue; } #right{ /*不放大,不缩小,宽度为200px*/ flex:0 0 200px; height: 300px; background-color: yellow; } </style> <body> <header>header</header> <div id="container"> <div id="center">center</div> <div id="left">left</div> <div id="right">right</div> </div> <footer>footer</footer> </body> </html>