HolyGrailLayout——给前端小白

时间：2023-04-05 18:43:57 HTML5

什么是HolyGrailLayout三栏布局结构，左右栏的宽度固定，中间栏的宽度自动填充，会变化与父元素的宽度。如图所示，页眉和页脚的宽度填满了整个屏幕。缩小或放大屏幕。左列和右列的宽度不变，中间的宽度变小或变大。下面，让我们实现这个效果的dom结构headercenter

left

right

页脚分析：页眉和页脚使用了两个HTML5语义标签。语义标签有利于将seocenter块放在左侧块的前面，使中心块加载更快（DOM加载是顺序加载的）。center,left,right使用相同的类名，也就是因为它们有一些共同的css样式CSS样式第一步将页眉和页脚的宽度设置为100%，左边栏的宽度为200px，宽度右边栏的宽度是300px，中间栏的宽度是100%（因为需要随着浏览器的宽度变化）body{width:100%;保证金：0；//去掉浏览器的默认边距宽度}#header,#footer{width:100%;背景颜色：#ccc；}#container{宽度：100%；背景色：黄色；}#container.column{高度：200px；}#left{宽度：200px；背景色：绿色；}#center{宽度：100%；背景颜色：蓝色；}#right{宽度：300像素；background-color:red;}如下图实现第二步现在让左块、右块、中块水平排列，在一条统一的水平线上，让它们浮动，加上css样式#container.column{向左飘浮;}因为中心块的宽度是100%，占据了所有的位置，所以左块和右块只能向下移动，但是可以看到footer实际上是向上移动的，因为容器块的三个子元素都是浮动的（浮动会脱离文档流），即使我们给三个子元素一个200px的高度，一个容器的高度为0，footer也会上移。这里可以通过三种方式来清除浮动，1.设置容器的高度；2、在footer样式中添加clear:both，清除浮动在其上的其他元素的影响；3.使用伪元素清除浮动#container:after{display:block;内容：'';宽度：100%；高度：0；clear:both;}实现如第三步所示，设置容器的padding-left等于左边块的宽度，padding-right是右边块的宽度加上style#container{padding-left:200px;填充右：300px；box-sizing:border-box;}分析：有两种盒子模型，w3c标准盒子模式和IE怪异盒子，区别在于padding（内边距）和border（边框）是否计入宽高盒子。浏览器默认的盒子模型是content-box，也就是padding和border是不计入width的，因为我们容器的宽度是100%，如果是content-box的话，容器显示的宽度更大比整个浏览器的宽度，你会看到浏览器底部有一个滚动条，所以我们设置box-sizing:border-box让padding算在宽度上。要实现如图所示的第四步，将左侧块移动到中心块的左侧，将右侧块移动到中心块的右侧。本来中心块、左块和右块应该排在同一水平线上，因为容器的宽度不够（中心块的宽度等于容器的宽度）容纳三个块在水平线，然后向下挤压左侧块和右侧块。因此，我们添加左边块的样式margin-left:-100%;box的margin的距离是根据box对应的方向计算的，负值表示向相反的方向移动。比如marin-left是按box的左边计算的，margin-right是按box的右边计算的。如果margin的值是按百分比计算的，那么计算是根据上一个parentlevel的宽度来计算的，这里就是容器的宽度。并且因为centerblock和containerblock的宽度相同，此时leftblock和centerblock重叠，leftblock在centerblock之上（如果没有设置levelz-index，当然z-index必须配合position使用，统一level元素，有重叠时，后面的元素会覆盖前面的元素）此时leftblock会按它的位置向左移动自己的宽度，即200px；#left{位置：相对；right:200px;}分析：相对对象遵循正常的文档流，可以根据top、right、bottom、left等属性偏移正常文档流中的位置。右侧的距离根据左侧块的左侧位置计算。接下来，将样式#right{margin-right:-300px;}添加到右侧块，这意味着右侧块向左移动300px（刚好覆盖容器的padding-right位置）。整个css代码如下：body{width:100%;边距：0；}#header，#footer{宽度：100%；背景颜色：#ccc；}#container{宽度：100%；左填充：200px；填充右：300px；框大小：边框框；背景颜色：黄色；}#container：after{显示：块；内容：'';宽度：100%；高度：0；清除：两者；}#container.column{高度：200px；浮动：左；}#left{宽度：200px；背景色：绿色；左边距：-100%；位置：相对；右：200px；}#center{宽度：100%；背景色：蓝色；}#right{宽度：300px；背景色：红色；margin-right:-300px;}注意：如果将浏览器的宽度缩小到一定程度，你会发现页面的布局乱七八糟，因为左右两列的宽度和边距的值和容器的padding值是硬编码的，当浏览器的宽度不足以容纳它们时，就会发生混淆。因为我们在写页面的时候要响应布局，即不管浏览器的宽度怎么变化，我们展示的页面依然是完美的（哈哈有点夸张），当然要有最小宽度的要求（PC端看具体要求，移动端根据iphone5的宽度一般是320px）ps：第一次写文档，如有错误请指正，谢谢！！！

上一篇：智慧城市大数据运营中心IOCWebGIS地图应用_0

下一篇：2019年最全web前端知识体系汇总

HolyGrailLayout——给前端小白相关文章