css中的那些布局

phodal 发布于2019-08-01 15:30 / 698人阅读

摘要：张鑫旭老师的博客是左边流式布局，右边固定宽度左浮动因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动，因为绝对定位会脱离文档流，只需要设置右的就能实现布局。

因为最近心血来潮，就总结了一下css中的几种常见的多列布局。

两列自适应布局

两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。
这种布局通常是左侧固定，右边自适应，当然也有反过来的，道理一样，这里有好几种方法。

(张鑫旭老师的博客是左边流式布局，右边固定宽度）

左浮动+margin

 因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。
 这个时候只要对右边元素设置margin-left:左边div宽度 就可以实现自适应布局。

代码:左浮动实现两列布局

绝对定位实现两列布局

 这个原理类似浮动，因为绝对定位会脱离文档流，只需要设置右div的margin-left就能实现布局。

代码:绝对定位实现两列布局

flex实现两列布局

 flex布局一直挺好用，无奈兼容性捉急，ie10+才支持。  
 
 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。  
 
 flex布局默认项目是主轴为水平方向，最主要的是flex属性。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。  
 
 
 大概就是给左边的div一个固定值，然后给右边设置flex:auto;来实现两列布局。  
 
 
 这里不多对flex布局介绍，有兴趣的可以看一下

阮一峰老师的这篇博客:flex布局

这里是代码链接:flex布局实现两列布局

calc实现两列布局

  这是css3里面的新属性，兼容性还可以，在ie9+、FF4.0+、Chrome19+、Safari6+都得到了支持。  
 
 通过calc可以使用百分比、em、px和rem单位值计算出其宽度或者高度，这样就不用考虑div值到底是多少。所以可以对右边div设置width:calc(100%-100px);来实现自适应布局。

代码链接:calc实现两列布局

浮动+margin负值来实现

 这是之前写ife任务的时候在一篇博客上看到的。
 
 实现方法是给右边的div外面再套上一个父div，然后让父div的宽度设为100%。
 对父div和左边的div都设置左浮动，再让左div的margin-left:-100%,右div设置margin-left:左div的宽度。
 这样就实现了自适应布局，当然左右div的前后顺序要反过来。

具体看代码:margin负值实现自适应

三列自适应布局

除了常见的两列布局，我们也经常能够见到三列布局，左右固定，中间自适应。

 （这里只是拿这张图举个例子，w3school官网是三列固定布局）

浮动实现三列布局

  这个类似两列布局的浮动，对左右div分别设置左右浮动，中间div设置margin-left和margin-right来实现，当然在html中的顺序应该是左右中。

代码链接：浮动实现三列布局

margin负值实现三列布局

  原理同margin负值实现两列布局，不多说了。

直接上代码:margin负值实现三列布局

flex实现三列布局

 和flex两列布局一个原理，对两边设置flex:0 0 100px,中间设置flex:auto。

代码代码：flex实现三列布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49950.html

css中的那些布局

摘要：张鑫旭老师的博客是左边流式布局，右边固定宽度左浮动因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。代码左浮动实现两列布局绝对定位实现两列布局这个原理类似浮动，因为绝对定位会脱离文档流，只需要设置右的就能实现布局。因为最近心血来潮，就总结了一下css中的几种常见的多列布局。两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。这...

liangzai_cool 2019-08-29 11:00 评论0 收藏0
CSS那些事儿——居中布局

摘要：前言居中布局，是前端页面最常见的一种布局需求。下面将现今自己了解的居中布局方法作个小总结。水平居中行内元素在包含的父元素定义属性为。垂直水平居中对于这个问题，可以综合上述点进行实现。前言居中布局，是前端页面最常见的一种布局需求。刚开始学习前端时还是困扰了一段时间，后来看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面将现今自己了解的居...

JeOam 2019-08-29 13:05 评论0 收藏0
2019前端面试那些事儿

摘要：虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性，语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签，和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型，新特性，伪虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总1.HTMLHTML5新特性，语义化浏览器的标准模式和怪...

JeOam 2019-08-02 14:28 评论0 收藏0
2019前端面试那些事儿

摘要：虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性，语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签，和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型，新特性，伪虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总1.HTMLHTML5新特性，语义化浏览器的标准模式和怪...

QLQ 2019-08-26 13:33 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 评论0 收藏0