页面布局在那(页面布局怎么设置在哪里)
618
2022-05-30
圣杯布局针对的是左右栏固定,中间栏自适应的网页布局。
它的布局有以下几点:
1、三列布局,中间宽度自适应,左右定宽
2、中间栏要在浏览器中优先展示渲染
3、允许任意列的高度最高
初始代码:
图1. 样式
图二,设置浮动使三个样式在一行
在left,right,middle 添加float:left 浮动,这时候会发现middle宽度缩小.
图三,改变中间宽度
添加middle为 width: 100%,中间部分middle设置100%会撑满,这样因为浮动的关系,middle会占据整个container,左右两块区域被挤下去.
图三,移动左边到第一行左侧
在left样式增加margin-left:-100%为负值,让left回到第一行左侧位置
图四:移动右边到第一行右侧
在right样式增加margin-left: -200px, 200px是右边的自身高
图五:改变父元素的内边距
在.container增加padding: 0 200px;
图六:此时发现左右元素遮挡了中间元素的内容,我们通过相对定位position定位属性来解决
在left和right样式里面添加postition: relative, 被设置为relative相对定位后,其元素不会脱离标准流,不会影响其他元素的排布。
在left样式增加 left:-200px; , right样式增加 left:200px; 向左增加负200px元素,把左边顶到第一行前端,right想左增加200px元素正好把右边顶到第一末端.
代码如下:
总结圣杯布局和飞翼布局区别:
圣杯布局和飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
圣杯布局和飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:
圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position:relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。
飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。
容器
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。