HTML经典布局之圣杯布局详解

圣杯布局预览如下

在遇到以下两个要求时(也是圣杯布局的特点)，就需要使用到圣杯布局

三栏布局中，左栏和右栏需要固定宽，中间栏自动占满剩余宽度

要求中间栏优先渲染

示例代码如下,为了方便快速阅读和理解，我将所有除*的样式都写为内联样式并11解释其作用。
注：
在圣杯布局中主要是关注宽度的自适应，不关注高度，因此不必关注实例代码中的高度，所哟高度可以根据需求进行随意设置

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><div id="head" style="height: 200px;background-color: #008000;">头部：100%*200<!-- height:不重要但要有;background-color:设置背景颜色;不设置宽度:div默认占满一行,默认等同于width:100%--></div><div id="middle" style="height: 200px;padding: 0 220px 0 200px;"><!--height:不重要但要有; padding:重点,padding-left为左栏的宽度,padding-right设为右栏的宽度,上下内间距无所谓--><div id="center" style="background-color: #00FFFF;width: 100%;height: 200px;float: left;"><!--#center下载#left和#right在前,即满足中间栏优先渲染的要求 width:100%即占满middle,达到自适应的目的;height:不重要但要有;float:设置浮动,因为width为100%,所以也是浮动的左右栏会被挤到下一行;background-color:设置背景颜色;-->中间：自适应*200</div><div id="left" style="background-color: #FF0000;width: 200px;height: 200px;float: left;margin-left: -100%;position: relative;left: -200px;"><!--width:要与#middle的padding-left值相同,固定宽;height:不重要但要有;float:设置浮动,如此会被同为float的宽度默认为100%的#center挤到下一行,且此时#left的左侧与#center的左侧在同一竖线上;margin-left: 将#left通过设置外间距转移到上一行,且此时#left的左侧与#center的左侧重合;position:设置为相对,使得#left可以通过left属性偏移到#center的左侧;left:设置为#middle的padding-left值,也为#left的宽度值,此时#left的右侧与#center的左侧重合;至此#left遮住(占满)了#middle的内左侧,成为#middle的左栏-->左边：200*200</div><div id="right" style="background-color: #FF0000;width: 220px;height: 200px;float: left;position: relative;left: 220px;margin-left: -220px;"><!--由于#left上去了,所以#right成为了第二行的头头;width:要与#middle的padding-right值相同,固定宽;height:不重要但要有;float:设置浮动,是的被100%宽度的#center挤到下一行,且此时#right的左侧与#center的左侧在同一横轴上;margin-left: 将#right通过设置外间距转移到上一行,且此时#right的右侧侧与#center的右侧重合;position:设置为相对,使得#right可以通过left属性偏移到#center的右侧;left:设置为#middle的padding-right值,也为#right的宽度值,此时#right的左侧与#center的右侧重合;至此#right遮住(占满)了#middle的内右侧,成为#middle的右栏-->右边：200*200</div><!-- 当#middle的高度不为固定值时,就像需要如此清除浮动,使得middle不会出现高度塌陷,能完全适配内部三栏的高且包得住内部三栏<div id="clear_float" style="clear: both;visibility: hidden;"></div> --></div><div id="footer" style="height: 200px;background-color: #008000;">底部：100%*200<!-- height:不重要但要有;background-color:设置背景颜色不设置宽度:div默认占满一行,默认等同于width:100%--></div></body>
</html>
<style>*{/* 此处为css初始化 */padding: 0;/* 将所有标签的padding都设置为0，避免影响宽高 */margin: 0;/* 将所有将所有标签的padding都设置为0，避免影响宽高和元素位置 */text-align: center;/* (不重要)所有文字水平居中 */line-height: 200px;/* (不重要)设置行高，让所有文字都相对于其所在元素内部垂直居中，要求 */font-size: 20px;/* (不重要)设置字体大小 */}
</style>

就是这样子了。
但这个写法在窗口较大时不会出现问题，当浏览器窗口缩小到一定程度时，就会发生变形，因此这里在下面来链接文章内详解了改进后的圣杯布局。
HTML经典布局之圣杯布局(改进版)详解，窗口缩小布局不会变形

HTML经典布局之圣杯布局详解相关推荐

android 图片横竖判断_Android横竖屏切换及其对应布局加载问题详解
本文为大家分享了Android横竖屏切换及其对应布局加载问题,供大家参考,具体内容如下第一,横竖屏切换连带横竖屏布局问题: 如果要让软件在横竖屏之间切换,由于横竖屏的高宽会发生转换,有可能会要求不同 ...
Java Swing布局管理器（详解版）
在使用 Swing 向容器添加组件时,需要考虑组件的位置和大小.如果不使用布局管理器,则需要先在纸上画好各个组件的位置并计算组件间的距离,再向容器中添加.这样虽然能够灵活控制组件的位置,实现却非常麻烦 ...
双飞翼布局与圣杯布局完全解读
一.两种布局的目的使得左右两边的宽度不随着浏览器窗口的变化而变化,是固定的,只有中间的部分才可以随着窗口变化而变化. 二.两种布局的要点经典圣杯布局通过父亲padding给左右俩腾位置从而不会遮住 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
c语言编程输入螺旋数组,C语言经典题目螺旋矩阵实例详解
C语言经典题目螺旋矩阵实例详解 C语言经典题目螺旋矩阵 //N阶螺旋矩阵 #include #include int main() { int N,i,j,n,num=1; int a[10][ ...
python选择排序从大到小_经典排序算法和Python详解之（一）选择排序和二元选择排序...
本文源自微信公众号[Python编程和深度学习]原文链接:经典排序算法和Python详解之(一)选择排序和二元选择排序,欢迎扫码关注鸭! 扫它!扫它!扫它排序算法是<数据结构与算法>中最 ...
1000以内完数c语言程序_C语言经典面试题目及答案详解（二）
接着上次来说,C语言经典面试题目及答案详解(一)当中大部分是一些概念和理解的东西 ,今天说一说实践操作,有关c的经典程序. 1.输出9*9口诀.共9行9列,i控制行,j控制列. #include &q ...
c语言sort函数_C语言经典面试题目及答案详解（二）
接着上次来说,C语言经典面试题目及答案详解(一)当中大部分是一些概念和理解的东西 ,今天说一说实践操作,有关c的经典程序. 1.输出9*9口诀.共9行9列,i控制行,j控制列. #include 2. ...
李洪强iOS经典面试题156 - Runtime详解（面试必备）
李洪强iOS经典面试题156 - Runtime详解(面试必备) 一.runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C ...

HTML经典布局之圣杯布局详解

HTML经典布局之圣杯布局详解相关推荐

最新文章

热门文章