国内很多网站不是响应式,临沂网站制作定制,计算机网络技术电商网站建设与运营,安徽省建设厅网站官网各种常见的CSS布局
在工作中会经常用到很多的布局方式#xff0c;这里总结一下所遇到的布局#xff0c;会持续更新。
悬挂布局 实现这种布局的方式有很多#xff0c;这边主要挑两个#xff0c;如下#xff1a;
方式一#xff1a;使用浮动和块级格式化上下文特性
这种…各种常见的CSS布局
在工作中会经常用到很多的布局方式这里总结一下所遇到的布局会持续更新。
悬挂布局 实现这种布局的方式有很多这边主要挑两个如下
方式一使用浮动和块级格式化上下文特性
这种方式好处是左右两部分都会自适应。
style typetext/css
*{margin: 0;padding: 0;
}
.title{float: left;
}
.con{overflow: hidden;display: block;
}
/style
bodypspan classtitle标题/spanspan classcon内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容/span/p
/body方式二利用父元素压缩自身内容区域 该方式并不能自适应左边的部分也就是说左边部分必须要是一个已知的宽度但是也有好处好处是少使用一个DOM元素。
style typetext/css
*{margin: 0;padding: 0;
}
.title{float: left;
}
.con{overflow: hidden;display: block;
}
/style
p classwrap1span classtitle1标题/span内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
/p
原理就是父元素给了一个内边距将自身的内容压缩然后让title1**脱离文档流**给title1一个负外边距定位在父元素的边框处这样也是一个实现方式。
而对于怎么脱离文档流除了使用浮动还可以绝对定位。为什么要脱离文档流这个和行内格式化上下文有关行内元素是一个接着一个排布的如果需要左负边距的元素没有脱离文档流那么父元素的左内边距并不能真正的挤压内容的空间跟在title1后面的元素还是会跟在title1后面即使父元素有了左内边距。
总结其实这个悬挂布局从本质上来说也是一个两列布局。
双飞翼布局和圣杯布局 圣杯和双飞翼布局解决的问题是相同的只是实现方式不同都是左右两列宽度固定的三列布局的解决方案并且保持中间一列的元素在三列中的最前方确保浏览器能够尽量早的解析这部分内容。
圣杯布局
圣杯布局很早就被提出下面参考的文章就是2006年写的可以说相当古老实现思路相对于双飞翼要难懂一点。其中有一个知识点是 margin无论垂直还是水平方向 百分比值是相对于父元素的width来计算的同时padding无论垂直还是水平方向其实也是。
style typetext/css
.header{height: 50px;background: #ccc;
}
.container{overflow: hidden;padding: 0 100px; /*父元素上挤出了左右两列的空间*/
}
.center{float: left; /*必须要脱离文档流块元素才能在一样显示三列都浮动了*/height: 200px;width: 100%;background: #999;
}
.left{float: left;margin-left: -100%; /*是相对于父元素的width的所以是在父元素的padding-left边界处*/position: relative;right: 100px; /*在边界处还是不够的还遮住了center还需要向左移动自身的宽度大小的距离这里的手段是相对定位*/width: 100px;height: 200px;background: #666;
}
.right{float: left;margin-left: -100px; /*这里应该是在父元素padding-right的边界处*/position: relative; left: 100px; /*同上还是不够需要向右移动自身的宽度大小的距离*/width: 100px;height: 200px;background: #333;
}
.footer{height: 50px;background: #ccc;
}
/style
div classheader/div
div classcontainerdiv classcenter/divdiv classleft/divdiv classright/div
/div
div classfooter/div
双飞翼布局
双飞翼的来历相信不介绍大家也都有所耳闻。在学习双飞翼布局的时候在网上找了很多的资料但是也是这些资料给我造成了很大的困惑在不明白双飞翼是什么的情况下我看到很多文章中center部分只有一个元素DOM结构居然和圣杯布局一样也实现了看上去正确的三列布局这真的很神奇。PS可能我写的也是不知所云如有谬误感谢指正
style typetext/css
.header{height: 50px;background: #ccc;
}
.container{overflow: hidden; /*块级格式化上下文来清除浮动真正要用的时候需要.clearfix*/
}
.center{float: left;width: 100%; /*浮动之后会失去自己的宽度所以要显示的设置宽度为100%*/height: 200px;background: #999;
}
.center-content{margin: 0 100px; /*我自身是没有浮动的宽度会充满父元素同时父元素是100%宽然后使用水平margin挤出左右两栏的空间防止自身内容被覆盖*/height: 200px;
}
.left{float: left;margin-left: -100%;width: 100px;height: 200px;background: #666;
}
.right{float: left;margin-left: -100px;width: 100px;height: 200px;background: #333;
}
.footer{height: 50px;background: #ccc;
}
/style
div classheader/div
div classcontainerdiv classcenterdiv classcenter-content/div/divdiv classleft/divdiv classright/div
/div
div classfooter/div
保持更新中。。。
参考
圣杯布局
CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里
