项目代码同步上传到https://github.com/panhoucheng/Front-End-Study
css盒子模型：
-
CSS 框模型规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
<head> <meta charset="UTF-8"> <title>box</title> <style> .centerBox{ width:200px; height:200px; background-color: aquamarine; padding: 20px; border:solid 3px blue; margin: 10px; } </style> </head> <body> <div class="centerBox"> </div> </body>
上面的代码在Chrome中表现为：
box
最中间的蓝色区域class为centerBox，长宽均为200px，padding：20px的效果区域为绿色区域，紫色框线为boder区域，最外面的橙色区域为margin。
box style
CSS定位:
- 定位(position)有四个值：
1.static(默认，一般我们认为如果不指定position那么就是static定位)
2.relative
3.absolute
4.fixed
- static布局就不介绍了，默认布局，占据流空间。
- relative为相对定位，可以使用top,left,right,buttom属性来改变他们的位置，相对于他的标准位置的基础上改变，原来的位置依然占据空间。
- absolute为绝对定位，绝对坐标为父级元素中position不为static的元素来进行定位，如果所有的父级元素都是static的话，绝对坐标就是body顶点，定位之后不占据原有空间。
- fixed也是绝对定位。但是fixed是相对于浏览器的窗口定位，不管浏览器怎么滑动，使用fixed定位的元素位置都不会改变，最常见的情况就是网站的广告。
Z-index：
- z-index在poistion为static的时候不生效
- z-index父级元素如果已经设置定位了，那么子级元素不能比他小。
- 如果需要把一个元素放在最上面，请设置他的z-index为最大。
网友评论