前端学习笔记3：浮动布局、盒子模型和position定位

一，浮动布局

float：left | right

浮动的属性是浮动，大家都知道用了浮动后整个页面就在一行上布局，常见的有：前端网页布局，导航和商场的应用。

clear浮动属性一般用：   clear：both | right| left

个人感悟：浮动属性是最常用的属性，比如你在布局排版的时候，在前端层次设计框架下利用浮动可以使你的网页更加美观

当然一定要注意清除使用后的浮动属性，否则会影响下面的格块等等，从而使得布局乱套。

 

二，盒子模型

盒子模型是前端里面的一种类似于“嵌套式”架构的一种CSS布局方式，它的存在让前端的布局更加具有简洁，功能齐全，省地方的好处。

margin  外边距 

margin-top   上 外边距
margin-right  下 外边距
margin-bottom  左 外边距
margin-left  右 外边距
 
border  边框

border-top  上边框
border-bottom  下边框
border-right   右边框
border-left   左边框

padding  内边距 

padding-top   上 内边距
padding-left   左 内边距
padding-right  右 内边距
padding-bottom  下 内边距

content  内容

span默认inline盒模型，div默认block盒模型

形状如下图所示

个人总结：盒子模型也是前端最最最基础的一个布局模式，每一个好的前端开发者都会拥有自己的一个前端开发习惯，最常见的就是盒子模型式开发，层次脉络都会一览无余，代码可读性也相当高，建议务必掌握！

 

三，position属性

定位属性有两种常用的模式是绝对和相对

position：absolute

绝对定位，这个的意思是以前面最近的布局为基准，不再以浏览器的开始页面为基准来进行定位，此时可以在前布局上进行布局属性的增添。绝对定位的元素的位置相对于的队队队最近已定位祖先元素，如果元素没有已定位的祖先元素，它那么的位置相对于最初的所有游戏块。

position：relative

相对定位，这个很容易理解，如果存在已经用属性布局完毕后，用相对定位可以在它（前一个对象）的基础上进行一定的调整。

position：static

目标对象仅以页面作为参考系

z-index

用于设置目标对象的漂浮层的层序，值大则漂浮在上面

	<div style="position:absolute;left:40px;top:20px;width:190px;height:100px;z-index:2;background-color:#ccc;">绝对定位</div>
	<div style="position:relative;left:50px;top:10px;width:200px;height:100px;z-index:3;background-color:#999;">相对定位</div>
	<div style="position:static;left:100px;top:40px;width:80px;height:88px;z-index:1;background-color:#512;">position:static</div>