一、 why flex 都知道html正常的文档流是自上而下排列的，块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly：inline-block、f…

设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效…

原文链接: Fyerl’s Blog 说起 BFC 其实有点像闭包在大多数人印象中的感觉，平时都用过，但在不了解定义的情况下大多数人却又不知道这就是 BFC。之所以会想了解下什么是 BFC，是因为前些日的一个…

背景 随着前端技术的发展推进，web端的布局方式已基本成熟，那么在网站布局方式中，三列布局最为常用，布局方式也有很多，渐渐的开发者们开始从效率的角度优化自己的代码“如果三排布局能将中间的模块放在dom树前面，那么浏览器在…

为什么要强调布局？ ​ 我们为页面写css，就是想美化这个页面，让它变得好看，而变得好看其实可以分两步来完成，第一步是整理，第二步是修饰。就像一间房间，房间里有很多有用的东西，杂乱无章的摆放着，我们现在怎么美化这个房间呢…

页面布局解决方案 居中布局 水平居中 子元素相对于父元素居中且子元素宽度可变。 除了另外声明，HTML结构为以下内容： <div class="parent"> <div class="child"&g…

相关基础知识 1.内部与外部尺寸模型：（w3c草案）亲测google可支持。（http://w3.org/TR/css3-sizing ） 基于原有CSS尺寸特性，可以使CSS更容易描述内容自适应以及适应固定上下文的盒模…

前言 本文将带你重新认识CSS布局，带你解剖布局原理，前提是你要有基础！本文将解除你在布局方面的疑惑。认识每个布局元素，了解他们的特性，你才知道为什么会是这样的结果。本文内容纯属个人理解，不代表官方。 此文主要为理论部分…

水平居中 【行内元素】适用inline,inline-block,inline-table,inline-flex元素 .center { text-align: center; } 【块级元素】适用于block lev…

感谢csdn原文：浅谈前端移动端页面开发（布局篇）感谢：移动前端自适应解决方案和比较使用Flexible实现手淘H5页面的终端适配 一. viewport 什么是viewport简单来讲，viewport就是浏览器上，用…

前言 通常情况下，要使元素排列在一行内，通常做法就是使用float，然后再清浮动。 如下： 但是如果要使其垂直居中，则必须手动调整，蓝色或者绿色块的位置，比较繁琐。 或者另外一种方法，使用inline-block或inl…

设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效…