摘要：布局方式布局的传统解决方案，基于盒状模型，依赖属性属性属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。关于布局，当然肯定还有更多的更好的方法。
接触前端开发也有半年了，每当需要将一个空白的纸，”画“成一个页面的时候，总会出现不知所措的几秒钟。除了因为对css中的各种属性的不熟练之外，更难为人的是怎么简练的将这些属性排列组合起来。其实静下心来，仔细想一想，无非就是整体-->局部这么个思路。所谓整体，就是页面的局，局部就是各自的整体到局部，再加上一些展示性的属性的组合的这么个过程。考虑好浏览器的兼容性，做一个尽量完美的布局，是写好页面样式的关键一步。
可是，我总是希望能用尽量少的代码，来表现尽量多的内容，但是，如果不考虑其他因素，这一点很容易做到。比如 ，我们要分列，flex足矣。但其他因素终归是必须要顾及的。
布局方式布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
第一 标准流布局
第二 浮动布局
第三 定位布局
案例一--水平居中从一个最简单的居中布局说起
就可以有好多种实现方式，
比如第一种inline-block+text-align的常见方式：
.child{display:inline-block;}
.parent{text-align:center;}
这种方法兼容性比较好，虽然ie6,7不支持inline-block,但是我们可以通过
display:block;zoom:1 近似于 inline-block
第二种table+margin的方式,同样是上例的结构：
.child{display:table;margin:0 auto;}
这种方式需要的css代码很简单，对ie8以上也能很好的支持，但是由于ie6,7对display：table不认，但是我们可以将结构改成table的结构也能达到效果。
第三种方式采用absolute+trasnform的方式
.parent{position:relative;}
.child{position:absolute;left:50%;transform:translateX(-50%);}
这种方式关键的一点是利用transform属性，旋转自身的50%。达到居中的效果。但是ie6,7,8均不能很好的支持。
第三种方式是通过flex+justify-content的组合实现的
.parent{display:flex;justify-content:center;}
这种方同第二种类似，css代码比较简单，这里是不需要对子元素进行任何的设置，这是由于flex的子元素默认是flex-item,宽为元素宽。关于flex的详细内容，可以参考这个介绍flex布局
当然，这里的
justify-content:center;
也有替代的方法，可以通过
.child{margin:0 auto;}
实现相同的效果。
案例二--垂直居中垂直居中，这里总结三种常见的方式
利用table-cell
.parent{display:table-cell;vertical-align:middle;}
这种方式兼容ie8及以上，对ie6,7可以通过前面介绍的，改成table的结构来兼容。
借助定位和transform属性
.parent{position:relative;}
.child{position:absolute;top:50%;transform:translateY(-50%)}
css3的flex
.parent{display:flex;align-item:center;}
案例三--水平垂直居中
水平垂直居中就可以综合考虑前面的水平居中的一些方法和垂直居中的一下方法了。兼容性当然跟前面考虑的原因也类似，这里总结了三种。
基本水平居中方法加table-cell
.parent{text-align:center;display:table-cell;vertical-algin:center;}
.child{display:inline-block;}
定位+ transform属性
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
flex
.parent{display:flex;justify-content:center;align-items:center;}
这种情况下，我们也是不需要对.child进行特殊的设置就可以达到垂直水平居中的效果。
关于布局，当然肯定还有更多的更好的方法。而且，从更宏观的角度，还有对于全局的一个布局，比如top固定，或者一部分定宽，一部分自适应等等要求，这里仅仅是总结了一下常见的，这个需要不断的在实践中进行摸索和改进，css的学习不断的累积很重要。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115015.html
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵 我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...
摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵 我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...
阅读 2044·2021-09-07 10:14
阅读 1480·2019-08-30 15:53
阅读 2273·2019-08-30 12:43
阅读 2863·2019-08-29 16:37
阅读 755·2019-08-26 13:29
阅读 2002·2019-08-26 13:28
阅读 439·2019-08-23 18:33
阅读 3501·2019-08-23 16:09
