布局基础（原理）

1.前端布局方案：
传统布局方案（浮动、定位等手段）／flex 布局（IE10+）／grid 布局（IE10+）
 
2.基础
1）css标准盒模型
box = padding+margin+content-width+border
 
2）盒子模型属性：box-sizing (css3，IE8+）
作用 ： 区分IE盒模型（IE4，IE5，navigator4） 和 W3C盒模型（IE6+）
 
content-box => W3C标准: border-box = content-width + padding+border+margin
border-box => IE盒模型 ：border-box= width（border+padding+content-width）+margin
 
全局支持IE盒模型兼容性处理：
html{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
*,*:before,*:after{
-webkit-box-sizing:inherit;
-moz-box-sizing:inherit;
box-sizing:inherit;
}
 
3)元素分类及特性
　　布局特性分类：block-level ／ inline-block-level / inline-level
　　block-level:值 block/table/flex/grid/list-item
　　inline-block-level:inline-block/inline-table/inline-grid...
 
 特性：
　　block-level：
　　独占一行+尺寸属性可设置
 
　　inline-block-level：可置换行内元素 和不可置换行内元素(默认width：0)
　　　　可置换：
 　　　　　　<img>、 <object>、 <video> 、 <embed>
　　　　　　<textarea> 、<input>表单
　　　　　　<audio> 、<object>、<canvas>、<applet>
　　　　　　匿名可置换：css content设置
 
　　　　不可置换：<a>/<span>...
 
4）格式化上下文
　　BFC（block formatting context）:
　　　　根元素／float／position/inline-block／table-cell/table-caption/flow-root/grid...
　　特性：
　　　　1.独立不对外部元素影响
　　　　2.避免出现浮动高度塌陷
　　　　3:overflow：auto===》文档流BFC元素
　　　　4:（overflow：auto+width：auto）占满当前行的剩余宽度
　　IFC（inline formatting context）：
 
　　FFC（flex formatting context）
　　GFC（grid formatting context）
 
5）ICB（initial containing block, 初始包含块）：根元素<html />的包含块ICB，就是“首屏”。
　　连续媒体（viewport内） 和分页媒体（内容超过page area）
 
6）基本原理
 
　　文档流：页面元素默认存放的“容器”
 
　　脱离文档流：float／position
 
　　float：对元素display 影响 ：除flex外，其他属性变为block
　　　　　　高度塌陷问题：BFC设置／:after/clear:both
 
 
　　line box(行框)：
　　
　　　　高度： line-hegiht+height+vertical-align+font-size决定
　　　　img元素底部空白问题原理：可置行内换元素如img和inline-block-level元素，在被浏览器解析时，会和“文本”一样，默认在baseline线上显示，而不是在行框的bottom线上。
 
　　　　line-height与vertical-align：
　　　　　　line-height：<length>、<number>、<percentage>和关键字normal（默认值）
　　　　　　　　　　　　normal：取决于浏览器各自的解析机制和font-family导致==》行高>font-size　　
　　　　　　　　　　　　　　--(解决方案：line-height：1／100%，但行高为font-size时，文本内容就会溢出)
　　　　　　　　　　　　　　对其他元素高度影响：不可置换元素为多行时height＝line-height * 行数 - 2 * half-heading
 
　　margin原理
　　　　position上下居中原理：子元素outerHeight  = 包含块height  - 子元素top - 子元素bottom
　　　　文档流中的块级元素，其在水平方向上的尺寸属性，当值为auto时，表示取所在行的剩余宽度，特别地，当margin-left和margin-right的值均为auto时，会平分所在行的剩余宽度

 

posted @ 2018-03-28 16:53  loioce  阅读(52)  评论(0)    收藏  举报