HTML-圣杯布局
2015-12-15 14:09
501 查看
1.BFC:Block Formating Context(块级格式化上下文)
它是一个独立的渲染区域
BFC的作用:
1)用来清除浮动的问题
2)Margin合并的问题
3)多栏布局
2.圣杯布局和双飞翼布局实现的是同一种效果,但是实现方式有一点不同。
都实现的效果是:两侧盒子的宽度始终保持不变,中间的盒子自适应(三栏式的布局)
左右盒子相对定位
首先写中间的main盒子,给定宽度100%,然后写左右两边的,然后通过margin(左右两边的盒子)和padding(父盒子)来调整左右盒子掉下来的问题
3.Webstorm 的下载链接:http://www.jetbrains.com/webstorm/download/#tabs_1=linux-version
学习链接:
http://pan.baidu.com/play/video#video/path=%2F%E7%BD%91%E7%AB%99%E5%89%8D%E7%AB%AF%2F%E6%B7%98%E5%AE%9D%E7%BB%8F%E5%85%B8Div%2BCSS%E5%B8%83%E5%B1%80%E5%AE%9E%E6%88%98video%2F03%20%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80.avi&t=-1
它是一个独立的渲染区域
BFC的作用:
1)用来清除浮动的问题
2)Margin合并的问题
3)多栏布局
2.圣杯布局和双飞翼布局实现的是同一种效果,但是实现方式有一点不同。
都实现的效果是:两侧盒子的宽度始终保持不变,中间的盒子自适应(三栏式的布局)
左右盒子相对定位
首先写中间的main盒子,给定宽度100%,然后写左右两边的,然后通过margin(左右两边的盒子)和padding(父盒子)来调整左右盒子掉下来的问题
3.Webstorm 的下载链接:http://www.jetbrains.com/webstorm/download/#tabs_1=linux-version
学习链接:
http://pan.baidu.com/play/video#video/path=%2F%E7%BD%91%E7%AB%99%E5%89%8D%E7%AB%AF%2F%E6%B7%98%E5%AE%9D%E7%BB%8F%E5%85%B8Div%2BCSS%E5%B8%83%E5%B1%80%E5%AE%9E%E6%88%98video%2F03%20%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80.avi&t=-1
相关文章推荐
- CSS浮动和定位学习笔记
- C#实现txt定位指定行完整实例
- Flex中怎么给表格中的滚动条定位避免刷新回到原处
- 一个JavaScript操作元素定位元素的实例
- js中的如何定位固定层的位置
- JS弹出层单纯的绝对定位居中示例代码
- 讲解iOS开发中基本的定位功能实现
- JavaScript网页定位详解
- 微信企业号开发之微信考勤百度地图定位
- 在Android里完美实现基站和WIFI定位
- android 定位的4种方式介绍
- 基于Android实现百度地图定位过程详解
- Android判断服务是否运行及定位问题实例分析
- 高德地图(定位、描点)
- IOS 8 基本定位实现
- [IOS地图开发系类]1、CLLocationManager 位置定位
- 基于Visual Graph快速开发井下人员定位系统
- 关于调用百度和高德APP
- ***免杀方法
- Excel打印不了图片