前端布局---盒子模型

      由于公司运营后台页面不是前端人员做的，当初搭建页面结构时考虑的太少，导致现在问题越来越多，于是决定重构，让我们几个前端提出建议，让我从给几个同事（前端+后端+设计）普及布局知识?。想想还是写篇文章的好

　　布局可以大概理解为规划，在初始搭建页面时，就要根据需求去考虑将来可能出现的问题，从而选择最优的布局方式。布局要遵从从外到内，从整体到局部，搭建完外部架子，指定到部分呢添加内容，内部元素少用固定宽高，尽量使用padding和内容撑开父级元素，保证页面可维护性。

　　常用的布局方式大概有几种，盒模型(常用)、flex弹性布局、Grid网格布局、圣杯布局 等等

　　首先从最常见等盒模型说起，

　　盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：content(内容)+margin(外边距)+border(边框)+padding(内边距)

　　(一).盒模型根据 box-sizing 属性分为两种模式：

　　当 box-sizing: content-box 时为标准模式，此时一个块的总宽度 = width + margin(左右) + pading(左右) + border(左右)，也就是说在给width赋值时，不包括padding 、margin 、border。

　　　　　　　　　　　　　　　

　　当box-sizing: border-box 时为怪异模式，此时一个块的总宽度 = width + margin(左右) ，给width赋值时，包含了padding 、border

   　　　　　　　　　　　　　　

　　(二).了解了这两种模式之后，还要知道float、position，因为是基础的东西，这里不过多描述

　　(三).在布局时需要注意BFC

　　　　关于bfc需要了解

　　　　　　规则一：BFC是一块独立规则的区域，不受外部影响，而内部元素也不会影响到外部。
　　　　　　规则二：清楚浮动。触发BFC后能感知得到浮动元素的存在。
　　　　　　规则三：BFC感知得到浮动元素的高度。

　　如何触发BFC

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible（常用）

　　可能会出现的问题

　　1.外边距折叠，（处在同一bfc下）

　　2.不清除浮动时，子元素不会撑开父元素的高度为0的高度

　　3.浮动出现文字环绕，可通过创建不同bfc解决(给环绕文字节点添加 overflow:hidden 属性)

　　具体可访问 https://www.jianshu.com/p/bf927bc1bed4 BFC详解

 

　　接下来的文章了解其他布局

　　

 

 

 

　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　

转载于:https://www.cnblogs.com/sunweinan/p/8523636.html