# CSS

**Repository Path**: why1235678/css

## Basic Information

- **Project Name**: CSS
- **Description**: CSS学习记录
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-05
- **Last Updated**: 2022-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## CSS

### 圣杯布局与双飞翼布局
双飞翼布局来源于淘宝UED，圣杯布局来源于[In Search of the Holy Grail](https://alistapart.com/article/holygrail/)
+ 两者具有共同点：
  1. 三栏布局，两侧宽度固定，中间自适应
  2. 中间部分在DOM结构上优先，以便先行渲染
  3. 都使用float: left浮动
+ 两者区别：
  1. DOM结构不一样
  2. 双飞翼：.container>.center 设置了 margin-left 和 margin-right，圣杯布局：.container 设置 padding-left和padding-right
  3. 圣杯布局需要给 body 设置最小宽度，不设置最小宽度，屏幕小于最小宽度话布局会乱，最小宽度就是：200(left-width) + 150(right-width) + 200(left-position-relative) = 550px

### 参考文献
+ [In Search of the Holy Grail](https://alistapart.com/article/holygrail/)
+ https://www.jianshu.com/p/81ef7e7094e8
+ https://juejin.cn/post/6844903817104850952#heading-2
+ https://www.cnblogs.com/jiguiyan/p/11425276.html
+ https://zhuanlan.zhihu.com/p/103774667