css的一些小tips

最新推荐文章于 2024-09-16 14:49:33 发布

weixin_34302561

最新推荐文章于 2024-09-16 14:49:33 发布

阅读量62

点赞数

文章标签： python

原文链接：https://my.oschina.net/sunshinewyf/blog/480157

版权

2019独角兽企业重金招聘Python工程师标准>>>

     原本以为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的强大之处还有很多，如有错误，还望指正。