42种前端常用布局方案

　　四十二种布局可以细分为如下几类：水平居中垂直居中水平垂直居中两列布局三列布局等分布局StickyFooter布局全屏布局水平居中
　　实现水平布局比较简单，方法也比较多，这里总结了7种常用的布局方法，其公共的CSS代码如下所示：。parent｛background：ff8787；｝。child｛height：300width：300background：e599f7；｝
　　其HTML结构也是固定的，就是一个父级，其宽度继承了的宽度，还有一个子级，这里是固定的300px300px，代码如下：
　　最终的实现效果如下：
　　上图中玫瑰色的块是父级，随页面宽度增加的；淡紫色是子级，相对于父级居中的。1。使用textalign属性
　　若元素为行内块级元素，也就是display：inlineblock的元素，可以通过为其父元素设置textalign：center实现水平居中。实现的CSS代码如下：。parent｛对于子级为display：可以通过textalign：实现水平居中textalign：｝。child｛display：｝2。定宽块级元素水平居中（方法一）
　　对于定宽的的块级元素实现水平居中，最简单的一种方式就是margin：0，但是值得注意的是一定需要设置宽度。实现CSS代码如下：。child｛对于定宽的子元素，直接margin：0即可实现水平居中margin：0｝3。定宽块级元素水平居中（方法二）
　　对于开启定位的元素，可以通过left属性和margin实现。实现CSS代码如下：。child｛开启定位position：left：50；marginleft为负的宽度的一半marginleft：150｝4。定宽块级元素水平居中（方法三）
　　当元素开启决定定位或者固定定位时，left属性和right属性一起设置就会拉伸元素的宽度，再配合width属性与margin属性就可以实现水平居中。
　　实现CSS代码如下：。parent｛position：height：300｝。child｛开启定位父相子绝position：水平拉满屏幕left：0；right：0；width：300拉满屏幕之后设置宽度，最后通过margin实现水平居中margin：｝5。定宽块级元素水平居中（方法四）
　　当元素开启绝对定位或者固定定位时，left属性和transform属性即可实现水平居中。
　　实现CSS代码如下：。parent｛position：｝。child｛开启定位position：该方法类似于left于margin的用法，但是该方法不需要手动计算宽度。left：50；距离父元素50transform：translateX（50）；移动自身宽度的50｝6。Flex方案
　　通过Flex可以有很多方式实现这个居中布局的效果。
　　实现CSS代码如下。parent｛height：300开启Flex布局display：通过justifycontent属性实现居中justifycontent：｝。child｛或者子元素margin：automargin：｝7。Grid方案
　　通过Grid实现居中布局比通过Flex实现的方式更多一些。
　　实现CSS代码如下：。parent｛height：300开启Grid布局display：方法一justifyitems：方法二justifycontent：｝。child｛方法三子元素margin：automargin：｝
　　以上就是水平居中布局常用的几种方式。垂直居中
　　实现垂直布局也是比较简单的，方法也比较多，这里总结了6种常用的布局方法，其公共的CSS代码如下所示：。parent｛height：500width：300margin：0backgroundcolor：ff8787；｝。child｛width：300height：300backgroundcolor：91a7｝
　　其HTML结构也是固定的，就是一个父级包裹一个子级，这里的子级是固定的300px300px，代码如下：
　　最终的实现效果如下：
　　1。行内块级元素垂直居中
　　若元素是行内块级元素，基本思想是子元素使用display：inlineblock，verticalalign：并让父元素行高等同于高度。
　　实现CSS代码如下：。parent｛为父级容器设置行高lineheight：500｝。child｛将子级元素设置为inlineblock元素display：通过verticalalign：实现居中verticalalign：｝2。定位方式实现（方法一）
　　第一种通过定位的方式实现就比较简单，实际就是通过top：50；margintop：等于负的高度的一半就可以实现垂直居中。
　　实现CSS代码如下：。parent｛为父级容器开启相对定位position：｝。child｛position：top：50；margintop：等于负高度的一半margintop：150｝3。定位方式实现（方法二）
　　第二种通过定位的方式实现实现思路：top和bottom将子元素拉伸至100，设置指定的高度，通过margin：即可实现垂直居中。
　　实现CSS代码如下：。parent｛为父级容器开启相对定位position：｝。child｛height：300position：垂直拉满top：0；bottom：0；margin：auto即可实现margin：｝4。定位方式实现（方法三）
　　第三种通过定位的方式就比较灵活，适用于多种场合，使用top配合tansform即可。
　　实现CSS代码如下：。parent｛为父级容器开启相对定位position：｝。child｛position：top：50；transform：translateY（50）；｝5。Flex方案
　　通过Flex可以有很多方式实现这个垂直居中布局的效果。
　　实现CSS代码如下：。parent｛开启flex布局display：方法一alignitems：｝。child｛方法二margin：｝
　　通过Flex布局实现不仅仅只有上面两种，这里只介绍最简单的方式。6。Grid方案
　　通过Grid实现居中布局比通过Flex实现的方式更多一些。
　　实现CSS代码如下：。parent｛display：方法一alignitems：方法二aligncontent：｝。child｛方法三margin：方法四alignself：｝
　　以上就是垂直居中布局常用的几种方式。水平垂直居中
　　实现水平垂直布局基本就是将上面几种方式结合使用，这里总结了7种常用的布局方法，其公共的CSS代码如下所示：body｛margin：0；｝。parent｛height：500width：500backgroundcolor：margin：0｝。child｛height：300width：300backgroundcolor：f783｝
　　其HTML结构也是固定的，就是一个父级包裹一个子级，这里的子级是固定的300px300px，代码如下：
　　最终的实现效果如下：
　　1。行内块级水平垂直居中方案
　　步骤如下：容器元素行高等于容器高度通过textalign：实现水平居中将子级元素设置为水平块级元素通过verticalalign：实现垂直居中
　　实现CSS代码如下：。parent｛1。设置行高等于容器高度lineheight：500通过textalign：实现水平居中textalign：｝。child｛将子级元素设置为水平块级元素display：通过verticalalign：实现垂直居中verticalalign：｝2。定位实现水平垂直居中方案（一）
　　步骤如下：使子元素相对于容器元素定位子元素开启绝对定位设置该元素的偏移量，值为50减去宽度高度的一半
　　实现CSS代码如下：。parent｛1。使子元素相对于本元素定位position：｝。child｛2。开启绝对定位position：3。设置该元素的偏移量，值为50减去宽度高度的一半left：calc（50150px）；top：calc（50150px）；｝3。定位实现水平垂直居中方案（二）
　　步骤如下：使子元素相对于容器元素定位子元素开启绝对定位设置该元素的偏移量，值为50通过外边距值的方式将元素移动回去
　　实现CSS代码如下：。parent｛1。使子元素相对于本元素定位position：｝。child｛2。开启绝对定位position：3。设置该元素的偏移量，值为50left：50；top：50；marginleft：150margintop：150｝4。定位实现水平垂直居中方案（三）
　　步骤如下：使子元素相对于容器元素定位子元素开启绝对定位将子元素拉满整个容器通过margin：auto实现水平垂直居中
　　实现CSS代码如下：。parent｛1。使子元素相对于本元素定位position：｝。child｛2。开启绝对定位position：3。将子元素拉满整个容器top：0；left：0；right：0；bottom：0；4。通过margin：auto实现水平垂直居中margin：｝5。定位实现水平垂直居中方案（四）
　　步骤如下：使子元素相对于容器元素定位子元素开启绝对定位设置该元素的偏移量，值为50通过translate反向偏移的方式，实现居中
　　实现CSS代码如下：。parent｛1。使子元素相对于本元素定位position：｝。child｛2。开启绝对定位position：3。设置该元素的偏移量，值为50left：50；top：50；通过translate反向偏移的方式，实现居中transform：translate（50，50）；｝6。Flex方案
　　步骤如下：将元素设置为Flex布局通过justifycontent：center以及alignitems：center实现或者margin：实现。
　　实现CSS代码如下：。parent｛1。将元素设置为Flex布局display：2。通过justifycontent以及alignitems：center实现justifycontent：alignitems：｝。child｛或者通过marginauto实现margin：｝7。Grid方案
　　Grid方案的实现方式相对来说比较简单，方式也较多。
　　实现CSS代码如下：。parent｛1。元素设置为Grid元素display：通过items属性实现alignitems：justifyitems：items的缩写placeitems：或者通过content属性aligncontent：justifycontent：content的缩写placecontent：｝。child｛或者通过marginauto实现margin：或者通过self属性alignself：justifyself：self的缩写placeself：｝
　　实现水平垂直居中布局的方式大多是通过上面两种布局的方式相结合。两列布局
　　所谓的两列布局就是一列定宽（也有可能由子元素决定宽度），一列自适应的布局。最终效果如下所示：
　　这里用到的HTML结构如下：！解决高度塌陷定宽自适应
　　公共的CSS代码如下：body｛margin：0；｝。container｛height：400backgroundcolor：｝。left｛height：400width：200backgroundcolor：f783fontsize：70lineheight：400textalign：｝。right｛height：400backgroundcolor：c0eb75；fontsize：70lineheight：400｝清除浮动。clearfix：after｛content：；display：height：0；clear：visibility：｝1。floatcalc（）函数完成左列定宽右列自适应
　　步骤如下：左边列开启浮动右边列开启浮动右边列宽度为父级100减去左列的宽度
　　实现CSS代码如下：。left｛左边列开启浮动float：｝。right｛右边列开启浮动float：宽度减去左列的宽度width：calc（100200px）；｝2。floatmarginleft完成左列定宽右列自适应
　　步骤如下：左边列开启浮动通过外边距的方式使该容器的左边有左边列容器的宽度的外边距
　　实现CSS代码如下：。left｛左边列开启浮动float：｝。right｛通过外边距的方式使该容器的左边有200pxmarginleft：200｝3。absolutemarginleft完成左列定宽右列自适应
　　步骤如下：开启定位脱离文档流通过外边距的方式使该容器的左边有左边列容器的宽度的外边距
　　实现CSS代码如下：。left｛开启定位脱离文档流position：｝。right｛通过外边距的方式使该容器的左边有200pxmarginleft：200｝
　　值得注意的是以上几种方案左边列必须定宽，才可以实现，下面这几种方案左边列可以由子级撑起。4。floatoverflow完成左列定宽右列自适应
　　步骤如下：左侧元素开始浮动右侧自适应元素设置overflow会创建一个BFC完成自适应
　　实现CSS代码如下：。left｛1。左侧元素开始浮动float：｝。right｛2。右侧自适应元素设置overflow会创建一个BFC完成自适应overflow：｝5。Flex方案
　　通过Flex布局实现该功能主要是通过flex属性来实现示例代码如下：。container｛display：｝。right｛flex：1；flex：1；表示flexgrow：1；即该项占所有剩余空间｝6。Grid方案
　　通过Grid布局实现该功能主要是通过template属性实现，具体代码如下所示：。container｛display：将其划分为两行，其中一列有本身宽度决定，一列占剩余宽度gridtemplatecolumns：auto1｝三列布局
　　三列布局主要分为两种：第一种是前两列定宽，最后一列自适应，这一种本质上与两列布局没有什么区别，可以参照两列布局实现。第二种是前后两列定宽，中间自适应，最终效果图如下
　　公共CSS如下：body｛margin：0；｝。container｛height：400backgroundcolor：｝。left｛height：400width：200backgroundcolor：f783｝。content｛height：400backgroundcolor：d9480f；｝。right｛height：400width：200backgroundcolor：c0eb75；｝。left，。content，。right｛fontsize：70lineheight：400textalign：｝清除浮动。clearfix：after｛content：；display：height：0；clear：visibility：｝
　　HTML结构如下：！解决高度塌陷左内容右1。通过float实现（一）
　　实现步骤：为了完成效果需要调整HTML结构，调整后如下：！解决高度塌陷左右内容左列容器开启左浮动右列容器开启右浮动自适应元素设置overflow会创建一个BFC完成自适应
　　实现CSS代码如下。left｛1。左列容器开启左浮动float：｝。content｛自适应元素设置overflow会创建一个BFC完成自适应overflow：｝。right｛2。右列容器开启右浮动float：｝2。通过float实现（二）
　　实现步骤：为了完成效果需要调整HTML结构，调整后如下：！解决高度塌陷左右内容左列容器开启左浮动右列容器开启右浮动使中间自适应的宽度为父级容器减去两个定宽的列
　　实现CSS代码如下：。left｛1。左列容器开启左浮动float：｝。content｛3。使中间自适应的宽度为父级容器减去两个定宽的列width：calc（100400px）；｝。right｛2。右列容器开启右浮动float：｝3。通过position实现
　　实现步骤左右两列脱离文档流，并通过偏移的方式到达自己的区域使中间自适应的宽度为父级容器减去两个定宽的列通过外边距将容器往内缩小
　　实现CSS代码如下：。left｛1。左右两列脱离文档流，并通过偏移的方式到达自己的区域position：left：0；top：0；｝。content｛2。使中间自适应的宽度为父级容器减去两个定宽的列width：calc（100400px）；3。通过外边距将容器往内缩小marginright：200marginleft：200｝。right｛position：right：0；top：0；｝4。Flex方案
　　通过Flex布局实现该功能主要是通过flex属性来实现。
　　实现CSS代码如下：。container｛display：｝。right｛flex：1；flex：1；表示flexgrow：1；即该项占所有剩余空间｝5。Grid方案
　　通过Grid布局实现该功能主要是通过template属性实现。
　　实现CSS代码如下：。container｛display：将其划分为两行，其中一列有本身宽度决定，一列占剩余宽度gridtemplatecolumns：auto1｝等分布局
　　等分布局就是将一个容器平均分成几等份，这里以4等分为例，主要介绍4种方法。
　　公共CSS部分如下：body｛margin：0；｝。container｛height：400backgroundcolor：｝。item｛height：100；｝。item1｛backgroundcolor：eccc68；｝。item2｛backgroundcolor：a6c1｝。item3｛backgroundcolor：fa7d90；｝。item4｛backgroundcolor：b0ff70；｝清除浮动。clearfix：after｛content：；display：height：0；clear：visibility：｝
　　公共HTML代码如下：！父元素清除浮动
　　最终的效果如下图所示：
　　1。浮动百分比方式
　　这种方式比较简单，开启浮动，使每个元素占25的宽度。
　　实现CSS代码如下：。item｛开启浮动，每个元素占25的宽度width：25；float：｝2。行内块级百分比方式
　　这种方式与上面那种方式类似，不过需要注意的是行内块级元素有一些类似于边距的几个像素，导致各25会超出容器。
　　实现CSS代码如下：。item｛设置每个元素为行内块级元素，每个元素占24。5的宽度width：24。5；因为行内块级元素有一些类似于边距的几个像素，导致各占25会超出容器display：｝3。Flex方案
　　通过Flex布局实现该功能主要是通过flex属性来实现。
　　实现CSS代码如下：。container｛开启flex布局display：｝。item｛每个元素占相同的宽度flex：1；｝4。Grid方案
　　通过Grid布局实现该功能主要是通过template属性实现。
　　实现CSS代码如下。container｛开启grid布局display：gridtemplatecolumns：repeat（4，1fr）；使用repeat函数生成如下代码gridtemplatecolumns：1fr1fr1fr1｝StickyFooter布局
　　所谓的StickyFooter布局并不是一种新的前端技术和概念，它就是一种网页布局。如果页面内容不够长时，底部栏就会固定到浏览器的底部；如果足够长时，底部栏就后跟随在内容的后面。如下图所示：
　　这里来介绍实现该布局的4种方式
　　公共的CSS代码如下：body｛margin：0；｝。container｛height：400display：｝。left｛height：400width：200backgroundcolor：f759｝。content｛height：400backgroundcolor：52c41a；flex：1；｝。right｛height：400width：200backgroundcolor：f759｝。left，。content，。right｛fontsize：70lineheight：400textalign：｝。header｛height：100backgroundcolor：70a1｝。footer｛height：100backgroundcolor：ff7a45；｝。header，。footer｛lineheight：100fontsize：52textalign：｝
　　公共的HTML如下：headerleftcontentrightfooter1。绝对定位的方式
　　通过绝对定位的方式实现StickyFooter布局的步骤如下：设置最外层容器高度为100；让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100；在中间区域设置paddingbottom为footer的高度；底部栏绝对定位，并一直吸附在底部即可实现。
　　实现CSS代码如下：1。设置最外层容器为100html，body｛height：100；｝2。让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100。main｛position：minheight：100；｝3。在中间区域设置paddingbottom为footer的高度。container｛paddingbottom：100｝由于开启了绝对定位，宽度成了自适应，设置为100bottom：0始终保持底部。footer｛position：width：100；bottom：0；｝2。使用calc函数实现
　　使用calc函数实现的方式会比较简单，中间的容器最少高度为视口宽度的100头部和底部两部分的高度即可完成该功能。
　　实现CSS代码如下：。container｛这里的中间部分的容器最少为视口宽度的100头部和底部两部分的高度即可完成该功能minheight：calc（100vh200px）；｝3。Flex方案
　　实现步骤如下开启flex布局将子元素布局方向修改为垂直排列设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部设置中间部分容器高度为自适应
　　实现CSS代码如下：。main｛开启flex布局display：将子元素布局方向修改为垂直排列flexflow：设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部minheight：100｝。container｛设置中间部分自适应flex：1；｝4。Grid方案
　　实现步骤如下开启grid布局置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部
　　实现CSS代码如下：。main｛开启grid布局display：gridtemplaterows：auto1设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部minheight：100｝全屏布局
　　全部布局主要应用在后台，主要效果如下所示：
　　这里介绍三种全屏布局的实现方法。
　　公共的CSS代码如下：body｛margin：0；｝body，html，。container｛height：100boxsizing：textalign：overflow：｝。content｛backgroundcolor：52c41a；中间部门的布局可以参考两列三列布局display：gridtemplatecolumns：auto1｝。left｛width：240backgroundcolor：52c41a；fontsize：80lineheight：calc（100vh200px）；｝。right｛backgroundcolor：f759fontsize：60｝。header｛height：100backgroundcolor：70a1｝。footer｛height：100backgroundcolor：ff7a45；｝。header，。footer｛lineheight：100fontsize：52｝
　　HTML结构如下：header导航自适应，超出高度出现滚动条footer1。使用calc函数实现
　　实现步骤如下：通过calc函数计算出中间容器的高度。中间出现滚动条的容器设置overflow：auto即出现滚动条的时候出现滚动条。
　　实现CSS代码如下：。content｛overflow：通过calc计算容器的高度height：calc（100vh200px）；｝。left｛height：100；｝。right｛如果超出出现滚动条overflow：height：100；｝。rightin｛假设容器内有500px的元素height：500｝2。Flex方案
　　使用Flex方式实现该布局比较简单。
　　实现CSS代码如下。container｛开启flex布局display：将子元素布局方向修改为垂直排列flexflow：｝。content｛如果超出出现滚动条overflow：设置中间部分自适应flex：1；｝。rightin｛假设容器内有500px的元素height：500｝3。Grid方案
　　grid布局对于这种布局来说，实现起来是非常得心应手的，通过template属性即可实现。
　　实现CSS代码如下。container｛开启grid布局display：gridtemplaterows：auto1｝。content｛如果超出出现滚动条overflow：｝。rightin｛假设容器内有500px的元素height：500｝
　　https：juejin。cnpost7028962991345254407