頁面渲染時,dom元素所採用的 佈局模型,能夠經過 box-sizing
進行設置,根據計算高度的區域可分爲:css
content-box
(W3C 標準盒模型)border-box
(IE盒模型)1,content-box
中,元素的寬,高包含元素的 padding,border瀏覽器
// div大小爲 140 * 140,內容盒大小爲 100 * 100 div { width: 100px; height: 100px; padding: 10px; border: solid 10px black; }
2,border-box
中,元素的寬,高不包含元素的padding,border,margindom
// div大小爲 100 * 100,內容盒大小爲 60 * 60 div { width: 100px; height: 100px; padding: 10px; box-sizing: border-box; border: solid 10px black; }
!important
> 行內樣式
> ID選擇器
> 類選擇器
> 標籤
> 通配符
> 繼承
> 瀏覽器默認屬性
從右往左
解析visibility
cursor
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-align
text-indent
1,水平居中佈局
// 行內元素,在父元素上設置 text-align 便可 div { text-align: center; } // 塊級元素,設置 margin div { margin: 0 auto; } // absolute + transform 結合使用 div { position: relative; div { position: absolute; left: 50%; transform: translate(-50%, 0); } } // flex + justify-content: center div { display: flex; justify-content: center; }
2,垂直居中flex
// 行內元素:line-height div { height: 20px; line-height: 20px; } // absolute + transform div { position: relative; div { position: absolute; top: 50%; transform: translate(0, -50%); } } // flex + align-items: center div { display: flex; align-items: center; } // table div { display: table-cell; vertical-align: center; }
3,水平垂直居中動畫
// absolute + transform div { position: relative; div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } // flex + justify-content + align-items div { display: flex; align-items: center; justify-content: center; }
塊格式化上下文(Block Formatting Context,BFC)
是Web頁面的可視化CSS渲染的一部分,是塊盒子的佈局過程發生的區域,也是浮動元素與其餘元素交互的區域。spa
下列方式會建立塊格式化上下文:code
根元素
float屬性不爲none
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible
佈局規則orm
內部的Box會在垂直方向,一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時,浮動元素也參與計算
經過 clear:both 清除浮動
父級設置高度
建立父級 BFC
animation:幀動畫blog
animation-name
:綁定到選擇器的 keyframe 名稱animation-duration
:完成動畫所花費的時間,以秒或毫秒計animation-timing-function
:動畫的速度曲線animation-delay
:動畫開始以前的延遲animation-iteration-count
:動畫的播放次數animation-direction
:是否輪流反向播放動畫transition:過渡動畫
transition-property
:過渡效果的 CSS 屬性的名稱transition-duration
:完成過渡效果所須要的時間transition-timing-function
:速度曲線transition-delay
:動畫延遲時間以上爲大概能想到的經常使用 CSS 屬性,簡單的總結下,水文一篇,後續持續補充完善~