用CSS进行网页布局 学习笔记
2017-07-14 本文已影响823人
小可乐呀
网页布局基础知识
一列布局
<style type="text/css">
body{margin:0;padding:0;}
.main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto;}
.top{height:100px;background-color: blue;}
.foot{width: 800px;height:100px; background-color: #900;margin: 0 auto;}
</style>
</head>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
</body>
margin: 0 auto 使内容居中
二列布局
1.自适应宽度：给左右两列设置左右浮动，宽度单位为百分数。
2.一般给父容器固定宽度，两列子元素自适应，或者固定宽度。
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
当前所知的脱离文档流的方式有两种：浮动和定位。
三列布局
特殊案例：
左右固定像素，中间自适应。
这个时候如果只是改一下上面的宽度数值就会出现这样的情况
解决办法是对左右列使用绝对定位，对中间的块设置margin值
如果想要三列中间有空隙
margin值应该设定大一些，得到如下图的效果
混合布局
在块当中增加小的块。在一个块里面加入另一个布局
总结
网页布局一共存在四种模式：一列布局、二列布局、三列布局、混合布局
在网页的制作过程中，页面中的元素其实就是块与块之间的关系（三种关系）
紧挨、嵌套、叠加
紧挨：float
嵌套：父子关系
叠加：z-index。
