成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS基礎(chǔ)知識點整理

HollisChuang / 1130人閱讀

摘要：忙忙碌碌的，沒空整理。最近遇到些相關(guān)問題，之前只是印象中要這么用，不知道之所以然，今天就大概的整理下會比較零散。首先，巧妙的使用這一標(biāo)記，將瀏覽器從所有情況中分離出來。接著，再次使用將和分離開來，這樣已經(jīng)獨立識別。

忙忙碌碌的，沒空整理。最近遇到些CSS相關(guān)問題，之前只是印象中要這么用，不知道之所以然，今天就大概的整理下（會比較零散）。
盒子模型 W3C標(biāo)準(zhǔn)/IE盒子模型

標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容寬度（content）+ border + padding + margin
IE盒子模型：寬度=內(nèi)容寬度（content + border + padding）+ margin

box-sizing

用來控制元素的盒子模型的解析模式。默認(rèn)為content-box
content-box: W3C標(biāo)準(zhǔn)盒子模型，設(shè)置元素的width/height屬性是指content部分的寬/高。
border-box: IE傳統(tǒng)盒子模型，設(shè)置元素的width/height屬性是指(content + border + paddubg)部分的寬/高

塊級/行內(nèi)元素及其區(qū)別 常用塊級元素

div/table/h1-h6/p/form/ol等，以及html5新增的section/canvas/audio/video等等。
塊級元素：

會另起一行

可以設(shè)置width、margin、border、padding、width屬性

默認(rèn)寬度是容器的100%

行內(nèi)元素

a/input/textarea/button/label/select等等
行內(nèi)元素：

和其他元素在同一行

寬度/高度是內(nèi)容的寬度/高度

可以設(shè)置margin-left和margin-right屬性，無法設(shè)置margin-top和margin-bottom屬性

border和padding可以設(shè)置，但是border-top和padding-top到頁面頂部后就不再增加

BFC（塊級格式化上下文: block formatting context）

BFC規(guī)定了內(nèi)部的Block Box如何布局.?？蓞⒖祭斫釩SS的BFC
特征:

內(nèi)部的Box會在垂直方向上一個接一個放置

Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊

每個元素的margin box 的左邊，與包含塊border box的左邊相接觸

BFC的區(qū)域不會與float box重疊

BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素

計算BFC的高度時，浮動元素也會參與計算

觸發(fā)BFC條件：

float的值不為none

position的值不為static或者relative

display的值為inline-block、table-cell、table-caption、inline-flex或者flex其中之一

overflow的值不為visiabl

::before和:before中雙冒號和單冒號區(qū)別

單冒號:用于CSS3中的偽類，雙冒號::用于CSS3中的偽元素

::brfore就是一個子元素的存在，定義在元素主體內(nèi)容之前的一個偽元素，并不存在于DOM中。

:before 和 :after 這兩個偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before ::after

常見兼容性問題

漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標(biāo)記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。

    div {
        background-color: #ffffff; /* 所有識別 */
        background-color: #fbfbfb; /* IE6、7、8識別 */
        +background-color: #fcfcfc; /* IE7識別 */
        _background-color: #fdfdfd; /* IE6識別 */
    }

Chrome支持小于12px 的文字

    p { font-size: 10px; -webkit-transform: scale(0.8); } //0.8是縮放比例

position: flxed在android下無效
未完待續(xù)~~

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115863.html

相關(guān)文章

  • 前端開發(fā)知識點整理

    摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 評論0 收藏0

  • 前端開發(fā)知識點整理

    摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    Sike 評論0 收藏0

  • 前端開發(fā)知識點整理

    摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    tracy 評論0 收藏0

  • Web前端基礎(chǔ)知識整理-CSS篇

    摘要：標(biāo)簽標(biāo)簽自定義盒模型一基本概念盒模型由里向外是由構(gòu)成的。生成相對定位的元素，相對于其正常位置進行定位。相對與支付的高度，通常為字體高度的一半。視口被平均分為單位的相對于視口的高度。 CSS手冊：http://t.mb5u.com/css3/選擇器一、元素選擇符 通配選擇符(*):選擇所有元素 類型選擇符(E)：以文檔對象類型作為選擇符 id選擇符(E#id):以唯一標(biāo)識符id屬性等于...

    邱勇 評論0 收藏0

  • 基礎(chǔ)知識：css3核心知識整理

    摘要：前綴瀏覽器兼容根據(jù)了解，屬性大部分支持，部分支持，少部分支持前綴蘋果谷歌火狐瀏覽器世界之窗例如兼容轉(zhuǎn)換過渡關(guān)鍵幀動畫轉(zhuǎn)換及以上支持，需添加前綴屬性的方法使用縮放軸縮放倍，軸縮放倍，只有一個值時為縮放倍數(shù)傾 css3前綴（瀏覽器兼容） 根據(jù)了解，css3屬性大部分支持ie10，部分支持ie9，少部分支持ie8 // 前綴 // -webkit- Safari and Chrome（...

    kycool 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<