阿里巴巴可以做网站吗,友情链接购买,江西企业登记网络服务平台,网站建设管理 自查 报告今天聊点简单的#xff0c;最近在整理面试题的时候#xff0c;看到css部分#xff0c;感觉自己有段时间没有切页面了#xff0c;正好趁着这个机会好好复习一下#xff0c;加深一下印象。
如何实现三栏布局 中间自适应#xff1f;这也是在前端面试官经常会问到的#xf…今天聊点简单的最近在整理面试题的时候看到css部分感觉自己有段时间没有切页面了正好趁着这个机会好好复习一下加深一下印象。
如何实现三栏布局 中间自适应这也是在前端面试官经常会问到的当你被问到这个它的时候你的脑子里应该想到什么给你3秒钟的时间...那必然是最最经典的圣杯、双飞翼布局这就是实现这个问题最优雅的方式。
既然是三栏布局我们先创建3个容器left middle right 接下来就是实现三栏布局的效果我们先聊一个最简单最好想的方法使用弹性
先给left和right都设置200px的宽度再给它们的父容器container设置属性display: flex;这样这三个容器就会自动去到同一行再给middle容器设置flex1这样中间这个容器的宽度就能一直得到全部宽度减去左右两边容器宽度这个宽度会随着窗口的大小而变化代码和效果图如下 html
复制代码
!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style *{ margin: 0; padding: 0; } div{ height: 100px; } .container{ display: flex; } .left,.right{ width: 200px; background: #66a4bd; } .middle{ flex: 1; background: gray; } /style /head body div classcontainer div classleftleft/div div classmiddlemiddle/div div classrightright/div /div /body /html 这个方法看起来是不是很简单没错它真的非常简单都不需要动脑子简简单单两行代码就能搞定。but它存在一个问题这个方法是先加载左边容器的中间容器加载。不知道大家在上网的时候有没有发现过有些页面左右两边的都是广告重要内容都在中间那么当我们如果使用这个方法来布局的时候最先出来的是广告那你愿意吗我们肯定是想先看到中间的主要内容两边广告什么时候出现谁在意呢
所以为了优化这个问题就出现了经典的 圣杯 和 双飞翼 布局它们的目的就是为了在HTML结构上中间栏在最前面保证了最先渲染中间提升性能
圣杯布局
既然要保证中间栏最先加载那就要把middle容器写在前面 html
复制代码
body div classcontainer div classmiddlemiddle/div div classleftleft/div div classrightright/div /div /body
css样式还是先给左右容器宽度200px高度都一样给个背景色便于区分 第一步给三个容器的父容器添加padding0 200px腾开位置middle中间容器设置width100%此时的宽度继承了父容器的100%并且给三个子容器都设置float: left;让它们都向左浮动去到同一行效果如下 此时的页面效果就是第一行位置放不下左右两个容器被挤到了第二行其实按道理来说它们应该是在第一行两块红色区域位置的浮动的效果嘛大家都能理解吧
第二步给左右容器相对定位让它们相对自己原本文档流的位置进行定位 html
复制代码
.left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; //向左挪动父容器宽度的100% left: -200px; //再向左挪动自身的200宽度 } 此时right接替了left原本的位置同理这时候只需要给right设置margin-right: -200px; 那么就实现了我们想要的三栏布局 完整代码如下 html
复制代码
!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 title圣杯/title style *{ margin: 0; padding: 0; } .container{ height: 100px; padding: 0 200px; } .middle, .left, .right{ height: 100%; float: left; } .middle{ width: 100%; background: gray; } .left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; left: -200px; } .right{ width: 200px; background: #76d1ea; position: relative; margin-right: -200px; } /style /head body div classcontainer div classmiddlemiddle/div div classleftleft/div div classrightright/div /div /body /html
不过这样布局有一个问题就是有一个最小宽度当页面小于最小宽度时布局就会乱掉。 “由于设置了相对定位所以当left原来的位置和right的位置产生重叠时由于浮动的原因一行放不下就会换行” 。所以布局就被打乱了使用双飞翼布局就可以避免这个问题。
双飞翼布局
我们先把HTML结构稍微改造一下在middle容器里面多用了个inner容器 html
复制代码
body div classcontainer div classmiddle div classinnermiddle/div /div div classleftleft/div div classrightright/div /div /body
因为已经设置了middle的width100%这时候我们只需要设置inner容器为padding0 200px我们要的效果同样是把左右两个容器摆放到对应的红框位置 接下来left、middle、right同样使用浮动left设置margin-left:-100%;父容器的整个宽度right设置margin-left-200px这样便实现了三栏布局的效果连定位都不使用且当页面过小时布局不会乱效果如下 完整代码如下 今天聊点简单的最近在整理面试题的时候看到css部分感觉自己有段时间没有切页面了正好趁着这个机会好好复习一下加深一下印象。
如何实现三栏布局 中间自适应这也是在前端面试官经常会问到的当你被问到这个它的时候你的脑子里应该想到什么给你3秒钟的时间...那必然是最最经典的圣杯、双飞翼布局这就是实现这个问题最优雅的方式。
既然是三栏布局我们先创建3个容器left middle right 接下来就是实现三栏布局的效果我们先聊一个最简单最好想的方法使用弹性
先给left和right都设置200px的宽度再给它们的父容器container设置属性display: flex;这样这三个容器就会自动去到同一行再给middle容器设置flex1这样中间这个容器的宽度就能一直得到全部宽度减去左右两边容器宽度这个宽度会随着窗口的大小而变化代码和效果图如下 html
复制代码
!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style *{ margin: 0; padding: 0; } div{ height: 100px; } .container{ display: flex; } .left,.right{ width: 200px; background: #66a4bd; } .middle{ flex: 1; background: gray; } /style /head body div classcontainer div classleftleft/div div classmiddlemiddle/div div classrightright/div /div /body /html 这个方法看起来是不是很简单没错它真的非常简单都不需要动脑子简简单单两行代码就能搞定。but它存在一个问题这个方法是先加载左边容器的中间容器加载。不知道大家在上网的时候有没有发现过有些页面左右两边的都是广告重要内容都在中间那么当我们如果使用这个方法来布局的时候最先出来的是广告那你愿意吗我们肯定是想先看到中间的主要内容两边广告什么时候出现谁在意呢
所以为了优化这个问题就出现了经典的 圣杯 和 双飞翼 布局它们的目的就是为了在HTML结构上中间栏在最前面保证了最先渲染中间提升性能
圣杯布局
既然要保证中间栏最先加载那就要把middle容器写在前面 html
复制代码
body div classcontainer div classmiddlemiddle/div div classleftleft/div div classrightright/div /div /body
css样式还是先给左右容器宽度200px高度都一样给个背景色便于区分 第一步给三个容器的父容器添加padding0 200px腾开位置middle中间容器设置width100%此时的宽度继承了父容器的100%并且给三个子容器都设置float: left;让它们都向左浮动去到同一行效果如下 此时的页面效果就是第一行位置放不下左右两个容器被挤到了第二行其实按道理来说它们应该是在第一行两块红色区域位置的浮动的效果嘛大家都能理解吧
第二步给左右容器相对定位让它们相对自己原本文档流的位置进行定位 html
复制代码
.left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; //向左挪动父容器宽度的100% left: -200px; //再向左挪动自身的200宽度 } 此时right接替了left原本的位置同理这时候只需要给right设置margin-right: -200px; 那么就实现了我们想要的三栏布局 完整代码如下 html
复制代码
!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 title圣杯/title style *{ margin: 0; padding: 0; } .container{ height: 100px; padding: 0 200px; } .middle, .left, .right{ height: 100%; float: left; } .middle{ width: 100%; background: gray; } .left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; left: -200px; } .right{ width: 200px; background: #76d1ea; position: relative; margin-right: -200px; } /style /head body div classcontainer div classmiddlemiddle/div div classleftleft/div div classrightright/div /div /body /html
不过这样布局有一个问题就是有一个最小宽度当页面小于最小宽度时布局就会乱掉。 “由于设置了相对定位所以当left原来的位置和right的位置产生重叠时由于浮动的原因一行放不下就会换行” 。所以布局就被打乱了使用双飞翼布局就可以避免这个问题。
双飞翼布局
我们先把HTML结构稍微改造一下在middle容器里面多用了个inner容器 html
复制代码
body div classcontainer div classmiddle div classinnermiddle/div /div div classleftleft/div div classrightright/div /div /body
因为已经设置了middle的width100%这时候我们只需要设置inner容器为padding0 200px我们要的效果同样是把左右两个容器摆放到对应的红框位置 接下来left、middle、right同样使用浮动left设置margin-left:-100%;父容器的整个宽度right设置margin-left-200px这样便实现了三栏布局的效果连定位都不使用且当页面过小时布局不会乱效果如下 完整代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title圣杯/titlestyle*{margin: 0;padding: 0;}.container{height: 100px;padding: 0 200px;}.middle, .left, .right{height: 100%;float: left;}.middle{width: 100%;background: gray;}.left{width: 200px;background: #76d1ea;position: relative;margin-left: -100%; left: -200px; }.right{width: 200px;background: #76d1ea;position: relative;margin-right: -200px; }/style
/head
bodydiv classcontainerdiv classmiddlemiddle/divdiv classleftleft/divdiv classrightright/div/div
/body
/html给个图便于大家理解 总结
两种布局方式都是把主要栏放在文档流最前面使主要栏优先加载
相同之处 让三列浮动然后通过负外边距形成三列布局
不同之处 在于如何处理中间主列的位置
圣杯布局是利用父容器的左、右内边距两个列的相对定位;双飞翼布局是把主列嵌套在一个新的父级块中并利用主列的左、右外边距进行布局调整
