css布局(盒子模型 浮动 定位)有图示
布局（盒子模型 浮动 定位）
三大学习核心：
- 盒子模型，
- 浮动，
- 定位
css盒子模型
盒子模型四个组成部分
- border边框
- content 内容
- padding 内边距（内容和边框的距离）
- margin 外边距 （盒子之间的距离）
border
border:border-width border-style border-color;
content
padding
margin
浮动
默认文档流是从左到右，从上到下的排列元素。
float
可以让上下堆叠的 块级元素 浮动成左右并列 注意 前提是块级元素
举个例子： 单独给2设置float:left ，会让2覆盖3， 且2浮动到浏览器最左位置 第二幅图中，若不想3浮动到2后面怎么办？ 方法一：给3用clear：left/right/both left :不允许左边有浮动对象 right :不允许右边有浮动对象 both :不允许有浮动对象
方法二：给1，2套上一个父元素，父元素是块级元素，3也是块级元素，那么这两者就不会重叠了
练习：做一个简易聊天框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#ske{
width: 500px;
}
#other{
clear: both;float: left;}
#me{
clear: both;float: right;}
</style>
<body>
<div id="ske">
<div id="me">
hhh
</div>
<div id="other">
hhh
</div>
</div>
</body>
</html>
position(定位)
relative：
相对于前一个对象偏移
absolute
会脱离文档流，相对于其最接近的一个具有定位设置（relative或absolute）的父对象进行绝对定位，如果不存在这样的父对象，则依据body对象。 其层叠通过z-index属性定义。
fixed
display：none或inline或block
inline或block可以变更元素的显示类型。
首先了解一下inline 和block
- inline：内联元素 内联元素又名行内元素inline element，和其对应的是块元素block element，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”， 即一个挨着一个， 都在同一行按从左至右的顺序显示，不单独占一行。 而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。 比如，我们完全可以把内联元素加上display:block这样的属性， 让它也有每次都从新行开始的属性 ，即成为块元素 。同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。
- block：块元素 块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
