html和css面試題
21.如何居中div,如何居中一個浮動元素?
給div設置一個寬度,然後添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
居中一個浮動元素
確定容器的寬高 寬500 高 300 的層
設置層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
//方便看效果
left:50%;
top:50%;
}
22.你怎麽來實現頁面設計圖,你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局 如何設計?
* 首先劃分成頭部、body、腳部;。。。。。
*
實現效果圖是最基本的工作,精確到2px;
與設計師,產品經理的溝通和項目的參與
做好的頁面結構,頁面重構和用戶體驗
處理hack,兼容、寫出優美的代碼格式
針對服務器的優化、擁抱 HTML5。
23.列出display的值,說明他們的作用。position的值, relative和absolute定位原點是?
1. block 象塊類型元素一樣顯示。
none 缺省值。向行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示,並添加樣式列表標記。
2.
*absolute
生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。
*fixed (老IE不支持)
生成絕對定位的元素,相對於瀏覽器窗口進行定位。
*relative
生成相對定位的元素,相對於其正常位置進行定位。
* static 默認值。沒有定位,元素出現在正常的流中
*(忽略 top, bottom, left, right z-index 聲明)。
* inherit 規定從父元素繼承 position 屬性的值。
24.為什麽要初始化CSS樣式。
因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對
當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。
*最簡單的初始化方法就是: * {padding: 0; margin: 0;} (不建議)
淘寶的樣式初始化:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea{ font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var{ font-style:normal; }
code, kbd, pre, samp{ font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol{ list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img{ border:0; }
button, input, select, textarea{ font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
html和css面試題