1.隱藏網頁中的元素有幾種方式?這些方法有什么區別?
答案:三種方法.
display:none;脫離文檔流,不占頁面空間,會改變頁面布局。
visivility:hidden;不會脫離文檔流,不會改變頁面布局,仍占頁面空間。
opacity:0;該元素隱藏起來了,但不會改變頁面布局,並且,如果該元素已經綁定
一些事件,如click事件,那么點擊該區域,也能觸發點擊事件.
2.如何解決子元素的上外邊距溢出?
答案:在父元素的第一個子元素位置處添加一個空的table標記.
3.常用來設置透明度的方式有幾種?他們之間有何區別?
答案:opacity和rgba
opacity能設置與元素相關各種顏色的透明度
rgba()只能設置當前某一種顏色的透明度.
4.浮動會對父元素的高度帶來什么影響?如何解決這個問題?
答案:子元素一旦浮動,父元素的高度為0,在父元素最后一個子元素位置處
添加一個空的塊級元素,並設置其clear屬性為both.
.clear:after{
display:block;
content:"",
clear:both;
}
5.哪些元素默認有外邊距?
答案:body,p,h1-h6,ul,ol,dl,pre
6.網頁中如何定義錨點?如何連接到錨點位置?
答案:a標記用name定義錨點,其他標記用id屬性定義錨點.
連接到錨點的位置:href="#錨點名稱";
7.框模型默認的計算方式是什么?要改變默認的計算方式用哪個屬性及值?
實際占地寬度=左右外邊距+左右邊框+左右內邊距+width
實際占地高度=上下外邊距+上下邊框+上下內邊距+height
改變計算方式: box-sizing:border-box
8.實現時針轉動效果需要用到CSS中哪些關鍵技術?
答案:旋轉,動畫,,絕對定位
9.設置行內元素居中對齊用什么屬性?
答案:text-aligin:center
10.如果要將表單中控件的值提交給服務器必須為控件設置什么屬性?
答案:name和value屬性
11.transition和animation的區別?
答案:Animation和transition大部分屬性是相同的,他們都是隨時間改變元素的屬性值,他們的主要
區別是transition需要觸發一個事件才能改變屬性,而animation不需要觸發任何事件的情況下也會隨着
時間改變屬性值,並且transition為2幀.從from.... to ,而animation可以以幀一幀的,也可以理解為一個
animation是由多個transition組成.
12.如何實現水平垂直居中?
答案:
1.定位+外邊距
盒子寬高已知,position:absolute;left:50%;top:50%;
margin-left:-自身一半寬度;margin-top:-自身一半高度;
2.定位+transform 盒子寬高已知,
#container{
position:relative;
border:1px solid red;
width:800px;
height:600px;
}
#content{
width:100px;
height:100px;
background:blue;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
3.flex布局
父級:
display:flex;
align-items:center;/*垂直居中*/
justify-content:center;/*水平居中*/
居中布局
-水平居中
行內元素:text-aligin:center;
塊級元素:margin:0 auto;
絕對定位已知寬度: position:absolute;margin-left:-(寬度的一半);left:50%;
絕對定位+transform: postion:absolute;left:50%;transform:translateX(-50%);
彈性布局水平居中: display:flex;justify-content:cneter;
-垂直居中
line-height:height;高度設置和盒子一樣高
絕對定位和transform: position:absolute;top:50%;transform:translateY(-50%);
彈性布局垂直居中: display:flex;aligin-items:center;
絕對定位已知高度:position:absolute;margin-top:-(高度的一半);top:50%;
-水平垂直居中
1.已知寬高100px
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
2.彈性布局
display:flex;
justify-content:center;
aligin-items:center;
3.css3的transform屬性
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
4.margin:auto;
postion:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
13.盒子模型你是怎么理解的?
答案:元素框處理元素內容,內邊距外邊距以及邊框計算方式.
盒子模型有兩種,W3C和IE盒子模型
(1)w3c的盒模型: width=content內容區域寬;不包括margin,padding,border
(2)IE盒模型: width=content 內容寬度 + padding 寬度 + border 寬度
(3)box-sizing border-box在已設定的寬度和高度之內去設定padding和border
content-box在已設定的高度和寬度之外設置padding和border
14.src和href的區別?
答案:
(1) href:href是Hypertext Reference的縮寫,表示超文本引用。用來建立當前元素和文檔
之間的連接。並行下載該文檔,不會停止對當前文檔的處理.
(2)src:src是source的縮寫,src指向的內容會嵌入到文檔當前標簽所在位置.
如img、script、ifram當瀏覽器解析到該元素時,會暫停瀏覽器的渲染,直到
該資源加載完畢.
15.說出link和import的區別?
(1)使用方法不同:
link一般在html頭部定義,作為html標簽,鏈接資源,主要用於鏈接外部的樣式表.
import 一般定義在css內部,並且一定要在其他所有規則之前,也就是一般寫在文件頭部,
並且專門拿來鏈css的。
(2)加載順序差別
import 比link延遲一些,它會等到頁面下載完成后才加載,因而可能會產生閃爍.
16.改變頁面元素位置的定位方式及他們的區別?
答案:relative相對定位相對於自身原來位置進行偏移,
仍處於標准文檔流中;
absolute絕對定位 相對於最近的已定位的祖先元素,有已定位(指position不是static的元素)
祖先元素,以最近的祖先元素為參考標准。如果無已定位祖先元素,以body元素為偏移參照,完全
脫離文檔流;
fixed固定定位的元素會相對於視窗來定位,者意味着即便頁面滾動,它還是會停留在固定的位置。
固定定位也會脫離文檔流。
17.display有哪些值,說明他們的作用?
答案:display的取值可以是none/inline/block/inline-block/table
none:元素隱藏不可見,並且元素也不占頁面空間.
inline:元素將呈現行內元素的特點,多個元素在一行中顯示,不允許修改尺寸,也不能設置垂直外邊距。
block:元素將呈現塊級元素的特點,每個元素獨占一行,允許修改尺寸。
inline-block:元素將呈現行內塊元素的特點,多個元素在一行中顯示,但是可以修改尺寸。
table:元素將顯示表格的特點,由內容決定表格的顯示方式。元素獨占一行，允許修改尺寸。
18.有兩個div,外框和內寬高度寬度都不定,內寬垂直水平居中,利用css如何實現?
答案:
.content{
display:flex;
justify-content:center;
aligin-items:center;
}
19.說說em和rem的區別?
答案:rem是基於html元素的字體大小來決定,而em則根據使用他的元素的字體大小決定(
很多人錯誤以為是根據父類元素,實際上時元素繼承了父類屬性才會產生的錯覺)
20.瀏覽器的內核分別是什么?
答案：IE 瀏覽器的內核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、
Opera 內核原為 Presto，現為 Blink
21.為什么要初始化CSS樣式?
因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,
如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然,
初始化會對SEO有一定影響,但力求影響最小的情況下初始化。最簡單的
初始方法就是:*{padding:0;margin:0;}(不建議)淘寶的樣式初始化:
body,h1,h2,h3,h4,h5,h6,hr,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%;}
ul ol {list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline}
img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
22.CSS哪些屬性可以繼承?優先級算法如何計算?CSS3新增偽類有哪些?
答案:可繼承的樣式:font-szie,font-family,color,background等
不可繼承的樣式:border,padding,margin,width,height;
優先級就近原則,同權重情況下以最近者為准;
優先級為:!important>id>class>tag important比內聯優先級高
CSS3新增偽類:
:first-child 選擇屬於其父元素的首個元素.
:last-child 選擇其父元素的最后一個元素.
:only-child 選擇屬於其父元素唯一的元素.
:nth-child(n) 選擇屬於其父元素的任意一個子元素.
:empty 選擇沒有子元素的元素.
:not(selector) 將滿足指定選擇器的元素給排除在外.
23.描述css rest的作用。
答案:reset重置瀏覽器為元素設置的默認樣式,瀏覽器的種類不同,樣式可能不同,
重置是為了讓他們統一樣式.
24.清除浮動帶來影響的幾種方式,各自的優缺點.
答案:
1.直接設置父元素高度,但不是每次都知道父元素的高度.
2.設置父元素也浮動,但不是任何時候父元素都需要浮動,
而且浮動會影響后續元素.
3.為父元素設置overflow屬性,但如果有內容需要溢出顯示的話,也會
一同被隱藏.
4.在父元素中,追加空子元素,並設置其clear:both,但頁面中會多出一個空元素.
5.用內容生成的方式 :after{content:"",display:block;clear:both;}
25.px和em的區別
px和em都是長度單位,區別是,px的值是固定的,指定是多少就是多少,計算比較容易
em的值不是固定的,並且em會繼承父級元素的字體大小.
瀏覽器默認字體高都是16px.所以未經調整的瀏覽器都符合:1em=16px
那么12px=0.75em,10px=0.625em