html/css基礎篇——html代碼編寫過程當中的幾個警戒點

時間 2019-11-17

標籤 html css 基礎代碼編寫過程當中幾個警戒欄目 HTML 简体版

原文原文鏈接

　　本文想說的警戒點與瀏覽器兼容無關，主要是幾個本人在項目中遇到的幾個小問題的總結，問題雖小，可是卻有時很困擾人，在此記錄一下，若是後期有此類問題會持續添加到這裏。css

1.內聯標籤之間的空格html

　　正常狀況下書寫html代碼的時候都有換行、縮進等習慣，好比web

  <head>
    <meta charset="utf-8">
    <style>
    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{
    margin: 0;
    padding:0;
    }
    #myDIV {
      width: 200px;
      height: 200px;
      background-color: #ff0;
    }
    #myDIV > div{
      width: 50px;
      height: 50px;
      display: inline-block;
      background-color: #f00;
    }
    </style>

  </head>
  <body>
    <div id="myDIV">
      <div>div1</div>
      <div>div2</div>
    </div>
  </body>

　　顯示效果爲瀏覽器

　　中間有一個空白。緣由是若是兩個內聯標籤（或者設置display：inline或inline-block）之間有連續的空格符、回車符、換行符，則會這些符號會被默認處理爲一個空格符號。網站

　　好比咱們在兩個div標籤以內加入" ddd dd d ",效果以下，不管有多少個相連的空白符號，最終呈現的效果都只有一個空格符編碼

　　這個和在內聯元素中直接寫入字符相似spa

　　可是內聯元素會去掉頭部和尾部的空白字符。code

　　因此須要提示的是：orm

　　內聯元素排列時若是須要避免標籤之間的空白則須要使標籤緊密相連。htm

　　內聯元素要填寫內容時儘可能使用.innerText或.textContent(Firefox不支持innerText，可是支持該屬性)。

　　非要在html代碼中寫入空白，請使用html的空格表示方法 

　　說道這裏，我想有些人對內聯元素理解有誤差。所謂內聯是和所謂的「塊」對立的。內聯元素不成塊的，感受就像水流同樣，遇到阻礙就環繞而行。好比源碼

    <div id="myDIV">
      <div>div1</div> ddd      dd      d       <div>div2</div>
      <span>    d      dd      d       </span>
    </div>

　　顯示效果

　　span裏面的內容被分紅了兩段，不是一個完整的塊了。

2.body標籤默認的margin邊框

　　這個沒有什麼說的，現代瀏覽器（支持CSS3）和IE8的body都默認了一個css樣式margin:8px。其餘有的標籤也是有這樣的，這裏不舉例了。不少時候咱們都不須要，須要通常的項目樣式開頭都有一個相似的設置。

    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{
    margin: 0;
    padding:0;
    }

3.特殊空白字符致使顯示異常

　　舉個例子，下面的源碼中看似沒有問題

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    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{
    margin: 0;
    padding:0;
    }
    *{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    #myDIV {
    width: 200px;
    height: 40px;
    background-color: #ff0;
    }
    #myDIV a{
      float: left;
      width: 200px;
      background-color: #f00;
    }
    </style>

  </head>
  <body>
    <div class="tabbable" id="tabs" style="border:none;">
      <!-- 頁面標籤列表 -->
      <div id="myDIV" style="">
      　<a data-toggle="tab" href="#tab-content-0" >test0</a>
      </div>
    </div>
  </body>
</html>