CSS布局基础

（初级）css布局

一、单列布局
1、基础知识
块级元素 div p ul li dl dt
行级元素 img span input strong同一行显示、无换行
2、盒子模型
盒子模型 （边框border、外边距margin、内边距padding、内容content）
盒子模型3维立体图：自上往下（边框、内容和内边距、背景图片、背景颜色、
外边距）
样式追求就近原则（行内样式>内部样式>外部样式）
3、自动居中
margin： 0px auto;实现自动居中（原理：外边距=（浏览器的宽度-外包含层的宽度）/2）（此时不能同时设置浮动和绝对定位）
一般情况下： 父层设置一宽度，子层设置100%就可以。（子层继承父层宽度）

4、css布局笔记

4-1 margin：auto

#main {
  width: 600px;
  margin: 0 auto;
}

设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案。

4-2 max-width

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！

二、横向两列布局
1、浮动定位
能够实现多列布局
float属性（left、right、none）：当元素没有设置宽度值，而设置了浮动属性，元素宽度随内容的变化而变化。
清除浮动的常用方法：
1-1、clear属性：clear:both;或者clear:left clear:right
1-2、同时设置width:100%(或固定宽度) + overflow:hidden;
不建议使用空标签进行消除浮动！！！
三、绝对定位布局

通过设置position属性实现（静态定位（static）、相对定位（relative）、绝对定位（absolute相对于最近的“positioned”祖先元素）、固定定位（fixed相对于视窗））

position:relative;top:10px;left 10px;会出现覆盖现象（top、left、bottom、right是偏移量）
绝对定位参照基准
1、无祖先元素（已<html>为偏移参照基准）
2、有已定位祖先元素（已距离最近的已定位的祖先元素为偏移参照基准）
当一个元素设置绝对定位，没有设置宽度时，元素宽度根据内容进行调节。
横向两列布局
使用absolute实现横向两列布局（常用于一列固定宽度，另一列宽度自适应。）
主要应用技能
relative-父元素相对定位
absolute-自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列。

（中级）如何用CSS进行网页布局
1、网页也设计特点
网页宽度自适应（调节浏览器宽度，网页宽度自动修改）
网页长度理论上没有限制。
2、自适应宽度和固定宽度两列布局
自适应：width：50%对于每个div（只要两者和位100%即可）
3、使用position定位实现三列布局
自适应：width：33.33%对于每个div（只要三者和位100%即可）
固定宽度：
.left{width:200px;height:500px;position:absolute;left:0;top:0}
.middle{height:500px;margin:0 300px 0 200px}
.right{width:300px;height:500px;position:absolute;right:0;top:0}