1. 对一个有宽高的元素设置四个方向的绝对定位，left和top的优先级要大于bottom和right的优先级
  2. 对一个没有宽高的元素设置满屏的效果，只需要使绝对定位的四个方向为0即可>设置布满全屏的遮罩层
  1. div {
  2.    width: 234px;
  3.    height: 300px;
  4.    background-image: url(./images/ti.webp);
  5.    border: 1px solid red;
  6.    position: absolute;
  7.    left: 50%;
  8.    top: 50%;
  9.    margin-left: -117px;
  10.    margin-top: -150px;
  11. }
  13. div>div {
  14.    position: absolute;
  15.    left: 0;
  16.    top: 0;
  17.    bottom: 0;
  18.    right: 0;
  19.    background-color: rgba(243, 15, 15, 0.3);
  20. }

CSS之兼容

  • 浏览器的兼容问题：
    虽然每个浏览器都是以Web标准作为开发基础，但是由于架构及开发方式的不同，最终对于 Web标准解释会有所区别，这样就导致了兼容问题的产生。
  • 最主要也是最常见的，就是浏览器对标签的默认支持不同，所以我们要统一，就要进行CSS reset . 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐，而且它也并不完善。
    淘宝官网 样式初始化
  1. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
  2. body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  3.  h1, h2, h3, h4, h5, h6{ font-size:100%; } 
  4. address, cite, dfn, em, var { font-style:normal; } 
  5. code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
  6. small{ font-size:12px; } 
  7. ul, ol { list-style:none; } 
  8. a { text-decoration:none; } 
  9. a:hover { text-decoration:underline; } 
  10. sup { vertical-align:text-top; } 
  11. sub{ vertical-align:text-bottom; } 
  12. legend { color:#000; } 
  13. fieldset, img { border:0; } 
  14. button, input, select, textarea { font-size:100%; }
  15.  table { border-collapse:collapse; border-spacing:0; }

兼容问题的解决方案

  • 避免使用会产生兼容问题的CSS属性,详见会产生兼容问题的CSS属性.txt

  1. 上下margin重合问题：上下外边距合并，会以大的那个值为准。
    解决办法就是相邻的margin-top margin-bottom二选一。

  2. margin-top: 子元素的margin-top,会出现在父元素的上方

    1. 解决办法：
    3. (1) 给父元素加 overflow:hidden;
    5. (2) 给父元素设：border:1px solid transparent
    7. (3）用父元素的padding-top来替代子元素的margin-top （最佳方案！）
  1. 行内元素与行内元素，行内块与行内块，行内块与行内元素之间 会出现缝隙
    解决办法：
    1.       （1）给行内元素或行内块元素的父元素  font-size:0    给子元素重新设置字号


（2）给行内或行内块元素添加浮动

  1. 元素设置了: display:inline-block后，由于元素默认基线对齐，在父元素中的垂直位置不对照；
    解决办法：给当前元素添加 ： vertical-align:top | middle | bottom

  2. display:inline-block: 在IE7中不兼容，会导致在其它浏览器整齐的排版变得混乱

    1. 解决办法：


凡是用display:inline-block时，同时加上 _display:inline; _zoom:1
(以*开始的选择器只有ie6,ie7会执行，其它浏览器会忽略;触发了IE的hasLayout属性;)
hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃。上文中的InternetExplorer都是指IE7、IE6及以下版本。

  1. 加链接的图片，在低版本IE中显示蓝边框：
    1. 解决办法：


img {
border:none;
}

  1. 块元素中装图片，图片下方会出现一条间隙，比如 定位元素的使用 遮罩层 - 图1
    (1)给img添加display:block;
    (2)给图片添加vertical-align:top/middle
    (3)解决办法是给它来个浮动 float

  2. opacity :不透明度，不兼容ie8及以下浏览器

    1. 解决办法： filter:alpha(opacity=50);
  1. 伪元素：:after :before
    1. 不兼容IE7

解决方案: 添加 .clearfix {*zoom:1;}

  1. input标签的placeholder属性： 不兼容IE9及以下浏览器

要想解决:使用js控制;

  1. chrome下默认会将小于12px的文本强制按照12px来解析。
    解决办法是给其添加属性：
    -webkit-text-size-adjust: none;

谷歌低版本可以识别;高版本已经废弃;要想实现,借助css3 的transform:scale(缩放比例)属性;

p {
transform: scale(0.5);
}

  1. 使用CSS Hack解决兼容问题
  1.     <style>
  2.         img {
  3.             border: none;
  4.         }
  5.         /* 加链接的图片，在低版本IE中显示蓝边框：给图片添加border：none */
  6.         .img img {
  7.             vertical-align: top;
  8.             display: inline-block
  9.         }
  10.         /* 块元素中放入一张图片下面会产生一个间隙，解决办法：
  11.         1. 给img添加verticle-align:top
  12.         2. 给img设置为块元素
  13.         3. 给img标签一个浮动，这个要给父元素清除浮动 
  14.         */
  15.         div,li{float: left}
  16.         /* 伪元素清除浮动在ie7以下不兼容伪元素：此时需要给.clearfix添加*zoom：1 */
  17.         /* .clearfix:after{
  18.             content:".";
  19.             height: 0;
  20.             display: block;
  21.             visibility: hidden;
  22.             clear: both;
  23.         }
  24.         .clearfix{
  25.             *zoom: 1;
  26.         } */
  27.         .opacity {
  28.             font-size: 50px;
  29.             font-weight: bold;
  30.             /* color:rgba(0, 0, 0, .5) */
  31.             opacity: 0.5;
  32.             filter: alpha(opacity=50);
  33.         }
  34.         /* 透明度
  35.         opacity:定义透明度 0-1
  36.         对元素以及子元素产生一个透明度兼容ie8以下浏览器需要添加代码：filter:alpha(opacity=50); */
  38.         .clearfix:after {
  39.             content: ".";
  40.             height: 0;
  41.             display: block;
  42.             visibility: hidden;
  43.             clear: both;
  44.         }
  46.         .clearfix {
  47.             *zoom: 1;
  48.         }
  50.         p {
  51.             font-size: 6px;
  52.             -webkit-text-size-adjust: none;
  53.             transform: scale(0.5);
  54.         }
  56.         span {
  57.             font-size: 12px;
  58.         }
  59.     </style>
  1. 其它兼容方法
  1. 使用meta兼容
  2.  <meta name="renderer" content="webkit">
  3.  如果页面中出现了这句话，那么在使用360浏览器的时候 ，会使用极速模式打开页面
  5.  浏览器默认内核的指定只需在head标签中添加一行代码即可： 
  6.  若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit"> 
  7.   若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp"> 
  8.   若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand"> 
  10.   content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核
  12.  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  13.  在页面用IE打开的时候  以当前IE支持的最高版本运行
  15. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  16.                 chrome=1 如果有GCF框架 ,以chrome内核渲染