html、css基礎考察

• doctype是什麼，它是幹啥用的 
• • DOCTYPE標籤是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，它應該使用什麼樣的文檔類型定義（DTD）來解析文檔
    
    

     
• ul、ol、dl都適合用在什麼地方
• • ul 無序列表 與li一塊兒用，強調同級，內容不大強調前後
  • ol 有序列表 與li一塊兒用，強調同級，內容分點有前後
  • dl 定義列表 與dt、dd一塊兒使用。做爲外層包裹。
• 可以娓娓道來你是怎麼理解HTML語義化的
• • 根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
  • 爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看；
  • 用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；
  • 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
  • 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
  • 便於團隊開發和維護，語義化更具可讀性，是下一步網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。
• CSS選擇器都有哪些
• • css1/2-----通配符＊，標籤選擇器 ，class，id，僞類（:link, :visited, :active, :hover, :focus, :first-XX , :before, :after, :lang(language)），組合（逗號，空格，>,+）,[attribute],[attribute=value],[attribute~=value](選擇屬性attribute中包含value的全部元素),［attribute|=value](選擇屬性attribute 中以value開頭的全部元素)
  • css3——
  • • ele1~ele2   p~ul 選擇前面有 <p> 元素的每一個 <ul> 元素。 
    • [attribute$*^=value] a[src^="https"] 選擇其 src 屬性值以 "https" 結尾／包含／開頭的每一個 <a> 元素。
    • :nth-last-child(n)   p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。(最後一個開始計數)
    • :only/first/last-of-type 選擇屬於其父元素 惟一／首個／最後的 <p> 元素的每一個 <p> 元素
    • :only-child p:only-child  選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
    • :root  選擇文檔的根元素。
    • :empty  p:empty  選擇沒有子元素的每一個 <p> 元素（包括文本節點）
    • :target   #news:target   選擇當前活動的 #news 元素
    • :enabled  input:enabled 選擇每一個啓用的 <input> 元素。
    • :disabled  input:disabled 選擇每一個禁用的 <input> 元素
    • :checked   input:checked 選擇每一個被選中的 <input> 元素。
    • :not(selector)  :not(p)  選擇非 <p> 元素的每一個元素。
    • ::selection  選擇被用戶選取的元素部分。
• position都有什麼值，區別是什麼
• • absolute  相對於除static的祖先元素定位
  • relative  對象不可層疊、不脫離文檔流，參考自身靜態位置經過 top,bottom,left,right 定位，而且能夠經過     z-index 進行層次分級。在相對定位中，經過移動使表現區脫離了原來的文本流，可是在文本流中還還有此相對定位的佔用。
  • fixed 相對於窗口定位，脫離文檔流。
  • static 默認
  • inherit  繼承自父元素
• 經典的清除浮動代碼中每一行語句都是幹什麼用的，爲何少了它不行
• • 清除浮動 仍是 閉合浮動。
  • • 不少人都已經習慣稱之爲清除浮動，之前我也一直這麼叫着，可是確切地來講是不許確的。 
    • 1）清除浮動：清除對應的單詞是 clear，對應CSS中的屬性是 clear：left | right | both | none；
    • 2）閉合浮動：更確切的含義是使浮動元素閉合，從而減小浮動帶來的影響。 
    • 其實咱們想要達到的效果更確切地說是閉合浮動，而不是單純的清除浮動，在footer上設置clear：both清除浮動並不能解決warp高度塌陷的問題。
  • 爲何要清除浮動？
  • • 1）普通流：不少人或者文章稱之爲文檔流或者普通文檔流，其實標準里根本就沒有這個詞。若是把文檔流直譯爲英文就是 document flow ，但標準裏只有另外一個詞，叫作 普通流 （normal flow)，或者稱之爲常規流。但彷佛你們更習慣文檔流的稱呼，由於不少中文翻譯的書就是這麼來的。好比《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow（普通流） 這一詞，歷來沒出現過document flow （文檔流）
    • 2）浮動：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到 塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會 自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。
    • 正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其餘普通流元素了，也就表現出高度爲0（高度塌陷）。在實際佈局中，每每這並非咱們所但願的，因此須要閉合浮動元素，使其包含框表現出正常的高度。 
  • 清除浮動的原理——瞭解 hasLayout 和 Block formatting contexts 
  • • has layout是IE特有的一個屬性。不少ie下的css bug都與其相關。在ie中，一個元素要麼本身對自身的內容進行計算大小和組織，要麼依賴於父級元素。當一個元素的haslayout屬性爲ture時，它負責對本身和可能的子孫元素進行尺寸計算和定位。
    • 默認爲true的標籤  table  td  body  omg  hr  input select  textarea button  iframe  embed  object applet  marquee
    • • 觸發hasLayout屬性：display：inline－block   width/height : 除了auto   position: absolute  float: left/right  
      • • （IE專有－－－－zoom: 有值    writing-mode:tb-rl   )
        •    ie7   min/max-height/width  overflow: 除了visible  position：fixed
    • 塊格式化上下文block formatting context 是頁面 CSS 視覺渲染的一部分。它是用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。塊格式化上下文包括了建立該上下文的元素的全部子元素，但不包括建立了新的塊格式化上下文的子元素。塊格式化上下文對定位 與清除浮動 很重要。定位和清除浮動的樣式規則只適用於同一塊格式化上下文中的元素。浮動不會影響其它塊格式化上下文中元素的佈局，清除浮動只清除同一塊格式化上下文中，在它前面的元素的浮動。
    • • 根元素或其它包含它的元素
      • 浮動 (元素的 float 不爲 none)
      • 絕對定位元素 (元素的 position 爲 absolute 或 fixed)
      • 行內塊 inline-blocks (元素的 display: inline-block)
      • 表格單元格 (元素的 display: table-cell，HTML表格單元格默認屬性)
      • 表格標題 (元素的 display: table-caption, HTML表格標題默認屬性)
      •  overflow 的值不爲 visible的元素
      • 彈性盒 flex boxes (元素的 display: flex 或 inline-flex)
  • 因此每一行語句
  • • .clearfix:after { <----在類名爲「clearfix」的元素內最後面加入內容；
    • content: "."; <----內容爲「.」就是一個英文的句號而已。也能夠不寫。
    • display: block; <----加入的這個元素轉換爲塊級元素。
    • clear: both; <----清除左右兩邊浮動。
    • visibility: hidden; <----注意它和display:none;是有區別的。visibility:hidden;仍然佔據空間，只是看不到而已；
    • line-height: 0; <----行高爲0；
    • height: 0; <----高度爲0；
    • font-size:0; <----字體大小爲0；
    • }
    • .clearfix { *zoom:1;} <----這是針對於IE6的，由於IE6不支持:after僞類，zoom:1觸發IE6的hasLayout屬性。height:1%效果也是同樣。
• 讓一個HTML節點居中的各類實現方式
• • 太多，直接連接http://www.cnblogs.com/jingwhale/p/4753686.html
• 神馬聖盃佈局、雙飛翼佈局都是些什麼東西 
• • 聖盃：經過簡單的浮動和相對定位實現左右固定寬 中間自適應 大概的思想是讓中間width100%，再調整左右的位置。
  • 雙飛翼：爲佈局考慮，中間層多包裹一個div，不用相對定位。浮動＋負邊距＋margin-left+margin-right
• 強大的負外邊距都能幹嗎
• • 當margin-top、margin-left爲負值的時候，會把元素上移、左移，同時文檔流中的位置也發生相應變化,這點與position:relative的元素設置top、left後元素還佔據原來位置不一樣
  • 當margin-bottom、margin-right設爲負值的時候，元素自己沒有位置變化，後面的元素會下移、右移
  • 應用
  • • 塊級元素垂直居中
    • 浮動元素使用負邊距，使得浮動元素能強制排列在一行，聖盃和雙飛翼等多列布局有用到此原理
    • 內層的div設置了水平的負邊距能夠變大，前提是元素的寬度不能設置爲auto之外的值
    • 浮動後左右邊距須要爲0，通常是單獨設置，其實也能夠考慮用負邊距。
• 不當心提起文檔流的時候還能接着解釋到底啥是文檔流
  • 文檔流，或者叫正常流。將窗體自上而下分紅一行行, 並在每行中按從左至右的順序排放元素,即爲文檔流.

                  把一個網頁的文檔流看做是一張做業紙，好比標題（塊級元素）會單獨佔用一整行，正文（行內元素），就從左往右排。

 

 

　　　花了好幾個小時整理，期間有不少模糊和不曾瞭解到的點。因此，在學習的同時，花時間總結，考察本身仍是很重要的。若是咱們能一直保持着考察本身的心態和要求。那麼我相信對求職和進步都是大有益處的吧。最近稍微有點鬆懈，看到佈置的任務的難點已經攻克，就有點心不在焉，緊迫感不夠。因此決定拿不能靜心的時間來寫博客，既然感覺不到靜心學習帶來的快樂，那就去嘗試總結分享帶來的快樂吧。加油，小蔣同窗！