塊級元素行內元素以及display屬性


1、什么叫做標簽語義化? ->合理的標簽做合適的事

   ->HTML中常用的標簽都有哪些? (塊狀標簽和行內標簽)

   ->塊狀標簽和行內標簽的區別? (常用的有8條區別)

1)內聯元素:和其他元素都在一行上,元素的高度,寬度及頂部和底部邊距不可設置。元素的高度就是它包含的文字或者圖片的寬度,不可改變。

  ->行內標簽主要有:<a>  <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>

2)塊級元素:每個塊級元素都是從新的一行開始,並且其他的元素也是另起一行。元素的高度,寬度,行高以及頂和底邊距都可以設置。元素寬度在不設置的情況下,是他本身的父容器的100%(和父元素的寬度一直),除非設定一個寬度。

  ->常用的塊級元素有:<div> <p> <h1> <h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

3)內聯塊狀元素:和其他元素都在一行上:元素的高度寬度,行高,以及頂部和底部邊距都可設置。常用內聯塊級元素有:<img> <input>

2、display有哪些常用的屬性值?分別是什么意思?有哪些需要注意的地方?

display的屬性值有:none|inline|inline-block|block|list-item|run-in|table|inlne-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inhert

1none:元素不會顯示,而且該元素的現實空間不會保留。擔有另外一個visiblity:hidden;是保留元素空間的

2inlinedisplay的默認屬性。將元素顯示為內聯元素,元素前后沒有換行符。我們知道內聯元素是無法設置寬高的,所以一旦元素的display屬性設置成inline,設置屬性的寬高是沒有用的。此時影響他的高度一般是內部元素的高度font-sizepadding

3block:將元素顯示為塊級元素,元素前后會帶有換行符。設置為block后,元素可以設置widthheight了,元素獨占一行。

4inline-block:行內塊級元素,這個元素融合了inlineblock的特性,他幾時內聯元素,又可以設置widthheight

   ->你在項目中編寫代碼的時候,遵循的規范是什么? (雅虎優化36條建議)

5)其他的display不是很常用的屬性

  list-item:     此元素會作為列表顯示。

  run-in:     此元素會根據上下文作為塊級元素或內聯元素顯示。

  table:     此元素會作為塊級表格來顯示(類似 <table>),表格前后帶有換行符。

  inline-table:     此元素會作為內聯表格來顯示(類似 <table>),表格前后沒有換行符。

  table-row-group:     此元素會作為一個或多個行的分組來顯示(類似 <tbody>)。

  table-header-group:     此元素會作為一個或多個行的分組來顯示(類似 <thead>)。

  table-footer-group:     此元素會作為一個或多個行的分組來顯示(類似 <tfoot>)。

  table-row:     此元素會作為一個表格行顯示(類似 <tr>)。

  table-column-group:     此元素會作為一個或多個列的分組來顯示(類似 <colgroup>)。

  table-column:     此元素會作為一個單元格列顯示(類似 <col>)

  table-cell:     此元素會作為一個表格單元格顯示(類似 <td> 和 <th>)

  table-caption:     此元素會作為一個表格標題顯示(類似 <caption>)

  inherit:     規定應該從父元素繼承 display 屬性的值。

 

 

3、頁面中有一個盒子,我先讓其消失在我們的視野中,你有幾種辦法?

   ->透明度為零 (opacity/filter ->filter的其他作用)

   ->display:none

   ->visibility: hidden (display:nonevisibility:hidden區別是什么?)

   ->寬高為零

   ->position設置完,top/left是足夠的負值 (position常用到的屬性值都有哪些?需要注意哪些細節的地方)

   ->設置z-index,讓其它的元素把它遮蓋住

   ->背景顏色和我們頁面整體的背景顏色保持一致 (background常用到的屬性值都有哪些?)

   ->足夠的負的margin

   ...

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM