传智播客详解Css3盒子模型与浮动
我们在进行html页面的布局时，经常会遇到布局div，而盒子模型则是重中之重，下面，传智播客将针对盒子模型与浮动进行详细解读。
一、 盒子模型
1. 传智播客详解盒子模型的结构
margin border padding content
2. 传智播客详解页面布局的思想
网页的布局通常分为纵向和横向
如果是纵向 正常的div 的width height border padding margin
如果是横向的 就的使用的浮动 float ：left；right
运用盒模型进行网页布局
第一步在布局之前 必须把 清除 原有的 自带的格式清除掉
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{margin:0;padding:0;}
*{margin:0;padding:0; }
第二步
设置body
body{font:12px 字体; }
第三步:布局
第一步 ：把div把html结果写出来
第二步写css样式
注意：
margin-left:auto;
margin-right:auto;
设置的容器在窗口 水平居中
不能使用text-align:center; 容器里面的文本
效果
二、 Css浮动
1. 传智播客详解CSS浮动
横向的排列
语法:float:left//right;
设置浮动的容器 ，在上层
设置浮动的元素，不占位置；
在排的元素，都设置浮动
html的结构
要设置浮动都设置 ，横向的容器
2. 传智播客详解CSS浮动带来的负面影响 ；兼容
html的结构
如果父盒子没有设置固定的高度，里面的容器 如果设置了浮动，（浮动不占位置）
l 父元素 overflow:hidden; 就可以 兼容问题
l 给浮动的容器 下方加一个div 给该div设置clear:both;
l
效果
3. 传智播客详解清除浮动
clear:left//right///both;
浮动下方的内容进行清除
4. 传智播客详解overflow溢出
overflow
hidden:scroll;
例如
没有加下面的代码效果
效果 溢出的部分隐藏了
5. 传智播客详解display
块元素：输入完标签之后，在浏览器下自己占一行
排版标签
可以设置宽度和高度可以设置
行内元素:输入完标签之后，在浏览器下不自己占一行
不能设置宽度和高度，宽度和高度是由内容来决定
根据需要可以相互转化
n 行内元素 -------块元素display:block;
n 块元素-----行内元素 display:inline;
