Css面試題

50道CSS基礎面試題  http://www.javashuo.com/article/p-nmmsldqk-g.html

 

一、針對Chrome中文界面下，默認強制最小字體爲12px的問題

font-size：20px  -webikt-transform：scale（0.5）

https://blog.csdn.net/htmlxx/article/details/17368779

 

 

二、display:none與visibility:hidden的區別

visibility在文檔佈局有位置佔空間，適合在手機端切換顯示，防止忽然加一塊內容會擠開原有佈局

 

 

三、浮動

浮動帶來的問題：

父元素的高度沒法被撐開，形成父元素塌陷

與浮動統計的非浮動元素會跟隨其後

若非第一個元素浮動，則該元素以前的元素也許要浮動，不然會影響頁面顯示的結構。浮動的元素會跑到第一元素位置

 

清除浮動的方式 ：

父元素設置height

clear：both

父元素overflow設置爲hidden

父元素定義zoom （定義縮放比例）

 

對於overflow與zoom清除浮動帶來影響的一些認識

http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/

因爲浮動致使父元素塌陷，當使用overflow：hidden時有不能隱藏子元素，只能將父元素撐高

zoom是放大父元素和子元素，可是父元素height：0沒法放大，只能將父元素撐高

 

四、zoom與scale的區別

zoom縮放會將元素保持在左上角，而scale默認是中間位置，能夠經過transform-origion來設置

zoom只在IE下起做用

 

五、transform、transition、animation

變形 transform

transform:rotate(-20deg)  旋轉

transform:scale(x,y)  縮放

transform:translate(x,y)  移動

 

過渡 transition

 transition: background-color 0.3s ease 0;

 

 動畫  animation

animation:mymove 5s infinite; 

-webkit-animation:mymove 5s infinite; 

 

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

 

@keyframes myfirst

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/

 

六、上下margion會重合，使用數值大的

 

七、瀏覽器字體應該使用偶數，使用奇數字體的時候，瀏覽器渲染的點陣實際是按照比奇數字體小一號的點，可是字體所佔空間變大1號，因而就略顯稀鬆，同時行高也沒有顯示對，使用對齊的時候會有問題

 

七、pading-top、bottom與margion-top、bottom當按照百分比設定它們時，依據的是父容器的寬度，而不是高度

 

八、：：before和：after中雙冒號與單冒號有什麼區別

單冒號是僞類，雙冒號是僞元素

僞類是設置樣式的，僞元素是以一個子元素存在，定義在元素主體以前/以後的一個僞元素，並不存在dom之中，只存在頁面之中。在裏面能夠添加content：「文字」

http://www.javashuo.com/article/p-waclsowu-ds.html

 

九、line-hegiht

css中起高度做用的是heigth和line-height，沒有定義height屬性，最終變現做用必定是line-height

通常實現單行文本垂直居中

 

十、li與li以前看不見的空白間隔

是因爲書寫的時候換行符引發的，能夠將li寫在一行，可使用font-size：0，再設置li裏的字體。設置li中float：left

 

十一、style文件須要寫在頭部head

頁面自上而下加載，當解析到尾部的樣式表會致使瀏覽器中止以前的渲染，等待加載且解析樣式完成後，更新渲染。

 

十二、script文件須要寫在body後

js的下載和執行會阻塞dom樹的構建，中斷dom樹的更新

 

1三、第一個子元素的margion-top影響父元素

由於父元素沒有設置padding和border時，第一個子元素的margion-top會和父元素重疊。

全部毗鄰的兩個或更多盒元素的margion將會合併爲一個margion共享之。毗鄰的定義爲：同級或嵌套的盒元素，而且他們之間沒有非空內容、padding或border分隔

解決辦法是父元素設置padding或border或overflow

 

1四、塊級元素與行內元素

塊級元素會獨佔一行,默認狀況下,其寬度自動填滿其父元素寬度.

行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裏,直到一行排不下,纔會換行,其寬度隨元素的內容而變化.

塊級元素能夠設置width,height屬性.行內元素設置width,height屬性無效，它的長度高度主要根據內容決定.塊級元素即便設置了寬度,仍然是獨佔一行.

塊級元素能夠設置margin和padding屬性.行 內元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin- right都產生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不會產生邊距效果.

塊級元素對應於display:block.行內元素對應於display:inline.

塊級元素常見的有：div......行內元素常見的有：a，span

若是想讓一個元素能夠設置寬度高度，又讓它以行內形式顯示，咱們能夠設置display的值爲inline-block。

http://www.javashuo.com/article/p-gzwntqpt-bc.html