inline元素從左至右,位置不夠時,可能會將元素分為兩塊寬度由內部的inline元素的和決定不能指定寬度高度由line-height間接決定,與height無關
寬度預設自動計算,可以用width指定高度由內部文件流元素決定,可以設定height決定
從左至右,位置不夠時,不會將元素分為兩塊結合兩者的特點,可以用注意:現在不再區分width指定寬度,也可以用height設定高度
內聯元素和塊級元素,而是由display決定.千萬不要在inline元素中加block元素。overflow當內容的寬度或者高度大於容器的寬度或高度時,會產生溢位現象.
可用overflow屬性設定:
脫離文件流
當元素使用float和position屬性,都會使元素脫離文件流,脫離文件流後,父元素將不再計算其高度
float布局
寫法：float：left float：right
父元素中加入clearfix::after,是為了清除由於子元素進行浮動,導致父元素的高度塌陷的問題
在父元素中宣告display:flexflex-direction 主軸流動方向
row:預設值,從左至右flex-wrap 換行方式column:從上至下
row-reserve:從右至左
column-reserve:從下至上
nowrap:預設值,不換行justify-content 主軸對齊方式wrap:換行(常用)
wrap-reserve:頭尾交換的換行(基本不用)
flex-start:預設值,起點對齊align-items 側軸多行對齊方式flex-end:終點對齊
center:居中對其
space-between:兩端對齊,並使各個
item之間間隔相等space-around:在行內平均分配,各個
item之間的間隔的一半等於第乙個和最後乙個item到行首和行尾的間隔
flex-start:起點對齊align-content 多行對齊方式flex-end:終點對齊
center:居中對齊
stretch:預設值,如果專案未設定高度或設為auto,則佔滿容器高度
flex-start:起點對齊item 的屬性order排列順序flex-end:終點對齊
center:居中對齊
stretch:預設值,佔滿整個容器
space-between:兩端對齊,並使各個
item之間間隔相等space-around:在行內平均分配,各個
item之間的間隔的一半等於第乙個和最後乙個item到行首和行尾的間隔
預設為0,按照值的大小排列item的順序
.itemsflex-grow增長係數
預設值為0,負值沒有效,值數越大,行內佔的比例越大.
.itemsflex-shrink收縮係數
預設值為1,負值沒有效,值數越大,在寬度大於容器寬度時,在行內佔據的比例越小,為0時,不收縮
.itemsalign-self某個item的布局
.items怎麼宣告？
.containergrid使用。比如：建立了乙個三行五列的
grid**.
.container選取
grid**中的從上至下第一條線到第三條線中的格仔,並把它們的背景色改為紅色
.item類似於
flex中的flex-grow.可以指定佔據的比例
.containergrid-gap 間隙 指定格與格之間的間隙
.containergrid-template-area 分割槽
.container預設值,在文件流中
相對定位,比文件流要高一層,但不脫離文件流.
作用:用於做位移(很少用)
用來做absolute的父元素
配合z-index
關閉對話方塊按鈕
滑鼠提示文字
配合z-index
注意:某些瀏覽器不寫上top,left會導致位置錯亂
善用left:50%,加-margin:width/2或者transform:translatex(-50%)一般用了absolute都要在父元素中補乙個relative
固定定位,定位的基準是粘滯定位viewport(視口),但當父元素中使用了transform:scale屬性,將會出錯.作用:1. 邊欄廣告 2. 返回頂部按鈕 3. 配合`z-index` 複製**
注意: 手機上盡量不要使用,很多bug
作用: 滑動到頂部時,粘滯在頂部的導航欄
注意: 相容性很差
transform
scale(scalex,scaley) 沿x軸和y軸上縮放
skew(skewx,skewy) 沿x軸和y軸上傾斜
transition
基本語法：
transition:property duration timing-function delay;animation基本語法：
animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name定位元素(z-index=1) > 文字(內聯子元素) > 浮動元素 > 塊級元素 > 邊框(border) > 背景(background) > 定位元素(z-index=-1) > html1、根據注意:每乙個層疊上下文就是乙個小世界,只有同乙個小世界才能夠進行比較,小世界裡的z-index與小世界外的z-index無關
哪些屬性可以建立層疊上下文:z-index部位auto,並有 relative/absolute/fixedopacitytransformhtml 元素
html,構建乙個html樹(dom)
2、 根據css,構建乙個css樹(cssom)
3、將兩根樹合併,成為一棵渲染樹(render tree)
4、layout 布局(文件流,盒模型,計算大小和位置)
5、paint 繪製(把邊框顏色,文字顏色,陰影等繪製)
6、compose 合成(根據層疊關係展示畫面)
css x軸不滾動 CSS個人總結筆記（收藏吧）
內部樣式要寫在標籤之間 link這個也要放在之間 第一種 import 直接寫css檔案路徑 第二種 import url 寫樣式表檔案路徑 一 選擇器 1.派生選擇器 例如 選擇div裡面的span div span 哈哈哈 2.還有 列如 p和a 都選擇 p,a 你好1 你好 二 背景顏色 ba...
css知識總結
background color 背景顏色。background image 元素的背景影象.background repeat 水平方向平鋪 repeat x background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動 background position 屬性改變影...
CSS知識總結
基本流程 解析html以構建dom樹 構建render樹 布局render樹 繪製render樹,如下圖 名稱解釋 注意 display none 的節點不會被加入render tree，而visibility hidden 則會，所以，如果某個節點最開始是不顯示的，設為display none是更...