圣杯布局思维最近重新巩固了前端的HTML CSS进行了学习。 我发现很多知识点的记忆没有问题。 但是页面布局的时候，还有瑕疵，这里总结一下前端常用的布局思路。 我自己基础最早的是圣杯布局，所以先在这里介绍一下：
圣杯布局是我接触网站布局后最初完整页面布局的想法，大概如图所示：
这个布局主要是显示内容的部分在上面和中间部分，要强调的点是中间部分优先加载，左右后加载的问题，并且在结构上要求左右部分要固定宽度，中间部分要100%。
所以，分以下三个步骤来考虑。
基础结构导出结构，并为每个结构添加颜色和字符。
！ doctypehtmlhtmlheadtitle/titlestyletype=’ text/CSS ‘ * { padding : margin : } a {文本修饰： none； (Li )列表样式： none； }.top{color:white； 背景色：黑色； 文本对齐3360中心； }.bottom {color:white； 背景色：黑色； 文本对齐3360中心； }.center{color:white； 背景色： red； 文本对齐3360中心； }.left{color: white； 背景色： green； 文本对齐3360中心； }.right{color: white； 背景色：蓝色； 文本对齐3360中心； }/style/headbodydiv class=’top ‘顶级/divdiv class=’center ‘中部/div！ -请注意，由于要先加载中心部分，因此必须首先将中心部分的div放在此处–div class=’left ‘左侧部分/divdiv class=’right ‘右侧部分/div div class=’ bottoood
第一次布局现在构建了必要的结构块，下面开始制作基本布局
1、顶部和底部宽度100%，高度50px固定。 top{color:white； 背景色：黑色； 文本对齐3360中心； width: 100%； height: 50px； }.bottom {color:white； 背景色：黑色； 文本对齐3360中心； width: 100%； height: 50px； }
2、中间3个浮动，高度设定为580px的值； 左宽200px，右宽150px，中间适应100%！ doctypehtmlhtmlheadtitle/titlestyletype=’ text/CSS ‘ * { padding : margin : } a {文本修饰： none； (Li )列表样式： none； }.top{color:white； 背景色：黑色； 文本对齐3360中心； width: 100%； height: 50px； }.bottom {color:white； 背景色：黑色； 文本对齐3360中心； width: 100%； height: 50px； }.m-item{height: 580px； 浮点：左； }.center{color:white； 背景色： red； 文本对齐3360中心； width: 100%； }.left{color: white； 背景色： green； 文本对齐3360中心； width: 200px； }.right{color: white； 背景色：蓝色； 文本对齐3360中心； width: 150px； }/style/headbodydiv class=’top ‘顶级/divdiv class=’center m-item ‘中部/div！ -请注意，由于要先加载中心部分，因此必须首先将中心部分的div放在此处–div class=’left m-item ‘左部分/divdiv class=’right m-it
em”>右边部分</div><div class=”bottom”>底部</div></body></html>
3、不要让底部和中间部分粘到一起 .bottom {color:white;background-color: black;text-align: center;width: 100%;height: 50px;clear: both;} 布局调整
现在乱的够呛，我们来调整一下结构吧。
1、设定一个外边框，占满中间，然后设置内边距，这个边距的目的是将中间部分挤到中间 <!DOCTYPE html><html><head><title></title><style type=”text/css”>…..m-item{height: 580px;float: left;}.content{padding-left: 200px;padding-right: 150px;}……</style></head><body><div class=”top”>顶部</div><div class=”content”> <!– 这里的div是为了约束中间部分使用的–><div class=”center m-item”>中间部分</div> <!– 注意，要先加载中间部分，所以需要先把中间部分的div放到这里–><div class=”left m-item”>左边部分</div><div class=”right m-item”>右边部分</div></div><div class=”bottom”>底部</div></body></html>
2、axdzc左边的div
两边的div布局需要用到一个知识点，负数外边距。我们用一下：
.left{color: white;background-color: green;text-align: center;width: 200px;margin-left: -100%;}
这里浮动上去了，但是覆盖了中间部分的200px，不合适，我们采用相对定位方式：
.left{color: white;background-color: green;text-align: center;width: 200px;margin-left: -100%;position: relative;left: -200px;}
3、 然后axdzc（嘿嘿嘿）右边的div .right{color: white;background-color: blue;text-align: center;width: 150px;margin-right: -150px;}
提供一下完整的代码。
<!DOCTYPE html><html><head><title></title><style type=”text/css”>*{padding: 0;margin: 0}a{text-decoration: none;}li{list-style: none;}.top{color:white;background-color: black;text-align: center;width: 100%;height: 50px;}.bottom {color:white;background-color: black;text-align: center;width: 100%;height: 50px;clear: both;}.m-item{height: 580px;float: left;}.content{padding-left: 200px;padding-right: 150px;}.center{color:white;background-color: red;text-align: center;width: 100%;}.left{color: white;background-color: green;text-align: center;width: 200px;margin-left: -100%;position: relative;left: -200px;}.right{color: white;background-color: blue;text-align: center;width: 150px;margin-right: -150px;}</style></head><body><div class=”top”>顶部</div><div class=”content”> <!– 这里的div是为了约束中间部分使用的–><div class=”center m-item”>中间部分</div> <!– 注意，要先加载中间部分，所以需要先把中间部分的div放到这里–><div class=”left m-item”>左边部分</div><div class=”right m-item”>右边部分</div></div><div class=”bottom”>底部</div></body></html>
到此完成了基本的圣杯样式,匆忙写的，有漏洞希望大家多多帮忙提点啊。