CSS布局知识点

双飞翼布局 (淘宝UED对圣杯布局的升级优化)

圣杯布局和双飞翼布局的实现(三栏布局),都是左右两栏固定宽度,中间部分自适应;把三栏布局比做一只大鸟,main看成鸟的身体,sub和extra则是鸟的翅膀.布局思路是先把最重要的身体部分放好,然后再将翅膀移动到适当的地方.

双飞翼布局

    
    
    
    



    

        

            
middle
        
    
    

        
left
    

    

        
right
    
    

圣杯布局,是通过最外层div给予左右padding来遗留左右空白区,然后对left 和 right 左右栏进行 position定位,实现三栏布局;
淘宝对需要position定位来实现很麻烦,就通过对middle里添加一个div,然后通过对margin的特性(不会影响本身自己的容器)设置来实现.

注意:

上面的容器的高是固定的高,限制的比较死不够灵活;我们可以通过设置假的等高(以最高的height为基准)来实现灵活的高,利用overflow: hidden;

基于移动端的PX与REM转换兼容方案

• different size different DPR
• 目前的设计稿 一般是 640 750 1125，一般要先均分成100份，(兼容vh,vm) 750/10 = 75px (1rem = 75px)。div宽是240px*120px css的书写改为3.2rem * 1.6rem。 配合响应式修改html根的大小。
• 字体不建议使用rem的，data-dpr属性动态设置字体大小。屏幕变大放更多的文字，或者屏幕更大放更多的字。资料介绍
• 神奇的padding/margin-top等比例缩放间距

TODO:具体解决方案,分析待更新~

弹性盒模型与Reset的选择

• flex模型
• * 杀伤力太大,根据具体使用什么再加什么
• Reset.css 重置 Normalize.css修复 Neat.css融合
• 移动端必须加上的

      html{box-sizing: border-box;} 
      *,*:before,X:after{box-sizing: inherit;}
  

ICON-FONT与常用字体排版

• no-image时代 不超过纯色为2的图像
• 宋体非宋体 黑体非黑体 WIndows下的宋体叫中易宋体SimSun，Mac是华文宋体STSong。WIndows下的黑体叫中易黑体SimHei，Mac是华文黑体STHeiti。
• 不要只写中文字体名，保证西文字体在中文字体前面。Mac->Linux->Windows
• 切忌不要直接使用设计师PSD的设计font-family,关键时刻再去启动font-face（typo.css 、 Entry.css 、Type.css ）
• font-family: sans-serif;系统默认，字体多个单词组成加引号。

CSS ICON

CSS ICON URL

CSS代码检测团队项目规范

• CSS Hint
• CSS Lint

CSS绘制高级技巧

• border && border-radius 造就万千可能
• after && before 任何一个HTML元素都可以创造3个可以供我们操作的视觉元素，即三个矩形。
• box-shadow是可以定义为任意颜色的，并且同一个元素可以投射出不同的box-shadow。
• 神奇borders构建的三角形。

BFC IFC GFC FFC

BFC 介绍

• Box: CSS布局的基本单位

  Box(盒子) 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box(盒子) 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

  • block-level box (块级元素) : display: 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
  • inline-level box (行内元素) : display: 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
  • Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context(简称BFC)和 Inline formatting context (简称IFC)。
  • CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

哪些元素会生成 BFC ?

只要元素满足下面任一条件即可触发 BFC 特性：

• 根元素 HTML的根元素为:
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow除了visible以外的值(hidden、auto、scroll)

通过BFC来实现自适应两栏布局: 栗子-1

通过 BFC 可以包含浮动的元素（清除内部的浮动: 栗子-2

• 计算BFC的高度时，浮动元素也参与计算

**通过BFC防止垂直 margin 重叠: **

    
Haha
    
Hehe

总结

• 其实以上的几个例子都体现了，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
• FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）
• GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。