css的一些小tips

     原本以为css的一些内容很简单,只要把效果实现就是很好地掌握了,之后之后看了《css权威指南》之后才知道,任何一门语言,只要你往深里挖,总是会觉得博大精深。看了这本书之后,总结几点我以前一知半解的知识如下:
      (1)外边距(margin),当一个块级元素有固定的宽度,但是左右外边距设置为auto时,这个元素会居中显示:
      eg:p{
         width:300px;  margin-left:auto;  margin-right:auto;
      }
      但是当一个块级元素有固定的高度,但是上下外边距设置为auto时,这个元素在垂直方向上并不会显示为居中,用户代理会默认将上下外边距设置为0.
      eg:p{
          height:300px;  margin-top:auto;  margin-bottom: auto;
      }

      (2)原先我以为行高只是和line-height,相信不少人在将一个按钮中的文字设置为居中显示时,是如下设置的:
        bottom{
          height:20px;  line-height:20px;
        }
        也就是将line-height和行高设置为相同即可,但是,之后才明白,文字上下扩张的宽度是(line-height-font-size)/2得到 的。而且对于行内元素来说,能影响行高的只有line-height,font-size和vertical-align。
      (3)相对定位和浮动定位:原先以为相对定位只是相对于离它最近的那一个父元素,绝对定位就是相对于body
      之后才知道:对于一个非根元素,如果其position的值为relative或者static,则它相对的元素就是离它最近的块级框,表单元格或者行内块
      而对于绝对定位,其相对的元素是以最近的position的值不是static的祖先元素。
      (4)相对定位在移动后原始位置不会消失,即仍然保留它的空间。而absolute在移动之后原始位置也一起消失
      (5)visibility:hidden和display:none的区别:
      visibility:hidden只是使元素不可见,但是其内容不会删除,空间依然保留
      display:none:不仅不会显示,还会从文档中删除。
      (6)z-index属性:
        在不设置z-index的值时,该元素的z-index的值为0,但是body的z-index的值不设置,但是其子元素的z-in值设置为负值时,不会显示在body的下方:
        eg:
        <body>
        <p>this is just a example<strong>I just want to
            make a relative</strong>I'm happy
         </p>
         </body>

         body {
          font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
          padding: 100px;
          font-size: 13px;
          background:purple;
        }
        p{
          position:relative;
          border:1px solid black;
          width:200px;
          height:300px;
          z-index:-200;
          background:red;
          }
 效果:


 总结:越是简单的东西越是不能忽视,凡事都可以深挖,决不能眼高手低,css的强大之处还有很多,如有错误,还望指正。

你可能感兴趣的:(css的一些小tips)