前端学习笔记-CSS3

项目代码同步上传到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为最大。

前端学习笔记-CSS3

推荐阅读更多精彩内容