成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端面試系列--css

2450184176 / 955人閱讀

1.盒子模型

w3c標準: width: content

ie標準: width: content+padding+border

elementUi,bootstrap: box-sizing:border-box;

2.選擇器優(yōu)先級

!important > 行內(nèi)樣式 > #id > .class > tag > * > 繼承 > 默認

3.BFC

塊格式化上下文（Block Formatting Context，BFC）

3.1 觸發(fā)條件 
1. 根元素
1. position: absolute/fixed
2. display: inline-block / table
3. float 元素
4. ovevflow !== visible
3.2 外邊距塌陷

當兩個元素垂直排列時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并,并選取margin大的

當一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并

假設(shè)有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并

3.2.1 外邊距塌陷情況 
    

    
blue

    
red

3.2.2 外邊距塌陷解決 
    

    
blue

    

        
red

3.3 參考

https://www.cnblogs.com/ianya...

4.link與@import 4.1 區(qū)別

@import是 CSS 提供的語法規(guī)則，只有導(dǎo)入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。

加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。

@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標簽作為 HTML 元素，不存在兼容性問題。

可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于 DOM 方法是基于文檔的，無法使用@import的方式插入樣式。

link引入的樣式權(quán)重大于@import引入的樣式。(@import引入的樣式，會被層疊掉了。其雖然后被加載，卻會在加載完畢后置于樣式表頂部，最終渲染時自然會被下面的同名樣式層疊)

4.2參考

https://www.jianshu.com/p/fc1...

5.如何居中一個元素

5.1 水平居中 5.2 垂直居中 5.3 水平垂直居中 5.4 參考

https://github.com/ljianshu/B...

6. css繼承 6.1什么是css繼承

繼承就是指子節(jié)點默認使用父節(jié)點的樣式屬性。
1.可繼承：顏色，文字，字體間距行高對齊方式，和列表的樣式可以繼承

不可繼承: 其它

所有元素可繼承：visibility和cursor。
內(nèi)聯(lián)元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
終端塊狀元素可繼承：text-indent和text-align。
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
6.2參考

https://www.nowcoder.com/ques...

7.css選擇器 7.1 參考 8.px,em,rem 8.1 px

px:像素,px是相對于顯示器屏幕分辨率而言的

1920*1024 前者是屏幕寬度總共有1920個像素寬度后者則是高度為1024個像素

8.2 em

em的值并不是固定的；

em會繼承父級元素的字體大小。

任意瀏覽器的默認字體高都是16px

        .p1 {
            font-size: 1em;
        }
        
        .div {
            font-size: 30px;
        }
        
        .div p {
            font-size: 1em;
        }
    
    
        
我的父級是body

        

            
我的父級是div

8.3 rem

rem是css3中新增加的單位相對的只是HTML根元素，默認也是16px

通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)；

區(qū)別em是根據(jù)父元素繼承相應(yīng)大小而不是固定的，rem是繼承html根元素的大小

只有改變根元素html的值才能改變rem的值

psd設(shè)計圖的寬度是750px,如何做移動端的適配?




    
    
    
    Document
    
    



    

        
i am p

8.4 參考

https://www.jianshu.com/p/a0b...

9. 文字超出顯示省略號 9.1 單行 
    
    
        
CSS文本溢出顯示省略號CSS文本溢出顯示省略號

9.2 多行 
    
    
        
CSS文本溢出顯示省略號CSS文本溢出顯示省略號CSS文本溢出顯示省略號

10. CSS創(chuàng)建一個三角形的原理

11 chrome顯示小于12px字體 
    
    

        shrink

12.transform(轉(zhuǎn)換)

transform：轉(zhuǎn)換

可以可以對元素進行移動、縮放、轉(zhuǎn)動、拉長或拉伸

2d和3d

13. transition(過渡)

過渡

四個過渡屬性

規(guī)定應(yīng)用過渡的 CSS 屬性的名稱

定義過渡效果花費的時間。默認是 0。

規(guī)定過渡效果的時間曲線。默認是 "ease"。

規(guī)定過渡效果何時開始。默認是 0。

14. animation(動畫)

定義一個屬性， @keyfframes + 屬性

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
}
@keyframes myfirst
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}
15 opacity: 0、visibility: hidden、display: none 優(yōu)劣和適用場景

display: none (不占空間，不能點擊)（場景，顯示出原來這里不存在的結(jié)構(gòu)）

visibility: hidden（占據(jù)空間，不能點擊）（場景：顯示不會導(dǎo)致頁面結(jié)構(gòu)發(fā)生變動，不會撐開）

opacity: 0（占據(jù)空間，可以點擊）（場景：可以跟transition搭配）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103946.html

相關(guān)文章

  • 前端最強面經(jīng)匯總

    摘要：獲取的對象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據(jù)我測試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續(xù)更新中……，可以關(guān)注下github 項目地址 https:...

    wangjuntytl 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

  • 寫給初入門/半路出家的前端er

    摘要：半路出家的前端程序員應(yīng)該不在少數(shù)，我也是其中之一。年，馮馮同事兼師兄看我寫太費勁，跟我說對面樓在找，問我要不要學(xué)，說出來可能有點丟人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序員應(yīng)該不在少數(shù)，我也是其中之一。 為何會走向前端 非計算機專業(yè)的我，畢業(yè)之后，就職于一家電力行業(yè)公司，做過設(shè)備調(diào)試、部門助理、測試，也寫過一段時間的QT，那三年的時間，最難過的不是工作忙不忙，...

    Cc_2011 評論0 收藏0

  • 面試寶典

    摘要：有談?wù)劽嬖嚺c面試題對于前端面試的一些看法。動態(tài)規(guī)劃算法的思想及實現(xiàn)方法幫大家理清動態(tài)規(guī)劃的解決思路以及原理方法前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。極客學(xué)院前端練習(xí)題道練習(xí)題，面試季練練手。 由數(shù)據(jù)綁定和排序引入的幾個 JavaScript 知識點 在 JavaScript 的數(shù)據(jù)綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎(chǔ)...

    neu 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<