CSS基礎知識點整理

HollisChuang 發布于2019-08-30 14:13 / 1060人閱讀

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

忙忙碌碌的，沒空整理。最近遇到些CSS相關問題，之前只是印象中要這么用，不知道之所以然，今天就大概的整理下（會比較零散）。

盒子模型 W3C標準/IE盒子模型

標準盒子模型：寬度=內容寬度（content）+ border + padding + margin
IE盒子模型：寬度=內容寬度（content + border + padding）+ margin

box-sizing

用來控制元素的盒子模型的解析模式。默認為content-box
content-box: W3C標準盒子模型，設置元素的width/height屬性是指content部分的寬/高。
border-box: IE傳統盒子模型，設置元素的width/height屬性是指(content + border + paddubg)部分的寬/高

塊級/行內元素及其區別 常用塊級元素

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

會另起一行

可以設置width、margin、border、padding、width屬性

默認寬度是容器的100%

行內元素

a/input/textarea/button/label/select等等
行內元素：

和其他元素在同一行

寬度/高度是內容的寬度/高度

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

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

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

BFC規定了內部的Block Box如何布局.。可參考理解CSS的BFC
特征:

內部的Box會在垂直方向上一個接一個放置

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

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

BFC的區域不會與float box重疊

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

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

觸發BFC條件：

float的值不為none

position的值不為static或者relative

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

overflow的值不為visiabl

::before和:before中雙冒號和單冒號區別

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

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

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

常見兼容性問題

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

    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下無效

未完待續~~

云服務器 GPU云服務器基礎知識點小結 PHP基礎知識點基礎知識入門基礎知識

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

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

前端開發知識點整理

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

Blackjun 2019-08-20 17:14 評論0 收藏0
前端開發知識點整理

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

Sike 2019-08-29 12:44 評論0 收藏0
前端開發知識點整理

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

tracy 2019-08-01 16:59 評論0 收藏0
Web前端基礎知識整理-CSS篇

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

邱勇 2019-08-29 15:21 評論0 收藏0
基礎知識：css3核心知識整理

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

kycool 2019-08-30 15:55 評論0 收藏0