双飞翼布局 (淘宝UED对圣杯布局的升级优化)
圣杯布局和双飞翼布局的实现(三栏布局),都是左右两栏固定宽度,中间部分自适应;把三栏布局比做一只大鸟,main看成鸟的身体,sub和extra则是鸟的翅膀.布局思路是先把最重要的身体部分放好,然后再将翅膀移动到适当的地方.
双飞翼布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.left,
.middle,
.right {
float: left;
min-height: 130px;
}
.left {
margin-left: -100%;
width: 200px;
background: red;
}
.right {
margin-left: -220px;
width: 220px;
background: blue;
}
.middle {
width: 100%;
}
.middle-inner {
margin-left: 200px;
margin-right: 220px;
min-height: 130px;
background: green;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-inner">
<h4>middle</h4>
</div>
</div>
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</div>
</body>
</html>
圣杯布局,是通过最外层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代码检测团队项目规范
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的根元素为:<html> -
float属性不为none -
position为absolute或fixed -
display为inline-block,table-cell,table-caption,flex,inline-flex -
overflow除了visible以外的值(hidden、auto、scroll)
通过BFC来实现自适应两栏布局: 栗子-1
<!-- BFC 可以阻止元素被浮动元素覆盖,通过给 main 生成一个BFC区域来实现 -->
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
// BFC
overflow: hidden;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div></body>
通过 BFC 可以包含浮动的元素（清除内部的浮动: 栗子-2
- 计算
BFC的高度时，浮动元素也参与计算
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div> </div></body>
**通过BFC防止垂直 margin 重叠: **
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p></body>
总结
- 其实以上的几个例子都体现了，
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）定义位置和空间。
