简单html以及css的用法详解

时间：2017-04-08

4.伪元素或是双伪元素清除法

XML/HTML Code复制内容到剪贴板
  1. .clearfix:before, .clearfix:after {   
  2.     /*清除浮动，最好最标准的写法*/   
  3.     content: "";   
  4.     display: table;   
  5. }   
  6.   
  7. .clearfix:after {   
  8.     clear: both;   
  9. }   
  10.   
  11. .clearfix {   
  12.     *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/   
  13. }   
  14.   

（一般常用伪元素的方法来清除浮动）

定位元素的层级问题：

如果只给一个元素绝对定位，而不写trbl值的话，会以原位显示

定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素，在同一个位置的话，后面的元素默认会压住前面的元素。如果同样是定位了的元素，默认他们的层级都是0，只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上，这个时候就需要改变层级的关系,用z-index来改变。

z-index的取值范围0---9999999，最好是正数，尽量不要用负数。

另外要注意，position:relative依旧会占据标准流中的位置，会导致其他内容无法在其层级上显示。
 
透明度opacity

Opacity:有兼容性问题，而且不但让背景颜色透明，而且还让里面的内容也透明

background: rgba(0,0,0,.3);

仅让背景色透明，内容不透明

相邻元素的层级问题

淘宝网页中鼠标移入后边框闪现效果

XML/HTML Code复制内容到剪贴板
  1. <style>  
  2.         * {   
  3.             margin: 0;   
  4.             padding: 0;   
  5.         }   
  6.         div {   
  7.             width: 200px;   
  8.             height: 500px;   
  9.             border: 10px solid blue;   
  10.             float: left;   
  11.             /*margin-right: 10px;*/   
  12.             margin-left: -10px;   
  13.             position: relative; /*定位了的元素，默认的都会有层级的概念，而且默认的层级都是0*/   
  14.         }   
  15.         div:hover {   
  16.             border-color: red;   
  17.             position: relative;   
  18.             z-index: 1;   
  19.         }   
  20.     </style>  
  21. </head>  
  22. <body>  
  23. <div></div>  
  24. <div></div>  
  25. <div></div>  
  26. <div></div>  
  27. <div></div>  
  28. </body>  
  29.   
  • 共4页:
  • 上一页
    • 3/4
  • 下一页
    • 上一篇：html/css基础篇——html代码编写过程中的几个警惕点(必看) 下一篇：一些有用的meta设置方法(必看)

    相关文章

    最新文章

    Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权