亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

前端面試系列--css

2450184176 / 981人閱讀

1.盒子模型

w3c標(biāo)準(zhǔn): width: content

ie標(biāo)準(zhǔn): width: content+padding+border

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

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

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

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 外邊距塌陷

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

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

假設(shè)有一個(gè)空元素，它有外邊距，但是沒(méi)有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(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 提供的語(yǔ)法規(guī)則，只有導(dǎo)入樣式表的作用；link是HTML提供的標(biāo)簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。

加載頁(yè)面時(shí)，link標(biāo)簽引入的 CSS 被同時(shí)加載；@import引入的 CSS 將在頁(yè)面加載完畢后被加載。

@import是 CSS2.1 才有的語(yǔ)法，故只可在 IE5+ 才能識(shí)別；link標(biāo)簽作為 HTML 元素，不存在兼容性問(wèn)題。

可以通過(guò) JS 操作 DOM ，插入link標(biāo)簽來(lái)改變樣式；由于 DOM 方法是基于文檔的，無(wú)法使用@import的方式插入樣式。

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

4.2參考

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

5.如何居中一個(gè)元素

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

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

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

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

不可繼承: 其它

所有元素可繼承：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是相對(duì)于顯示器屏幕分辨率而言的

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

8.2 em

em的值并不是固定的；

em會(huì)繼承父級(jí)元素的字體大小。

任意瀏覽器的默認(rèn)字體高都是16px

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

        

            
我的父級(jí)是div

8.3 rem

rem是css3中新增加的單位相對(duì)的只是HTML根元素，默認(rèn)也是16px

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

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

只有改變根元素html的值才能改變r(jià)em的值

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




    
    
    
    Document
    
    



    

        
i am p

8.4 參考

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

9. 文字超出顯示省略號(hào) 9.1 單行 
    
    
        
CSS文本溢出顯示省略號(hào)CSS文本溢出顯示省略號(hào)

9.2 多行 
    
    
        
CSS文本溢出顯示省略號(hào)CSS文本溢出顯示省略號(hào)CSS文本溢出顯示省略號(hào)

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

11 chrome顯示小于12px字體 
    
    

        shrink

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

transform：轉(zhuǎn)換

可以可以對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸

2d和3d

13. transition(過(guò)渡)

過(guò)渡

四個(gè)過(guò)渡屬性

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

定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。

規(guī)定過(guò)渡效果的時(shí)間曲線(xiàn)。默認(rèn)是 "ease"。

規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。

14. animation(動(dòng)畫(huà))

定義一個(gè)屬性， @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)劣和適用場(chǎng)景

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103946.html

相關(guān)文章

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

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

    wangjuntytl 評(píng)論0 收藏0

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

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

    princekin 評(píng)論0 收藏0

  • 寫(xiě)給初入門(mén)/半路出家的前端er

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

    Cc_2011 評(píng)論0 收藏0

  • 面試寶典

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

    neu 評(píng)論0 收藏0

  • 前端文檔收集

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

    jsbintask 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<