文档章节

<编写高质量代码--web前端开发修炼之道>之css总结

sunshinewyf
 sunshinewyf
发布于 2015/09/19 20:17
字数 2076
阅读 132
收藏 9


(一)标准模式和怪异模式的一些不同
 (1)IE对盒模型的解析
    在标准模式下,页面的宽度为:width+border+padding
    在怪异模式下,width就包括了padding 和border
 (2)在怪异模式下,如下的样式不能正常表现
    width:200px;margin-left:auto;margin-right:auto;
在一些高级浏览器中,如果没有声明DTD类型,页面将会以标准模式进行解析,而在IE(IE6,IE7,IE8)中则会触发怪异模式

(二)关于*{margin:0;padding:0}
   在不同浏览器中,一些默认样式也会有所不同,例如:ul默认带有缩进的样式,在IE中,其缩进是按照margin实现的,但是在firefox中,其缩进是按照padding实现的
   为了去掉浏览器的默认样式,一些人会设置*{margin:0;padding:0},但是这并不是最好的写法,一般推荐如下写法:
   body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
   
(三)解决一些hack
        (1)设置浮动时出现的bug:一旦为某个元素设置了浮动,然后有设置了margin属性,如下:
           .fl{float;left;  margin-left:20px};
        这种在IE6中,margin值会加倍.解决办法:为设置的元素标签添加一个样式:display;inline;即可解决
        
        (2)为了让浮动元素的父容器能够根据浮动元素的高度而自适应高度,有如下三种实现方法(其中fl类具有左浮动的样式,cb类具有clear:both的样式):
           -- 让父元素同时浮动起来,例如:<div class="fl"><div class="fl"></div></div>
           -- 让浮动元素后面紧跟一个用于浮动的空标签,例如:<div><div class="fl"></div><div class="cb"></div></div>
           -- 给父容器挂上一个特殊的class,直接从父容器清除浮动元素的浮动,例如:<div class="clearfix"><div class="fl"></div></div>
           其中.clearfix{height:1%;}
        (3)IE的一些hack解决
           --IE条件注释法:
            <!-- [if IE 6]
            <link type="text/css" href="ie6.css" rel="stylesheet"/>
            -->
            <!-- [if IE 7]
            <link type="text/css" href="ie6.css" rel="stylesheet"/>
            -->
            <!-- [if IE 8]
            <link type="text/css" href="ie6.css" rel="stylesheet"/>
            -->
            -- 选择符前缀法
                .test{width:80px}
                *html.test{width:60px}  /只在IE6下有效
                *+html .test{width:40px}  /只在IE7下有效
            -- 样式属性前缀法
            .test{width:80px;*width:70px;_width:70px;}
        (4)触发IE的hasLayout属性,
               hasLayout是IE的一个特有的属性,用于css的解析引擎,要触发IE的hasLayout属性,需要使用如下的方法:
               -- height:1%;这是早期的一种写法,现在并不适用.
               -- zoom:1;
               -- position:
        (5)display:inline-block属性,这个样式在一下现代浏览器中都可以支持,但是在IE6和IE7中却不支持,但是即使不支持,这样设置会触发IE的hasLayout属性,使之显示块状效果
        除此之外,display:inline-block只是对行内元素起作用,对块级元素不起作用,
        
     
        
            

(四)一些细节问题
     (1)margin的不合理性:在混用了margin-top 和margin-bottom的情况下,两者的高度会产生重合,而相邻的两个元素定义margin-left和marfgin-right则不会发生重合.所以最好不要混用margin-top和margin-bottom
     (2)权重原则
        如下面的代码:
        span{color:purple;font-size:10px;}
        .test{color:red};
        <span class="test">this is a test</span>这种情况应该听谁的呢
        这个时候页面解析css样式的时候,都是会采取权重原则,谁的权重要大一些,则按照谁的样式来进行解析
        权重的规则如下:
        html的权重是1,class的权重为10,id的权重为100
        eg:div em的权重为1+1=2,strong.demo的权重为1+10=11;如果两者的权重相同的情况,则哪个类后定义听谁的
        eg:
        <span class="test1 test2">this is a demo</span>
        style定义如下:
        .test1{color:red};
        .test2{color:green};
        这个时候应该听test2定义的样式
    (3)解决超链接访问后hover不出现的问题
         a:hover{color:yellow;}
         a:visited{color:purple;}
         <a href="#">this is demo</a>
         结果超链接在点击之后,即使鼠标再悬浮在a上面,也不会出现变成yellow的情况,这就是存在的一个bug,解决办法:
         a:visited{color:purple;}
         a:hover{color:yellow;}
         调换两者顺序即可,关于a标签的四钟状态的排序问题,有如下的顺序:link visited hover active
         
   (4)对于relative,absolute和float,relative还有absolute会让元素浮起来,也就是改变z-index的值,但是relative只会让元素保留在z-index:0的区域,而页面上默认的
        元素的z-index也是为0,这也就是relative不脱离文档流的原因,而absolute则会让元素的z-index大于0,从而使元素脱离文档流.对应的,float也能改变文档流,但是它仍然让
        元素在z-index:0层保留
        
        position:absolute和float会隐式地改变display类型,只要设置了position:absolute和float:left或者float:right中的任何一个,元素都会按照display:inline-block
        的方式显示,即使显示地设置display:block或者display:inline,也没有用
   (5)z-index属性的相关问题
     z-index其实是z轴的一种体,z轴在元素设置position:absolute或者relative后被激活,其大小由z-index设置,但是在下面的例子中会反常:
         <div id="one"></div>
       <div id="two"></div>
       <div id="three"></div>
      <script type="text/javascript">
            #one{width:300px;height: 300px;background: black;}
            #two{width:100px;height: 100px;background: red;position: absolute;z-index: -1;left: 100px;top:250px;}
            #three{width:100px;height: 100px;background: green;position: relative;z-index: 2;left: 120px;top:-100px;}
            var one = document.getElementById('one');
            var two = document.getElementById('two');
            var three = document.getElementById('three');
            one.onclick = function(){
                   alert('one');
            }
            two.onclick = function(){
                   alert('two');
            }
            three.onclick = function(){
                   alert('three');
            }
      </script>
      在点击红色区域的时候不会弹出提示信息,原因是其z-index为0的body之下,被透明的body挡住了.
      有些情况下虽然并没有显示设置z-index属性,但是也会显示z-index的属性,比如设定负边距,margin:-50px;仍然会让元素发生重叠的情况
    (6)水平居中问题
        --- 文本等行内元素水平居中:text-align:center;
        --- 块级元素水平居中:margin:0 auto
        --- 不确定宽度的块级元素水平居中
          方法一:
                   <div class="wrap">
               <table>
                   <tbody><tr><td>
               <ul class="test">
                   <li><a href="">1</a></li>
               </ul>
                   </td></tr></tbody>
               </table>
               <table>
                   <tbody><tr><td>
               <ul class="test">
                   <li><a href="">1</a></li>
                   <li><a href="">2</a></li>
                   <li><a href="">3</a></li>
               </ul>
                   </td></tr></tbody>
               </table>
               <table>
                   <tbody><tr><td>
               <ul class="test">
                   <li><a href="">1</a></li>
                   <li><a href="">2</a></li>
                   <li><a href="">3</a></li>
                   <li><a href="">4</a></li>
               </ul>
                   </td></tr></tbody>
               </table>
         </div>
      由于table不是块级元素,如果不设定宽度的话,它的宽度由内部元素的宽度"撑起",将ul放在table,通过设定父级元素居中从而使ul居中,
      
      方法二:
          <style type="text/css">
                    ul{list-style: none;margin:0;padding: 0;}
                    .wrap{background: #000;width:500px;height: 100px;}
                    .test{text-align: center;padding:5px;}
                    .test li {display: inline;}
                    .test a{padding:2px 6px;background: #316AC5;color:#fff;border: 1px solid #316AC5;text-decoration: none}
                    .test a:hover{background: #fff;color:#316AC5;}
     </style>
</head>
<body>
         <div class="wrap">
          <ul class="test">
              <li><a href="">1</a></li>
          <ul class="test">
              <li><a href="">1</a></li>
              <li><a href="">2</a></li>
              <li><a href="">3</a></li>
          </ul>
          <ul class="test">
              <li><a href="">1</a></li>
              <li><a href="">2</a></li>
              <li><a href="">3</a></li>
              <li><a href="">4</a></li>
          </ul>
         </div>
    通过将li这个块级元素改为行内元素让后设置text-align:center来进行居中
    
  (7)垂直居中问题:
       --- 父元素高度不确定的文本,图片,还有块级元素的竖直居中
             <style type="text/css">
               .wrap{background: #000;width:500px;color:#fff;margin-bottom: 10px;padding-top: 20px;padding-bottom: 20px;}
               .test{width:200px;height: 50px;background: red;}
            </style>
           </head>
           <body>
                <div class="wrap">hello world</div>
                <div class="wrap"><img src="book.jpg"/></div>
                <div class="wrap"><div class="test"></div></div>
           </body>
           
           通过设定父容器的上下边距相同来实现的,
    ---父元素高度确定下的单行文本的垂直居中
      height:20px;line-height:20px;
    
    --- 父元素高度确定的多行文本,图片,块级元素的垂直居中
           使用vertical-align:center;但是这个属性只有在父元素为td或者th的时候才会生效,所以可以使用table
               <style type="text/css">
               .wrap{background: #000;width:500px;color:#fff;height: 100px;}
               .test{width:200px;height: 50px;background: red;}
            </style>
       </head>
       <body>
               <table><tbody><tr><td class="wrap">
                   hello world </br>
                   hello world</br>
                   hello world
               </td></tr></tbody></table>
               <table>
                   <tbody><tr><td class="wrap">
                       <img src="book.jpg"/>
                   </td></tr></tbody>
               </table>
       </body>
       
                  
                          
        
          

© 著作权归作者所有

sunshinewyf
粉丝 17
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
如果有人让你推荐编程技术书,请叫他看这个列表

这个列表包括了 100 多本经典技术书籍,涵盖:计算机系统与网络、系统架构、算法与数据结构、前端开发、后端开发、移动开发、数据库、测试、项目与团队、程序员职业修炼、求职面试 和 编程相...

jason_wu_2
2016/12/23
71
0
经典编程书籍大全

经典编程书籍大全 100+ 经典技术书籍,涵盖:计算机系统与网络、系统架构、算法与数据结构、前端开发、后端开发、移动开发、数据库、测试、项目与团队、程序员职业修炼、求职面试 和 编程相关...

Oscarfff
2016/10/30
89
0
程序员经典书籍清单

从网上看到的,还不错。 来源: https://github.com/jobbole/awesome-programming-books 计算机系统与网络 《图灵的秘密:他的生平、思想及论文解读》 《计算机系统概论》 《深入理解Linux内核...

wangtaotao
2016/12/27
0
0
计算机书籍目录

计算机系统与网络 《图灵的秘密》 《计算机系统概论》 《深入理解Linux内核》 《深入Linux内核架构》 《TCP/IP详解 卷1:协议》 《Linux系统编程(第2版)》 《Linux内核设计与实现(第3版)...

Reborn-D
2016/11/01
66
0
转让一些经典书籍~

那些年,我们追过的.NET书籍 工作三年买了很多书,最近准备搬家才发现真是累赘,所以想把看完的书低价出售给需要的同学们. 书籍基本都是九成新,大部分都是原版经典书籍以及一些经典的国内书籍,...

Evo
2013/09/09
1K
30

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Sleuth 整合 feign 源码分析

org.springframework.cloud.sleuth.instrument.web.client.feign.TraceFeignClient 包括创建span一些参数

xiaomin0322
19分钟前
2
0
Less 延伸

extend 是一个 Less 伪类,它通过使用 :extend 选择器在一个选择器中扩展其他选择器样式。 扩展语法 扩展可以是附加到选择器,也可以是集中放置在规则,看上去像是带有选择器参数的可选伪类,...

凌兮洛
19分钟前
2
0
RedHat 7.0系统中安装mysql 5.7.22

在安装之前,首先要查看的是,你的系统中有没有已经安装过的情况。键入rpm -qa|grep mysql,如果无任何显示,则表示没有安装过相关组件,如果有,则根据显示出来的名字,键入rpm -e --nodeps...

最菜最菜之小菜鸟
25分钟前
2
0
RPA:企业信息孤岛的“克星”

为了降本增效,近来世界范围内掀起一股流程优化的热潮,转型升级成为众多企业时刻挂在嘴边的热词。不过在企业数字化转型的过程中,信息孤岛的出现,往往成为了企业升级的绊脚石。 信息孤岛:...

UiBot
25分钟前
2
0
我的测试

我的测试

daiison
25分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部