當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

html笔记（二）html4+css2.0（元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹）

發布時間：2023/12/2 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 html笔记（二）html4+css2.0（元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

大標題小節

一、元素類型	1. 元素分類 2. 置換和非置換元素 3. 元素類型轉換
二、css精靈
三、寬高自適應	1. 寬度自適應 2. 高度自適應 3. 最小高度自適應 4. 高度塌陷及解決辦法 5. 元素的高度自適應屏幕的高度
四、BEC概念應用	1. 常見定位方案 2. 觸發BFC 3. BFC特性及應用 4. BFC概念
五、瀏覽器相關概述	1. 主要瀏覽器及內核 2. 瀏覽器常見兼容問題
六、css統籌及相關概念	1. css繼承 2. 網頁優化（SEO、搜索引擎優化） 3. css重置 4. 高級表單 5. 高級表格

一、元素類型

1. 元素分類

元素類型有18種之多，但常用的類型只有4種。
（1）塊元素（block）：默認寬度和父框一樣寬，強制換行，能設置寬高；

（2）行元素（inline）：也叫“內聯元素”。元素不能設置寬高，在一行顯示，寬高由內容撐大；

（3）行內塊元素（inline-block）：在一行顯示，并且能設置寬高，能設置寬高的行內元素；

（4）不顯示元素（none 默認）：鼠標滑過或點擊顯示，其余時間隱藏；

（5）列表元素（list-item）：不常用。和塊元素特性基本一樣，只是能設置列表屬性（比如list-style-type），只有 li 這個類型。

2. 置換和非置換元素

（1）置換元素：img、input、textarea、select；
特點：①不設置寬高，天生有寬高的元素；
②天生帶有功能性的元素稱為置換元素。

（2）其他的都是非置換元素。

3. 元素類型轉換

通常布局下，我們塊元素使用的多，行元素使用的少，但理想可使用的塊元素相當的少，所以需要將很多行元素來轉換成塊元素使用。

（1）通過 display: 元素類型; 來轉換。
元素類型可以是： block、inline、inline-block、none。

（2）案例

二、css精靈

css 精靈又稱 “圖片整合”，
1. 優勢：
（1）減少對服務器的請求次數，從而提高頁面加載速度；
（2）減少圖片體積;
2. 劣勢： 增加了開發人員的負擔；
3. 使用：
給元素定義一個 背景圖，用 background-position 來實現應用，background-position 經常為負值。

案例：利用下面的圖片寫成一串手機號。

三、寬高自適應

自適應： 元素的大小能夠根據窗口或子元素自動調整。自適應能夠使網頁顯示更靈活，可以適應在不同設備、不同窗口和不同分辨率下顯示。

1. 寬度自適應

（1）塊（子）元素在不設置寬度的情況下，width:auto;（默認）；

子元素寬度 = 父元素的width;
子元素設置了padding、border、margin， 子元素的width = 父元素width - 子padding + 子border + 子margin；

（2）如果設置了寬度100%，width:100%;，那么 子元素width = 父元素width；

（3）口訣：

① 現在要書寫的元素父子是否一樣大，如果不是，就寫。
② 子元素無法撐開父元素，就寫寬度；
③ 多個子元素 = 父元素寬度時，父元素寫寬度，子元素不寫；
④ 唯一一個子元素和父元素一樣大時，子元素設置寬度，父元素不寫；

2. 高度自適應

（1）height:auto; 默認值，初始狀態=0；

（2）子元素能撐開父元素的高度，如果父元素設置了固定高度，那么子元素就 無法撐開；

（3）如果元素本身有個最小高度，當內容區域超過最小高度時，父框就被撐大；

3. 最小高度自適應

（1）min-height：最小高度；ie6不識別該屬性，ie6中 height 其實就是 最小高度。
解決辦法：{min-height:800px; _height:800px;}

（2）過濾器：

_屬性 //只有ie6能識別。如：_height:value; *屬性 //只有ie6、7能識別。如：*height:value; !important; //ie6不能識別。如：height:value !import;

4. 高度塌陷及解決辦法

（1）偽元素選擇符：ie8 以下不支持偽元素。

:after 給最后一個子元素之后添加一個類似 span標簽的偽元素；
:before 給第一個子元素之前添加一個類似 span標簽的偽元素；
:first-line 給第一行文字設置樣式；
:first-letter 給第一個字設置樣式；

注意 :after 和 :before：
① 這兩個偽元素必須添加 content:屬性值; 否則偽元素無效 ；
② 這兩個偽元素添加在 父級元素 身上；

（2）高度塌陷及解決辦法：
① 給父元素足夠高度；缺點：無法做到高度自適應；

② overflow:hidden; 自動檢索子元素高度；缺點：溢出的部分（子元素超出父元素）會被隱藏；

③ clear:both; 清除左右浮動，讓它前面所有浮動的兄弟元素都占文檔流，并且保持橫向結構。
通常在最后一個浮動元素之后添加一個塊元素，這個塊元素寫樣式 clear:both; 來清除浮動。

clear: left; 清除左浮動，設置左浮動的塊元素就占文檔流了；
clear: right; 清除右浮動，設置左浮動的塊元素就占文檔流了；

④ 萬能清除法：配合第二種方式通過偽元素來實現

//zoom:1;一條解決ie疑難雜癥（比如浮動）的神奇屬性 // visibility: visible/hidden;可見/隱藏 //父元素:before{content: ""; display:table;} 解決第一個塊元素 margin-top 向上傳遞問題。父元素{zoom:1;} 父元素:after{display: block; content: ""; clear: both; visibility: hidden;} 父元素:before{content: ""; display:table;} <style>.box{width: 500px; border: 2px solid #000;zoom:1;}.left{float: left; width: 100px; height: 100px; background:#f99;}.right{float: right; width: 120px; height: 120px; background:#f80;}.clearx:after{display: block; content: ""; clear: both; visibility: hidden;}.clearx:before{content: ""; display:table;} </style> <body><div class="box clearx"><div class="left"></div><div class="right"></div></div> </body>

5. 元素的高度自適應屏幕的高度

如果想讓元素高度和窗口高度一樣那么就要設置：
html,body{height:100%;}
元素{height:100%;}

四、BFC概念應用

參考“林東洲”講解
要想知道什么是“BFC”，我們先從自己熟悉的地方開始了解，再來解釋什么叫做“BFC”。BFC 屬于頁面定位方案的“普通流”。

1. 常見定位方案

（1）普通流（normal flow）
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在這個過程中，行內元素水平排列，直到當行被占滿然后換行；塊級元素則會被渲染為完整的一個新行。除非另外指定，否則所有元素默認都是普通流定位，也可以說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。

（2）浮動 (float)
在浮動布局中，元素首先按照普通流的位置出現，然后根據浮動的方向盡可能的向左邊或右邊偏移，其效果與印刷排版中的文本環繞相似。

（3）絕對定位 (absolute positioning)
在絕對定位布局中，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響，而元素具體的位置由絕對定位的坐標決定。

2. 觸發 BFC

只要元素滿足下面任一條件即可觸發 BFC 特性：
（1）body 為根元素；
（2）浮動元素： float 除 none 以外的值；
（3）絕對定位元素：position(absolute、fixed)；
（4）display 的屬性值為 inline-block、table-cells、flex；
（5）overflow 除了 visible 以外的值 (hidden、auto、scroll)。

3. BFC 特性及應用

（1）同一個 BFC 下外邊距會發生折疊：（具體可以查看盒模型 margin 的坑）

解決方法：如果想要避免外邊距的重疊，可以將其放在不同的 BFC 容器中。

（2）BFC 可以包含浮動的元素（清除浮動）
我們都知道，浮動的元素會脫離普通文檔流，如果不給父元素高度，子元素會撐不開父元素，造成“高度塌陷”（可以查看浮動 float 遇到的坑-高度塌陷）。來看下面一個例子：

解決辦法：如果使容器觸發 BFC，那么容器將會包裹著浮動元素。

（3）BFC 可以阻止元素被浮動元素覆蓋
相當于浮動 float 遇到的坑-第5條浮動元素不能與文本元素重合在一起，它會把文字擠出去；

<body><div style="height: 100px;width: 100px;float: left;background: lightblue">我是一個左浮動的元素</div><div style="width: 200px; height: 200px;background: #eee">我是一個沒有設置浮動, 也沒有觸發 BFC 元素, width: 200px; height:200px; background: #eee;</div> </body>

解決辦法：如果想避免元素被覆蓋，可觸第二個元素的 BFC 特性：在第二個元素中加入 overflow: hidden，或者margin-left:第一個元素的寬。

4. BFC 概念

了解上面的內容之后，我們對 BFC 就有一層理解了。

具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。

BFC（Block fomatting content）塊級格式化上下文。是 w3c css2.1 規范中的一個概念。它是頁面中的一塊渲染區域，且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。

五、瀏覽器相關概述

1. 主要瀏覽器及內核：

（1）IE瀏覽器： Trident；
（2）火狐Firefox瀏覽器： Gecko；
（3）原谷歌現蘋果： Webkit；
（4）現在Opera和谷歌： Blink（由Google和Opera 開發的瀏覽器排版引擎）；
（5）原Opera： Presto（迅速的，但是缺乏兼容性）；

2. 瀏覽器常見的兼容問題

（1）圖片間隙：
描述：在 div 中插入圖片時，圖片會將 div 下方撐大 3px ；該 bug 出現在 ie6 及更低版本中。

hack：將 <img>轉換成塊元素，即給 <img> 添加聲明： display:block;

（2）dt，li 中圖片間隙

hack：給 <img> 添加聲明： display:block;

錯誤示例：

（3）雙倍外邊距：
描述：當 ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界加倍顯示。
產生條件：塊元素、浮動、貼邊、左右邊距；

hack：給浮動元素添加聲明：display:inline;

（4）默認高度：
描述：在IE6及以下版本中，部分塊元素擁有默認高度（低于18px高度）；

hack1：給元素添加聲明：font-size:0;
hack2：給元素添加聲明：overflow:hidden;

（5）表單元素和按鈕不在一行顯示：
產生原因：按鈕元素的 value 為空（""）；

hack：給表單元素添加聲明：float: left 或者 vertical-align: top/middle/bttom;
注意：使用 vertical-align 會讓兩個表單元素產生 5px 空格，但是 float:left 不會。

（6）表單元素和按鈕元素默認大小不一致：
產生原因：按鈕元素的 padding 和 border 大小會算在 width、height 里面；

hack：給按鈕設置成標準盒模型模式，或者計算出按鈕的寬高。
最好給表單元素加上 vertical-align:top;，否則表單頂部會產生 1px 間隙。

（7）鼠標指針bug：
描述： cursor 屬性的 hand 屬性值只有IE瀏覽器識別，其它瀏覽器不識別該聲明，cursor 屬性的 pointer 屬性值IE6.0以上版本及其它內核瀏覽器都識別該聲明。

hack：如統一某元素鼠標指針形狀為手型，應添加聲明：cursor:pointer;

（8）透明屬性：
IE8以下瀏覽器寫法： filter:alpha(opacity=value); 取值范圍 0-100；
兼容其他瀏覽器寫法：opacity:.value;(value的取值范圍0-1,0.1,0.2,0.3-----0.9)；

（9）a顯示成階梯狀
描述：當LI里的 <a> 轉成塊元素時，給A寫浮動屬性后，IE6里會錯誤的將列表項顯示成階梯狀；

hack：將LI元素也同樣填加浮動屬性。

六、css統籌及相關概念

更多可參考：https://www.cnblogs.com/wzndkj/p/7813054.html

1. css繼承

和文本有關 的屬性通常都有繼承性：color，font，line-height，text-aligh 等。

2. 網頁優化（SEO、搜索引擎優化）

（1）關鍵詞：<meta name="keywords" content="關鍵詞1,關鍵詞2">
關鍵詞分割可以用 “,”、“|”、“”，多個關鍵詞時最好統一用一種分隔符。

描述： <meta name="description" content="一段描述（不要太長）">

（3）超鏈接優化

采用純文本連接少用，最好是別用 Flash 動畫設置連接，因為搜索引擎無法識別 Flash 上的文字；
最好別使用圖片熱點連接；

（4）圖片優化
使用 alt 屬性，title 屬性。

（5）頁面優化

盡量不要使用h1、h2，若有需要，一個頁面 h1 和 h2 表簽分別控制出現 1個和2個。
搜索引擎不喜歡太大體積的頁面，控制在 100Kb 內為佳；

3. css重置

（1）css規范

命名方法（語義化命名，結構化命名）；
ID:結構化：#header、#footer；
class：.border0、 . red、.font12、.clear；

（2）css命名規則：

建議使用小寫字母；
以英文字母開頭，后面可以連接數字、字母、下劃線、連接線，建議盡量使用英文字母，適當使用下劃線和連接線；
詞必達意，同時要簡短。

4. 高級表單

（1）表單字段集： <fieldset>內容</fieldset>；fieldset 常與 legend 配合使用，對表單進行分組；

（2）字段集標題：<legend></legend>；

（3）表單元素：

<input type="file"/> 上傳文件，默認樣式不可修改，且在不同瀏覽器中顯示的樣式也不相同；
<input type="image" src="路徑"/> 圖片域，把提交按鈕變成圖片的樣子。不常用這個，常在submit 按鈕中添加背景圖；
<input type="hidden"> 隱藏輸入框及內容（常用于傳值，但是又不想在頁面上顯示出來）

（4）提示信息標簽：<label for="表單中的id名">內容</label>；
label 標簽是 行元素，label 中的內容可以是 input 輸入框（常用于：type="radio/checkbox"），此時不需要 for 屬性。

使用示范：

<fieldset>表單字段集</fieldset> <legend>字段集標題</legend> <fieldset><legend>表單字段集和字段集標題配合使用</legend> </fieldset> <fieldset><legend>表單字段集和字段集標題配合使用</legend><input type="file"><input type="image" src="../imgs/蔡蔡1.jpg" style="width: 100px; height: 100px;"><input type="hidden"> </fieldset> <fieldset><legend>label綁定file輸入框</legend><label>內容</label><label for="upload" style="cursor: pointer;border:1px solid #f99;background: #9f9">點擊上傳</label><input type="file" id="upload" style="display: none;"/><label><input type="radio" name="sex">男</label><label><input type="radio" name="sex">女</label> </fieldset>

5. 高級表格

（1）單元格與單元格之間的間距 border-spacing:value;
默認有 2px 的邊距，設置為 0 ，邊框粗細會變成 2px ；寫給table的css樣式，效果類似 cellspacing。

（2）合并相鄰單元格邊框border-collapse: separate（默認邊框分開）/collapse（邊框合并）
td合并在一起后邊框會是 2px，若想變成1px，可以用該屬性合并邊框。寫給table的css樣式。

（3）無內容單元格顯示、隱藏： empty-cells:show（默認）/hide;
寫給 table 的css樣式，隱藏時還包括了這個 td 身上的 css 樣式。

（4）表格布局： table-layout:auto（默認，給 td 設置的寬度無效）/fixed（固定寬度，不會隨內容多少改變單元格寬度）；

自動表格布局（auto）： 列的寬度是由列單元格中沒有折行的最寬的內容設定的；
缺點：較慢（因為他需要在確定最終的布局訪問表格中的所有內容）。
優點：靈活；
固定表格布局（fixed）：
優點：加快運行速度，允許瀏覽器更快的對表格進行布局；
缺點：不太靈活。

（5）表格標題： <caption></caption>；只能用于table標簽中。

（6）表格布局元素：

表格列標題： <th></th>；放在 <tr></tr>中，里面的文字默認加粗、居中；
垂直對齊方式： valign="top/bottom/middle/baseline（默認）"；
th、td在垂直方向上的位置，直接寫在 tr 標簽中。

添加組分割線： rules="groups（需要配合 thead 等標簽來使用）/rows/cols/all/none"；
寫在 table標簽中。

（7）表格行分組

表頭： <thead></thead>
表體： <tbody></tbody>
表尾： <tfoot></tfoot>
自定義列分組標簽（寫在 caption 標簽后面）： <colgroup span="value"></colgroup>；value 值是幾就從當前分組后的第幾列后面加豎線（默認為：1），需要配合 thead 等標簽和 rules 來使用；

<table rules="groups"><caption>colgroup的使用</caption><colgroup></colgroup> <colgroup span="3"></colgroup> <thead> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> </thead><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> </table>

相關HTML部分筆試、面試題
上一篇： html（一）html學習-干貨之 html4+css2.0
下一篇：html（一）html學習-干貨之 html5+css3

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html笔记（二）html4+css2.0（元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：进入登录页时，用户名输入框自动聚焦、按e
下一篇：关于HTML的面试题-html4/css