Blog

圣杯布局和双飞翼布局(其实是一回事)都是实现的三栏布局。

浮动布局(float + margin)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<div class="container">
    <div class="left">Left</div>
     <!-- 右栏部分要写在中间内容之前 -->
    <div class="right">Right</div>
    <div class="main">Main</div>
</div>

body,html,.container{
    height: 100%;
    padding:0;
    margin: 0;
}
/*左边栏左浮动*/
.left{
    float:left;
    height:100%;
    width:200px;
    background:#333;
}
/*中间栏自适应*/
.main{
    height:100%;
    margin:0 200px;
    background: red;
}
/*右边栏右浮动*/
.right{
    float:right;
    height:100%;
    width:200px;
    background:#333;
}

• 优点：快捷 简单 兼容性较好
• 缺点: 有局限性 脱离文档流 需要清除浮动等

通常在前端中，实现动画的方案主要有6种：

• js 直接实现

• SVG（可伸缩矢量图形

• CSS3 transition

• CSS3 animation

• Canvas动画

• requestAnimationFrame

1.01^365=37.8

两个盒子，一个下边距20px，一个上边距50px，最后为两个盒子之间的距离为多少 50px 解决:根据W3C的标准，在页面中元素都一个隐含的属性叫做Block FormattingContext 简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。

我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。

虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们学习。

芮 rui 四声

浏览器前缀 -webkit/chrome、safari -moz/firefox -ms/ie -o/opera

弹性伸缩flexbox布局

任何一个容器都可设为display:flex

行内元素 display:inline-flex

webkit内核浏览器（Safari） display:-webkit-flex; display:flex

设为flex布局以后，子元素的float、clear、vertical-align属性将失效。