https://github.com/hub-yang/css-dev-template

css开发模板
https://github.com/hub-yang/css-dev-template

Last synced: about 2 months ago
JSON representation

css开发模板

• Host: GitHub
• URL: https://github.com/hub-yang/css-dev-template
• Owner: Hub-yang
• Created: 2022-12-29T03:29:18.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-30T04:57:11.000Z (almost 2 years ago)
• Last Synced: 2023-10-04T18:28:14.973Z (about 1 year ago)
• Language: HTML
• Size: 2.93 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# css开发模板

### 1.实现左右固定中间自适应的布局

- **圣杯布局**

- **双飞翼布局**

  - 两种布局的异同：

    - 同：两种布局都将将盒子设置为右浮动，同时在HTML中盒子加载的顺序都是中左右，给定中间容器100%的宽度让其可以随着页面宽度的变化而变化。然后再用左边距将左右容器覆盖在中间容器上；

    - 异：当将三个容器拉到同一行时，圣杯布局是调整左右容器的位置，用相对定位的方式将左右容器移出中间容器，同时再给最外层容器一个内边距，防止覆盖中间容器。双飞翼布局是给中间容器再套一层内层容器，将内容在内层容器中显示，而不是在中间容器中。再给内层一个内边距，使内容不会被左右容器遮挡；

    - 圣杯布局和双飞翼布局实现的效果都是相同的，只是在左右容器覆盖在中间容器中时，处理的容器不同而已。圣杯布局在处理左右容器，用相对定位时要注意左右平移的方向是相反的。双飞翼布局处理中间容器时要注意内层容器的内边距；

- **使用FlexBox实现**

-