如果是初学css的话，比较蛋疼的就属css的定位机制了。
记得我刚学css的时候，从网上搜过很多资料看过还是觉得不好理解，但是慢慢的自己做几个页面之后也萌生除了一点自己对css的想法，也许我技术有限理解的很狭隘，但是暂且先记录下来，如果有大神看到了不对的地方请指正，我会立刻改过来。
一：css的合模型
块级元素才会有的属性
先上个合模型的图：
百度上找的，千篇一律。
margin是外边距，border是边框，padding是内边距，content就是正儿八经的内容了，这个如果不明白的话可以去搜搜别的入门教程。
二:开始进入重点，块级元素和行内元素的区别
我一开始看css的时候没大注意到这一块，但是在我看来这个算是css的重点难点之一了。
为什么这样说呢？因为它牵扯到整个页面大到整体的定位，小到细小的各种元素的定位，比如说按钮排列啊，文本框和其他元素之间的排列什么的。
众所周知，譬如div这样的块级元素他们是一占就占一整行的，不论你设置了他们的宽度是多少，不论他们的高度是多少，记住这一点！！块级元素一占就是一整行！！
先来举一个块级元素的例子拿div来说：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <div style="margin:20px; padding:40px; border:#000 2px dashed; background-color:#F63; width:200px;"></div> 10 <div style="margin:20px; padding:40px; border:#000 2px dashed; background-color:#0F0;"></div> 11 </body> 12 </html>
效果如图所示：
颜色都在css样式中写出来了，#F63的是橙色的，#0F0的是那个亮瞎了我们眼睛的绿色，第一个div的宽度我设置成为200px；显然以他的宽度不会占一整行，但是，因为他是一个块级元素，所以即使那些多余的空他用不到也不会有任何标签跟他争夺属于他的那一块。但是有人就想了，我能不能让他既保持着块级元素的状态，又让那个绿色的div到橙色的div右边呢？答案是肯定的。 不过我们这里又要引入一个新的属性，他的名字就叫做浮动（float）。
所谓设置了浮动属性的标签，就是不遵从原来的标签排列顺序从而浮动在页面最左边或者右边的元素。如果把橘红色的div的float属性设置为left或者right就会出现如下图一般的现象。
今天时间有限，明天再更新。
浙公网安备 33010602011771号