1 . line-height 的作用
- 在沒有設置標簽的高度
height時趁猴，line-height控制其表現(xiàn)高度挂捅； - 把標簽的
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有什么區(qū)別阐斜？如何新窗口打開鏈接?
- a標簽
href屬性表示a標簽的鏈接地址
title屬性表示在點擊目標元素的時候出現(xiàn)的提示內容
target屬性表示用什么樣的方式打開鏈接。 - title alt屬性的區(qū)別
title屬性表示當鼠標放在標簽內容的時候顯示的提示文字诀紊。title屬性不像alt屬性谒出，它不是某一個標簽的專屬屬性，所以可以用在很多的標簽上渡紫，包括img.a.p等標簽到推。
alt屬性表示圖片無法顯示的時候，出現(xiàn)的代替文字惕澎。所以alt是img標簽的專屬屬性莉测，所以a標簽是不允許出現(xiàn)alt屬性的。alt屬性防止img無法顯示或網絡環(huán)境不佳的情況下唧喉，幫助用戶理解圖片內容捣卤，幫助搜索引擎理解圖片信息。 - 新窗口打開鏈接：
<a href="#" target="_blank"></a>
4 . display: none , visibility: hidden,opacity:0 的作用八孝，及區(qū)別
-
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, 鼠標放置上去后顏色變?yōu)?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 . 寫一個如下表格表頭是藍色四濒，表行是白色。 當鼠標放置到表行時背景色變?yōu)榈疑?a target="_blank" rel="nofollow">
![]()
- 表格代碼
4 . 下面代碼有什么作用职辨？手抄一遍如下代碼盗蟆，改變?yōu)g覽器寬度看看效果
`<!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屬性功能是設置一個元素的外邊距，后跟兩個參數(shù)舒裤，第一個參數(shù)代表上下外邊距是0喳资，第二個參數(shù)代碼左右外邊距根據(jù)瀏覽器自動調整。 - 代碼題四中用了屬性
margin:0 auto腾供。我們可以看到現(xiàn)象仆邓，當瀏覽器寬度大于908px (div的寬度900加body的默認寬度8) 時，div元素居中顯示伴鳖；當瀏覽器寬度小于908px节值，下方出現(xiàn)滾動條，頁面固定在908px寬度榜聂。
- 參考資料
display:none搞疗、visibility:hidden、opacity:0的區(qū)別【代碼】
