国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

WEB前端面試題匯總（CSS）

qpwoeiru96 / 2031人閱讀

摘要：默認值，沒有定位，元素出現在正常的文檔流中。生成粘性定位的元素，容器的位置根據正常文檔流計算得出。和屬性的異同共同點對內聯元素設置和屬性，可以讓元素脫離文檔流，并且可以設置其寬高。

position的值， relative和absolute分別是相對于誰進行定位的？

<1>、relative:相對定位，相對于自己本身在正常文檔流中的位置進行定位。
<2>、absolute:生成絕對定位，相對于最近一級定位不為static的父元素進行定位。
<3>、fixed: 生成絕對定位，相對于瀏覽器窗口或者frame進行定位。
<4>、static:默認值，沒有定位，元素出現在正常的文檔流中。
<5>、sticky:生成粘性定位的元素，容器的位置根據正常文檔流計算得出。

position:absolute和float屬性的異同？

共同點：對內聯元素設置float和absolute屬性，可以讓元素脫離文檔流，并且可以設置其寬高。
不同點：float仍可占據位置，不會覆蓋在另一個BFC區域上，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。absolute會覆蓋文檔流中的其他元素。

box-sizing屬性有哪些？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box;
<1>、content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border+padding+content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高。
<2>、border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設置width/height屬性指的是border+padding+content的寬度/高度。
<3>、padding-box：設置width/height屬性指的是padding+content的寬度/高度。

標準瀏覽器下，按照W3C規范對盒模型解析，一旦修改了元素的邊框或邊距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。
CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？

選擇符：
<1>、id選擇器（#myId）;
<2>、類選擇器（.myClassName）;
<3>、標簽選擇器（div,p,h1）;
<4>、相鄰選擇器（h1 + p）;
<5>、子選擇器（ul > li）;
<6>、后代選擇器（li a）;
<7>、通配符選擇器（*）;
<8>、屬性選擇器（button[disabled="true"]）;
<9>、偽類選擇器（a:hover,li:nth-child）;表示一種狀態
<10>、偽元素選擇器（li:before、:after,:first-letter,:first-line,:selecton）;表示文檔某個部分的表現

優先級：
!important > 行內樣式（比重1000） > id（比重100） > class/屬性（比重10） > tag / 偽類（比重1）;

偽類和偽元素區別：
1>、偽類：a:hover,li:nth-child；
2>、偽元素：li:before、:after,:first-letter,:first-line,:selecton;

偽元素和偽類都是選擇器的補充，偽類表示的是一種狀態，偽元素表示文檔的某個確定部分的表現。
偽元素選擇器選擇出來的部分不再dom里，也不能對其綁定事件，但是如果對偽元素前面的選擇器定義的元素綁定了事件，偽元素同樣會生效。

新增偽類
1>、li:first-of-type:選擇屬于其父元素的首個

  • 元素；
    2>、li:last-of-type:選擇屬于其父元素的最后一個
  • 元素；
    3>、li:only-of-type:選擇屬于其父元素的唯一一個
  • 元素；
    4>、li:only-child:選擇屬于其父元素的唯一子元素；
    6>、li:nth-child(2):選擇屬于其父元素的第二個
  • 元素；
    7>、:enabled :disabled:選擇表單控件的禁用狀態；
    8>、:checked:單選或復選框被選中狀態；

    對BFC規范的理解？

    BFC定義：塊級格式化上下文，一個創建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個相鄰的塊級盒在垂直方向的margin會發生折疊。

    BFC布局規則：
    1>、內部的box會在垂直方向，一個接一個的放置。
    2>、box的垂直方向的距離有margin決定。屬于同一個BFC的兩個相鄰box的margin會發生重疊。
    3>、每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)，即使存在浮動也是如此，除非這個盒子創建一個新的塊級格式化上下文。
    4>、BFC的區域不會與float box重疊。
    5>、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也是如此。
    6>、計算BFC的高度時，浮動元素也參與計算。

    哪些元素會產生BFC：
    1>、根元素；
    2>、float屬性不為none；
    3>、position為absolute或fixed；
    4>、display為inline-block，table-cell，table-caption，flex，inline-flex；
    5>、overflow除了visible以外的值（hidden、auto、scroll）;
    6>、fieldset元素

    運用BFC：
    1>、解決margin重疊問題：根據BFC布局原則2，在元素外側包裹一層容器，并觸發該容器生成一個BFC，那么兩個元素就不在同一個BFC,就不會發生margin重疊。

    

    
    Haha
    
    
    
        
    Hehe

    2>、自適應兩欄布局：

    根據BFC布局規則第3條：即使存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。
    解決：根據BFC布局規則第4條，我們可以通過通過觸發main生成BFC， 來實現自適應兩欄布局。

    .main {
    overflow: hidden;
}

    當觸發main生成BFC后，這個新的BFC不會與浮動的aside重疊。因此會根據包含塊的寬度，和aside的寬度，自動變窄。效果如下：

    3>、清除內部浮動：

    根據BFC布局規則第6條：計算BFC的高度時，浮動元素也參與計算，為達到清除內部浮動，我們可以觸發par生成BFC，那么par在計算高度時，par內部的浮動元素child也會參與計算。

    .par {
    overflow: hidden;
}

    解釋下浮動和它的工作原理？清除浮動的技巧：

    原理：任何元素都可以被浮動，浮動元素脫離文檔流，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
    浮動引起的問題：
    1>、父元素的高度無法被撐開，影響與父元素同級的元素；
    2>、與浮動元素同級的非浮動元素（內聯元素）會跟隨其后；
    3>、若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構；

    清除浮動：
    1>、使用空標簽清除浮動：
    這種方法是在所有浮動標簽后面添加一個空標簽

    . 弊端就是增加了無意義標簽。
    2>、使用after偽類：

    #parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

    3>、浮動外部元素；
    4>、設置父元素overflow為hidden或者auto，觸發父元素BFC；

    常見兼容性問題

    1>、png24位的圖片在ie6瀏覽器上出現背景，解決方案是做成png8，也可以引用一段腳本處理。
    2>、瀏覽器默認的margin和padding不同。解決方案：加一個全局的*{margin：0；padding：0}。
    3>、ie6雙邊距bug（20px距離）：塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin值比設置的大。解決方案：在float標簽樣式控制中加入_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)。
    4>、漸進識別方式，從總體中逐步排除局部：
    首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。
    接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

      .bb{
       background-color:#f1ee18;/*所有識別*/
      .background-color:#00deff9; /*IE6、7、8識別*/
      +background-color:#a200ff;/*IE6、7識別*/
      _background-color:#1e0bd1;/*IE6識別*/
  }

    待續....2015.5.29

    • 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112048.html

    相關文章

    • 前端資源系列（4）-前端學習資源分享&前端面試資源匯總

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

      princekin 評論0 收藏0

    • 前端最強面經匯總

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

      wangjuntytl 評論0 收藏0

    • 前端面試每日3+1（周匯總2019.08.25）

      摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址前端面試每日推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。 《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來驅動學習，每天進步一點！ 讓努力成為一種習慣，讓奮斗成為一種享受！相信 堅持 的力量...

      Java3y 評論0 收藏0

    • 前端面試每日3+1（周匯總2019.08.25）

      摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址前端面試每日推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。 《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來驅動學習，每天進步一點！ 讓努力成為一種習慣，讓奮斗成為一種享受！相信 堅持 的力量...

      付倫 評論0 收藏0

    • 2019前端面試題匯總（主要為Vue）

      摘要：畢業之后就在一直合肥小公司工作，沒有老司機沒有技術氛圍，在技術的道路上我只能獨自摸索。于是乎，我果斷辭職，在新年開工之際來到杭州，這里的互聯網公司應該是合肥的幾十倍吧。。。。 畢業之后就在一直合肥小公司工作，沒有老司機、沒有技術氛圍，在技術的道路上我只能獨自摸索。老板也只會畫餅充饑，前途一片迷?？床坏饺魏蜗ＭＳ谑呛?，我果斷辭職，在新年開工之際來到杭州，這里的互聯網公司應該是合肥的幾十...

      arashicage 評論0 收藏0

    發表評論

    0條評論

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