1 . line-height 的作用
- 在沒有設置標簽的高度
height時，line-height控制其表現高度； - 把標簽的
line-height設置為所需要的box的大小，可以令標簽內單行文字垂直居中,無需設置高度height；
2 . 如何查CSS屬性的兼容性？比如inline-block哪些瀏覽器支持？
利用www.caniuse.com來查詢CSS屬性的兼容性。
-
inline-block的兼容性為
css inline-block兼容性.png
3 . a 標簽的href, title, target 是什么？ title 和 alt有什么區別？如何新窗口打開鏈接?
- a標簽
href屬性表示a標簽的鏈接地址
title屬性表示在點擊目標元素的時候出現的提示內容
target屬性表示用什么樣的方式打開鏈接。 - title alt屬性的區別
title屬性表示當鼠標放在標簽內容的時候顯示的提示文字。title屬性不像alt屬性，它不是某一個標簽的專屬屬性，所以可以用在很多的標簽上，包括img.a.p等標簽。
alt屬性表示圖片無法顯示的時候，出現的代替文字。所以alt是img標簽的專屬屬性，所以a標簽是不允許出現alt屬性的。alt屬性防止img無法顯示或網絡環境不佳的情況下，幫助用戶理解圖片內容，幫助搜索引擎理解圖片信息。 - 新窗口打開鏈接：
<a href="#" target="_blank"></a>
4 . display: none , visibility: hidden,opacity:0 的作用，及區別
-
display: none；此元素不會被顯示；元素從頁面上消失了，不保存物理空間，是徹底從文檔流里消失了； -
visibility: hidden；元素是不可見的；但是為它保留了物理空間，只是隱藏起來了； -
opacity:0；設置透明度為0；當透明度為0 的時候元素就消失了，空間還是會被自己占有。0為完全透明，1為不透明。
5 . 如何去除 a 鏈接的默認樣式？直接在 a 鏈接父容器添加顏色，能否繼承到當前 a 鏈接上？
- 去除a鏈接的默認樣式
去除下劃線：a{text-decoration:none;}
改變點擊前顏色：a:link{color:#xxx;}
改變鼠標劃過顏色：a:hover{color:#xxx;}
改變點擊后顏色：a:visited{color:#xxx;} - a鏈接不繼承父容器顏色，需要單獨設置。
代碼題
1 . 寫個div，邊框為1px, #ccc, 寬度為200px, 高度為80px, 內有一行文字這里是饑人谷，文字字體大小14px, 顏色#f0f, 文字在div里垂直水平居中
- div代碼
div.png
2 . 對于如下html代碼
- 給
.dialog加個邊框 1px, #ccc - 給header設置高度40px, 左對齊，左內邊距10px, 文字16px, 顏色#f00,下邊框#ccc 1px。
- 給content 設置高度100px,內部 a鏈接去掉下劃線，顏色 blue, 鼠標放置上去后顏色變為 red
- 給footer設置高度50px，內部 btn設置 邊框1px #ccc, 圓角3px, 上下內邊距4px,左右內邊距3px，顯示為inline-block, footer內居中顯示;
<div class="dialog"> <div class="header"> <h3>我是標題</h3> <a class="close" title="關閉" href="#">X</a> </div> <div class="content"> <h3>歡迎來到 <a >饑人谷</a></h3> <p> 在這個大家庭你能快樂的學到更多前端技能</p> </div> <div class="footer"> <a class="btn btn-cancel" href="#">取消</a> <a class="btn btn-confirm" href="#">確認</a> </div> </div>
- 補充代碼html
3 . 寫一個如下表格表頭是藍色，表行是白色。 當鼠標放置到表行時背景色變為淡灰色
![]()
- 表格代碼
4 . 下面代碼有什么作用？手抄一遍如下代碼，改變瀏覽器寬度看看效果
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.wrap{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">這里是標題</div>
</div>
<div id="content">
<div class="wrap">這里是內容</div>
</div>
<div id="footer">
<div class="wrap">這里是 footer</div>
</div>
</body>
</html>`
- 修改代碼
-
margin:0 auto屬性功能是設置一個元素的外邊距，后跟兩個參數，第一個參數代表上下外邊距是0，第二個參數代碼左右外邊距根據瀏覽器自動調整。 - 代碼題四中用了屬性
margin:0 auto。我們可以看到現象，當瀏覽器寬度大于908px (div的寬度900加body的默認寬度8) 時，div元素居中顯示；當瀏覽器寬度小于908px，下方出現滾動條，頁面固定在908px寬度。
- 參考資料
display:none、visibility:hidden、opacity:0的區別【代碼】
