層疊字型
常規流/正常流 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選擇器不進能選出單個元素還能還能選出一類元素。外部樣式表 在外部進行編寫 在 的 進行呼叫 內部樣式表 在網頁的中...