html/css基础篇——html代码编写过程中的几个警惕点(必看)

时间：2017-04-08

说道这里，我想有些人对内联元素理解有偏差。所谓内联是和所谓的“块”对立的。内联元素不成块的，感觉就像水流一样，遇到阻碍就环绕而行。比如源码

XML/HTML Code复制内容到剪贴板
  1. <div id="myDIV">  
  2.       <div>div1</div> ddd      dd      d       <div>div2</div>  
  3.       <span>    d      dd      d       </span>  
  4.     </div>  

显示效果

span里面的内容被分成了两段，不是一个完整的块了。

2.body标签默认的margin边框

 这个没有什么说的，现代浏览器（支持CSS3）和IE8的body都默认了一个css样式margin:8px。其他有的标签也是有这样的，这里不举例了。很多时候我们都不需要，需要一般的项目样式开头都有一个类似的设置。

XML/HTML Code复制内容到剪贴板
  1. html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{   
  2.     margin: 0;   
  3.     padding:0;   
  4.     }  

3.特殊空白字符导致显示异常

举个例子，下面的源码中看似没有问题

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta charset="utf-8">  
  5.     <style>  
  6.     html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{   
  7.     margin: 0;   
  8.     padding:0;   
  9.     }   
  10.     *{   
  11.       -webkit-box-sizing: border-box;   
  12.       -moz-box-sizing: border-box;   
  13.       box-sizing: border-box;   
  14.     }   
  15.     #myDIV {   
  16.     width: 200px;   
  17.     height: 40px;   
  18.     background-color: #ff0;   
  19.     }   
  20.     #myDIV a{   
  21.       float: left;   
  22.       width: 200px;   
  23.       background-color: #f00;   
  24.     }   
  25.     </style>  
  26.   
  27.   </head>  
  28.   <body>  
  29.     <div class="tabbable" id="tabs" style="border:none;">  
  30.       <!-- 页面标签列表 -->  
  31.       <div id="myDIV" style="">  
  32.       　<a data-toggle="tab" href="#tab-content-0" >test0</a>  
  33.       </div>  
  34.     </div>  
  35.   </body>  
  36. </html>  

实际上a标签前面的有一个非正常的的空白字符，显示效果如下

a的宽度和#myDIV的宽度应该是相同的，且a是浮动，显示效果却换行了，这也太让人抓狂了，有么有。

  • 共4页:
  • 上一页
    • 2/4
  • 下一页
    • 上一篇：HTML基本结构全面了解 下一篇：简单html以及css的用法详解

    相关文章

    最新文章

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