概述

image.png

image.png

image.png
image.png

概要

image.png

CSS基础布局

image.png
image.png

  • 源码 ``` <!DOCTYPE html>

    我是header
    中间
    左
    右
    版权信息 
  2. - 在浏览器中展现的效果，上面将 .content 的高度设置为了 300px 才会出现下面这样的情况，请接着看下面的 【圣杯布局】 演示
  4. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-8ac01e55893daf5f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  8. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-b0186b9c28d379dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  9. ####圣杯布局<br />
  10. ![image.png](http://upload-images.jianshu.io/upload_images/9064013-31f1440857423b77.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  13. - 这里还是照着上面的基础布局的基础上进行代码的修改
  14. - 源码

<!DOCTYPE html>

我是header
中间
左
右
版权信息 
  2. - 整个的步骤
  3. - `.middle{float:left;width:100%;}`
  4. - `.left{width:100px;margin-left:-100%;}`
  5. - `.right{float:left;width:150px;margin-left:-150px;}`
  6. - 再给容器 `.content` 加了 `padding-left:100px;padding-right:150px;`
  7. - `.left{position:relative;left:-100px;}`
  8. - `.right{position:relative;left:150px;}`
  11. - 在浏览器中的效果图
  13. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-c579f3fc66d9f48a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  16. ####双飞翼布局
  18. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-a942a95d2d19d841.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  21. - 这里是照着上面的圣杯布局的基础上进行代码的修改
  22. - 源码

<!DOCTYPE html>

我是header
中间
左
右
版权信息 
  2. - 在浏览器中的效果图
  4. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-db68207c88be7619.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  7. - 整个的步骤
  8. - 将 `.left` 和 `.right` 中的 `position` 属性全都去掉，将 `.content` 的 `padding` 也都去掉
  9. - 之后再在 `.middle` 元素中增加一个 `div.inner` 元素
  10. - 给这个元素设置样式 .middle .inner{margin-left:100px;magin-right:150px;}
  14. ####扩展
  16. - 还是参照着上面最后完成的【双飞翼】布局的源码，如果说 `.left .right .inner` 这三个元素不设置固定的高度，就会出现下面的问题，这里我给 `.inner` 设置了一个背景颜色 `blueviolet`
  18. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-ee4ac28070e85416.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  21. - 接下来我们要实现的就是如何使三列布局可以等高
  22. - 源码

<!DOCTYPE html>

我是header
中间
左
右
版权信息

```

  • 在浏览器中的效果图，这样就完美的实现了等高的需求了

image.png

  • 整个的步骤

  • 给 .left .right .inner 都加上两个样式 padding-bottom:9999px;margin-bottom:-9999px;

  • 再给 .content 加上 overflow:hidden;
  • 上面的 padding 是增加了元素的高度，margin 是变相的将增加的高度给减去了，尽管在视觉上市一样的效果，这个 margin 是必须要加上的，这样值相互抵消使得元素也就是这个盒子模型中的内容还是在原来的位置上