前端学习笔记一：弱爆了的DIV基础
不知道从什么时候开始，突然想学习前端的相关知识…但是直接上HTML5+CSS3肯定是会杯具….所以本屌只能从html4+css2开始学…..开始苦逼且快乐的前端学习心酸路..（大大们千万别告诉我又走上了另外一条不归路→_→
今天主要学习了div的基础，div当然是今天主角，但是要使div产生各种不同的布局，我们还需要一些龙套（CSS），今天的龙套主要是这些：width,height,float,
margin。
好了，下面我开始正式的学习之旅，对了还有IDE…本着对自己严格要求的原则，笔者使用的是大名鼎鼎Windows文本编辑器！没错…就是windows下默认打开*.txt的软件-。-首先新建一个html，内容如下：
html
<html> <head> <title>弱爆了的div基础</title> </head> <body> <div id="header">我是头</div> <div id="center">我是肉体</div> <div id="footer">我是美腿</div> </body> </html>
用浏览器打开试试….恩没错…除了三行操蛋的内容以外什么都没有了,这是因为div默认就是一片空白,不过之所以会三行来显示,那是因为div是块状对象(block)所以正常情况下它并不允许和其他内容占一行来显示。下面我们给div加点css效果，让至少能让div在页面上多点存在感…..
我们在head里面插入下面这段css代码：
css
<style type="text/css"> div{ background:#F69; width:100px; height:100px; border:1px solid #000; } </style>
刷新页面后，我们可以发现三个div变成了三个粉红色（粉红色真好啊，不自觉的就让人想到了小草莓味儿的内裤2333333333）的正方体，如图：
下面我们来解释一下，插入的css代码对我们的div做了什么，首先，这种插入姿势…错了，是这种引用方式，叫做内部样式表，css的引用方式一共有三种，外部样式表，内部样式表，行间样式表。他们之间的优先级是：外部样式表<内部样式表<行间样式表，可以这样理解，比方说，我在外部样式表中把div设置成黑色，然后在内部样式表中把div设置成红色，最后再行间样式表中把div设置成绿色，那么我们最后看到的效果就是一个绿色的div，如果把行间样式表去掉的话，最后看到的就是个红色的div，怎样，很好理解吧，具体的差异我们会在以后来慢慢研究。然后我们在来解释下代码：
css
div{ background:#F69;/*设置div的背景色为粉红色*/ width:100px;/*设置div的宽度为100像素*/ height:100px;/*设置div的高度为100像素*/ border:1px solid #000;/*设置div的边框为1像素的单行黑色实线*/ }
大括号前面的那个东西叫做选择器,是非常重要的内容,但是要在这里再重讲一遍的话,总觉得非常不爽,自己去百度或者google一下css选择器吧,搜出来的内容绝对比我讲的好。
好了，现在div在页面的存在感已经有了，下面我们再来调教下它，让它变成功能更强大的东西。首先，我们先看看网易，新浪等门户网站。我们发现这些网站，的显示内容的区域都是居中的，然后网页两边留出空白，而且神奇的是，当我们缩小窗口的大小后，两边空白的的区域会自动变大变小，而中间的区域宽度适中不会改变。这种布局方式叫做一列固定宽度居中，听名字都感觉很厉害啊有木有！！下面我们动手来实现以下。
首先，我们现在html代码里面把头和腿干掉，然后在css代码里面插入一些东西，具体代码如下：
html
<html> <head> <title>弱爆了的div基础</title> <style type="text/css"> div{ background:#F69; width:800px; height:1000px; border:1px solid #000; margin:0 auto; } </style> </head> <body> <div id="center">我是肉体</div> </body> </html>
然后刷新页面，出现了有木有！！！居中了有木有！！！怎么缩放窗口，中间的肉体大小都不会变了有！木！有！
效果图我就不放上来。下面我们看一下css代码，我们往css代码里面插入了：
margin:0 auto；
这里的margin属性是用于控制对象（这里指div）的上，右，下，左4个方向的边距。而当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。而除了直接使用数值外，它还支持叫做auto的属性值，auto是让浏览器自动判断边距。而这里我们将div的左右边距设置成自动，浏览器就会使div左边和右边的边距始终保持相同，所以就出现这样猎奇的效果。
现在我们经常能看到线上的网站上，会出现两列或者多列内容并排显示的布局，不过之前有说到，div是块级对象，默认会占一行，但是下面我们将介绍的另一个重量级龙套float将改变这个规则。
先看看下面的代码：
html
<html> <head> <title>弱爆了的div基础</title> <style type="text/css"> div{ background:#FF9; width:100px; height:100px; border:1px solid #000; float:left; } </style> </head> <body> <div id="center">辛苦的左手</div> <div id="center">辛苦的右手</div> </body> </html>
两个div排在一起了有木有！！！我们来解释一下float这个属性，先看看官方的解释“float用于设置对象是否浮动显示，并设置具体的浮动方式“。那么浮动是什么意思，其实从字面意思就可以理解，浮动就是使页面上的内容能够浮上去。我们知道，div默认是占满一行内容，哪怕div的宽度比浏览器整行的宽度要小，它也会把另一个再代码中相邻的div挤到下一行去。而为了解决这样的问题，于是我们有了float这样的属性，当我们给某个div设置float:left;这个时候这个div后面所有对象将会去判断这个div的后面的水平空间的宽度是否比自己的宽度大，如果比自己的宽度大的话，那么默认这个div后面的对象将会飘到这个div的后面（不信可以缩放浏览器大小试试）。float是门高深而且重要的学问，在以后的前端设计中，很多效果基本都会通过float来实现，所以在这里就不细讲了。
下面将接触一个新的东西，自适应，什么叫自适应，自适应的意思就是说根据浏览器的大小来具体缩放div的大小，听起来好像很厉害的样子，其实只需要将width和height的值用百分数代替就ok了。比如下面的代码：
html
<html> <head> <title>弱爆了的div基础</title> <style type="text/css"> div { background:#FFC; border:1px solid #000; } #left { width:20%; float:left; } #right { width:30%; float:left } </style> </head> <body> <div id="left">辛苦的左手</div> <div id="right">辛苦的右手</div> </body> </html>
效果如图：
光看的话肯定看不出来这个哪门子说明是在自适应了，不过如果你缩放一下浏览器的话……变化了！！！有木有！！！这个就两列宽度自适应，那么高度要自适应怎么做？一样的，把值变成百分数就ok了，但是记得将html的宽度和高度设置为100%！
有时候我们也有这样的需求，就是只需要一列来自适应，另一列大小不变。很简单，我们将大小不变的那一列的宽度固定，然后另一列用百分数，并且不设定浮动，代码如下：
css
div { background:#FFC; border:1px solid #000; } #left { width:100px; float:left; } #right { width:30%; }
缩放浏览器试试,我们可以发现左面的宽度始终没发生变化,右列的宽度根据浏览器大小进行动态调整。至于要将哪一列的大小固定，这个调换一下代码就ok了。
div基础内容就是这些了…下一章将往高级点的内容进阶…..有多高级？我怎么知道….
