CSS基礎知識點整理筆記

怎么理解盒子模型

答案解析

html的每個元素都可以理解成是一個盒子，包含內容有margin、border、padding、content4個屬性。盒子模型常見有兩種w3c 標準模型，IE模型。其中標準模型：width是指的content的寬度，而IE模型是指的content + padding + border的總和。

在開發(fā)過程中 我們會通過通配符+box-sizing ,將元素的標準統(tǒng)一，解決不同瀏覽器的兼容問題 ，box-sizing可選屬性：content-box（content）、border-box（content + border）、padding-box（content + border + padding）。

拓展知識點 margin屬性：

• 行內元素是沒有上下外邊距的，只有左右外邊距，所以盡量不要設置行內元素的內外上下邊距，設計寬高也是無效的

• 兩個相鄰的塊級元素一個設置了margin-bottom、另一個設置margin-top的時候，會發(fā)生外邊距塌陷。兩個元素之間的margin值會合并，margin值最終取較大值。

• 嵌套塊元素垂直邊距合并，當父級元素沒有設置border、padding的情況下，父子元素的margin邊距會合并，其取值為較大值

css3的新特性

答案解析

常用css3新特性：動畫屬性animation、彈性布局盒子、顏色設置支持rgba、媒體查詢@media、盒子屬性定義、形狀轉換transform、text的相關屬性（超出內容換行、超出內容展示形式）

 div{      overflow:hidden;      text-overflow:ellipsis;      white-space:nowrap; }

css3的 position

答案解析

說一下css3的選擇器有那些，以及優(yōu)先級

答案解析：

css的選擇器有：標簽、類、ID、全局、組合、后代、兄弟、偽類、偽元素選擇器。

css的優(yōu)先級：

!important > 行內樣式 > ID選擇器 > 類選擇器 >  標簽 > 通配符 > 繼承 >   瀏覽器默認屬性 
復制代碼

css選擇器的權重計算規(guī)則

• 第一等：代表內聯(lián)樣式，如：style = '' ,權值為1000

• 第二等：代表ID選擇器，如：#content ,權值為0100

• 第三等：代表類、偽類、屬性選擇器，如：.content 權值0010

• 第四等：代表標簽選擇器和偽元素選擇器，如div、p ，權值0001

• 通配符、子選擇器、相鄰選擇器。如<、>、+ 權值為0000

• 繼承樣式無權值、!important 最高權值

css選擇器符號表示

• , 選擇器分組，每組的樣式一致

• * 通配符，表示可以與任何元素匹配

• # ID選擇器

• [] 屬性選擇器 ，例如：[href],[title]

• div p 定義后代選擇器

• div > p 定義子元素選擇器

• p + li 相鄰兄弟選擇器，兩者有相同元素，選擇的是前一個選擇器相鄰的后一個選擇器

講一下css3的彈性布局

答案解析：

彈性布局是css3的新屬性，是一種當頁面需要去適應不同類型和屏幕大小時確保元素能夠具有恰當行為的布局。作用是能夠提供一個有效的幫助我們管理一個容器中子元素的排列、對齊和分配空白空間。

彈性布局父元素屬性

• flex-direction ：row / row-reserve / column / column-reserve (排序方式)

• flex-wrap : nowrap / wrap / wrap-reserve （超出是否換行）

• align-items : flex-start / center / flex-end / baseline （縱向對齊方式）

• justify-center : flex-start / center / flex-end / baseline （橫向對齊方式）

彈性布局子元素屬性

• order: 改變排序順序的位置，默認為0，從小到大排

• flex: flex-grow flex-shrink flex-basis ( 元素占比 元素壓縮量 初始元素長度）

BFC是什么?怎么觸發(fā)BFC?

答案解析：

BFC是指塊級格式化上下文，決定了元素如何對其內容進行定位、以及與其他元素的關系和相互作用。可以用來解決子元素浮動，父元素的高度沒有了、兩欄布局右欄不自適應、垂直方向上兩元素邊距有誤等情況。

觸發(fā)情況：

• float不為none

• position不為relative或者static

• overflow為auto 、scroll或者hidden

• display為inline-block

觸發(fā)后作用

• 解決浮動·子元素導致父元素塌陷

• 實現(xiàn)兩欄自適應的問題

• 外邊距垂直方向重合的問題

都是利用觸發(fā)BFC，使得元素有自己獨立空間

如何清除浮動？

答案解析：

清除浮動是指的是父元素中的子元素設置float導致父元素的高度為0的情況

解決方案

• 父元素設置屬性為：overflow:hidden (實質是觸發(fā)BFC)

• 父元素中增加一個新的元素，添加屬性 clear:both

• 父元素增肌偽類 ::after，設置{content:"",clear:both}

css實現(xiàn)水平垂直居中

答案解析：

塊級元素未知寬高情況下

• 利用彈性布局

.parent{  diplay:flex;  justify-content: center;  //實現(xiàn)橫軸  align-items:center;}復制代碼

• 使用絕對定位

.child{    position:absolute;    top:0;    left:0;    right:0;    bottom:0;    margin:auto;}

• 利用transform屬性 + 絕對定位

.child{    position:absolute;    top:50%;    left:50%;    transform:translate(-50%,-50%); //根據本身元素}

• 使用table表格法

.parent{     display:table;     width:300px;     height:300px; } .child{     display:table-cell;     vertical-align:middle;     text-align:center; }

已知寬高實現(xiàn)水平垂直居中

• 使用line-height與height相同、以及text-align:center

• 使用絕對定位+margin負值偏移

css3的動畫屬性

答案解析

• animation

animation :animation-name  animation-duration animation-timing-function  animation-delay animation-iteration-count ；分別表示動畫名 （與@keyframes對應）、動畫持續(xù)時間、動畫執(zhí)行速度、動畫延遲時間、動畫循環(huán)規(guī)律

• transform

 1) rotate旋轉 transform ：rotate(20deg) //旋轉角度 transform-origin：50% 50% //定義旋轉基點 2) translate移動 translate:translate(20px,10px) translate:translateX(20px) translate:translateY(30px) 3) scale 縮放 transform-origin：50% 50% //定義縮放基點 translate:scale(20px,10px) translate:scaleX(20px) translate:scaleY(30px)

因為可能有些瀏覽器不兼容這些屬性，所以需要加上瀏覽器前綴：-wekit-、-ms-、-moz-、-o- : 谷歌、IE9、火狐、Opera

頁面導入樣式時，使用link和@import有什么區(qū)別？

答案解析：

• link是XHML標簽，除了加載css文件，還可以加載RSS得其他事務，而@import 只能加載css

• link無瀏覽器兼容問題，import在低版本瀏覽器下支持

• link標簽引用css文件的時候在頁面載入同時加載；@import只能等頁面完全載入以后加載

z-index、層疊屬性

• z-index屬性的局限性：只能在定位元素上有效果

• 判斷元素在Z軸上的堆疊順序，不僅僅是直接比較兩個元素的z-index值的大小，堆疊順序和層疊上下文、層疊等級共同決定。

• 層疊上下文的產生方法有：設置定位元素position且非static值并設置z-index屬性的具體數(shù)值、transform屬性值不是none、父元素的display屬性值為flex,子元素z-index不為auto

css的flex的屬性分別表示什么

 flex:<flex-grow> <flex-shrink> <flex-basis>  //默認值 flex:0 1 auto

• flex-grow: 默認0，定義子元素相對于其他子元素在元素分配完還有剩余空間情況下的放大比例

• flex-shrink:默認1，定義子元素相對于其他子元素在父元素空間不足時相對于其他子元素的縮放比例

• flex-basis：默認為auto

css會阻塞渲染嗎？

1. css不會阻塞dom樹的解析

2. css會阻塞dom樹的渲染

3. css加載會阻塞后面js的執(zhí)行

原因如：瀏覽器渲染頁面的過程分析

結構偽類選擇器有哪些

參考文章

less和scss、以及css的區(qū)別

less和scss都是屬于css的預處理器。

• 用來為css增加一些編程的特性，無需考慮瀏覽器的兼容性問題

• 同時擴展了@import指令的能力，通過編譯環(huán)節(jié)將切分后的文件重新合并一個大文件。這一方面解決了大文件不便維護的問題，另一方面也解決了一堆文件在加載時的性能問題

例如在css使用變量、簡單的程序邏輯、函數(shù)等等在編程語言中的一些基本技巧，可以讓我們的css更加簡潔、適應性更強，代碼直觀

box-shadow屬性詳解

box-shadow：offset-x  offset-y blur spread color position//從左到右表示：x軸偏移量、y軸偏移量、陰影的模糊半徑、陰影擴展半徑、顏色、陰影位置（默認外陰影，設為inset則表示內陰影）

偽類和偽元素的區(qū)別

• 偽元素 是用來創(chuàng)建一些不存在原有dom結構樹中的元素。例如::before、::after在一些存在的元素添加內容，會以具體的UI顯示出來，但是這些內容不會出現(xiàn)在dom

• 偽類 是表示已存在的某個元素處于某種狀態(tài)，但是通過dom樹又無法表示出不同狀態(tài)下的樣式。

區(qū)別：偽元素的操作對象是新生的元素，而不是原來dom結構里就存在的；而偽類的操作對象是原來dom結構就存在的元素

css中那些屬性可以繼承

• 字體系列

1. font-family

2. font-size

3. font-style

• 文本系列屬性

1. text-indent:文本縮進

2. text-align:文本水平對齊

3. line-height:行高

• 元素可見性

1. visibility:控制元素的顯示隱藏

• 列表布局屬性

1. list-style:列表風格

• 光標屬性