CSS中有哪些常见的布局

这篇文章将为大家详细讲解有关CSS中有哪些常见的布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
　　1、常见的单列布局：
　　header,content和footer等宽的单列布局
　　header与footer等宽,content略窄的单列布局
　　2、如何实现
　　对于第一种，先通过对header,content,footer统一设置width：1000px免费云主机、域名;或者max-width：1000px(这两者的区别是当屏幕小于1000px时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置margin:auto实现居中即可得到。
　　 　　 　　 　　.header{
　　margin:0auto;
　　max-width:960px;
　　height:100px;
　　background-color:blue;
　　}
　　.content{
　　margin:0auto;
　　max-width:960px;
　　height:400px;
　　background-color:aquamarine;
　　}
　　.footer{
　　margin:0auto;
　　max-width:960px;
　　height:100px;
　　background-color:aqua;
　　}
　　对于第二种，header、footer的内容宽度不设置，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中。
　　 　　 　　
　　 　　 　　.header{
　　margin:0auto;
　　max-width:960px;
　　height:100px;
　　background-color:blue;
　　}
　　.nav{
　　margin:0auto;
　　max-width:800px;
　　background-color:darkgray;
　　height:50px;
　　}
　　.content{
　　margin:0auto;
　　max-width:800px;
　　height:400px;
　　background-color:aquamarine;
　　}
　　.footer{
　　margin:0auto;
　　max-width:960px;
　　height:100px;
　　background-color:aqua;
　　}
　　二、两列自适应布局
　　两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式
　　1.float+overflow:hidden
　　如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。具体代码如下：
　　 　　 　　left
　　
　　 　　right
　　right
　　
　　
　　.parent{
　　overflow:hidden;
　　zoom:1;
　　}
　　.left{
　　float:left;
　　margin-right:20px;
　　}
　　.right{
　　overflow:hidden;
　　zoom:1;
　　}
　　注意点:如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容
　　2.Flex布局
　　Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。
　　//html部分同上
　　.parent{
　　display:flex;
　　}
　　.right{
　　margin-left:20px;
　　flex:1;
　　}
　　3.grid布局
　　Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。
　　//html部分同上
　　.parent{
　　display:grid;
　　grid-template-columns:auto1fr;
　　grid-gap:20px
　　}
　　三、三栏布局
　　特征：中间列自适应宽度，旁边两侧固定宽度，实现三栏布局有多种方式（可以猛戳实现三栏布局的几种方法),本文着重介绍圣杯布局和双飞翼布局。
　　1.圣杯布局
　　①特点
　　比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。
　　.container{
　　padding-left:220px;//为左右栏腾出空间
　　padding-right:220px;
　　}
　　.left{
　　float:left;
　　width:200px;
　　height:400px;
　　background:red;
　　margin-left:-100%;
　　position:relative;
　　left:-220px;
　　}
　　.center{
　　float:left;
　　width:100%;
　　height:500px;
　　background:yellow;
　　}
　　.right{
　　float:left;
　　width:200px;
　　height:400px;
　　background:blue;
　　margin-left:-200px;
　　position:relative;
　　right:-220px;
　　}
　　
　　 　　圣杯布局
　　
　　 　　 　　

关于“CSS中有哪些常见的布局”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

相关推荐: Angular怎么进行视图封装

本篇内容主要讲解“Angular怎么进行视图封装”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Angular怎么进行视图封装”吧!在日常工作中，当我们定义一个Component的时候，要考虑它的encapsulat…