css簡單的梳理總結

2021-08-26 14:47:04 字數 2001 閱讀 3067

層疊字型

常規流/正常流 normal flow

脫離正常流

包含塊 containing block

浮動元素

定位元素

根元素的包含塊是初始包含塊,即視口

布局/格式化/上下文

格式化分類

垂直方向

行內格式化

就是乙個塊級元素的每一行內容都是如何布局和生成的

水平方向

然後像塊級元素一樣堆疊擺放

行元素元素水平方向上的m,p,b,w都會影響布局

垂直方向

內容區/框,em框的集合即為內容區

行內框:

行框 行內框在垂直方向的位置由vertical-align屬性控制

行內替換元素的基本被認為margin-bottom的下邊緣

百分比 乘以line-height後上或下移動

絕對數值 上或下移

top 該元素的行內框頂部對著本行行框頂部

bottom同上相反

middle 該元素的行內框的中間對著baseline上方0.5ex的位置

text-top 該元素的行內框頂部對著本行匿名文字的內容框的頂部

行內替換元素(img)

往往是有內在寬高的

設定了寬或高,另一方向的維度會自動變化

是以margin-box外邊緣為行內框的

行內塊元素(inline-block)

*

浮動格式化

浮動元素會自動變成block

浮動不能與除position: static/relative;同時使用

先浮動再定位

浮動元素【半脫離】常規流

浮動元素的擺放

浮動元素會盡量往浮動方向移動

浮動元素會在上,左,右方不超出包含塊

當浮動元素的寬度大於包含塊的寬度時,會超其包含塊的左右

浮動元素的高度也不能超過其前面的任意浮動元素

浮動元素的高度還不能超其所在行行框的最高點

常規流塊級元素會當浮動元素不存在(不考慮clear)

行內元素會繞著浮動元素渲染

清除浮動

被設定了clear屬性的block元素會往下移動直至其border-box的上邊緣與某個方向上的浮動元素margin-box的下邊緣在同一高度

閉合浮動 enclosing float

2 觸發包含塊的bfc

block format context 塊級格式化上下文

定位不同定位方式

使用top,left,right,bottom來設定元素的位置

定位盒子

flex

flex container: display:flex

flex item: flex container的直接子元素

元素是預設是先按主軸方向排列

主軸方向空間不夠的話向側軸方向移動

主軸和側軸方向可以分別使用

空間分配:

屬性簡寫

**2/3d變幻

變幻不影響布局

變幻一般會使用顯示卡圖形加速

transform-origin: 變幻不動點

transform-style 3d變幻,是否保留子元素的3d效果

變幻實際上都是由矩陣實現的。

變幻中的百分比數值都是相對於元素自身

rotate,skew,translate,

transition 漸變

trasition-property/delay/timing-function/duration

漸變要發生,元素必須得有transition

animation

可以查詢

rem移動端布局

不同裝置出廠設定的預設渲染寬度不一樣

有些裝置不能設定為純數值,只能使用device-width

想要按比例還原視覺稿

於是想要找乙個單位x,能夠使得1x = 1視覺稿畫素

只有rem有這個功能可以靈活縮放

css樣式種類的簡單梳理和使用

第一大類 預設樣式 bgcolor,不借助style 第二大類 外部樣式表 用style屬性 內部樣式表 用style屬性 style type text css 行內樣式表,用style屬性 background color 例1.預設樣式,注意不適用style 注意 優先順序高於背景色,會覆蓋顏...

CSS簡單總結

多篇文章的合併,向原作者致敬。color darkred b 一 hack b color align center img align 例如 style width 10px important width 20px 其在 ie7下寬度為10px,在ie6下寬度是20px.ie特有的html條件注...

CSS的簡單複習總結

如果說網頁是人的話那麼css就是化妝品了哈哈哈,所以網頁離不開css的裝飾。id選擇器和class選擇器 二者都是用來選擇元素進行裝飾的,我個人理解是類選擇器包含了id選擇器,class選擇器不進能選出單個元素還能還能選出一類元素。外部樣式表 在外部進行編寫 在 的 進行呼叫 內部樣式表 在網頁的中...