css 平移到某個位置 CSS知識總結

本週學習了css布局、定位、動畫，方老師解答了很多之前學習中遇到的疑惑，點撥了css學習方法和思路，受益匪淺！！

根據html構建html樹（dom）

根據css構建css樹（cssom）

將兩棵樹合併形成渲染樹（render tree）

layout布局（文件流、盒模型、計算大小和位置）

paint繪製（繪製邊框顏色、陰影、文字顏色等）

composite合成（根據層疊關係展示畫面）

一般通過js操作css進行樣式更新，有三種樣式更新方式：

三種樣式更新方式

第一種布局、繪製、合成全走一遍，如刪除某個元素div.remove()，其他元素relayout；

第二種跳過布局，如改變背景顏色；

第三種跳過布局和繪製，如新增transform屬性。

當然渲染過程中瀏覽器走的步驟越少越好，所以在進行簡單平移動畫時，left（走三步）就不如選用transform。（特殊情況的話，小白的我就不懂了）

已經有大佬做了**如下，感激～

和 animation都可以實現動畫效果，一般情況下，animation更好用。

以實現方塊box兩次平移（0，0）=>(200px,0)=>（200px,100px）舉例對比：

1.使用transition步驟

定義類a，用於第一次平移到（200px，0）

.a

.b

給box新增transition：transform 1s實現動畫過渡，最終實現！太複雜了～

2.使用animation步驟

宣告關鍵幀：

@keyframes move

50% /*第1秒內向右平移200px*/
100% /*第2秒內向下平移100px*/
}

#box

複習一下基礎知識：

內聯： 塊

內聯塊左右不存在margin合併

阻止方式：

1.兄弟合併

inline-block

2.父子合併

css布局選擇套路

float布局用法：子元素加float（並給定寬度），父元素上加.clearfix；

配合負margin進行平均布局（-margin是加在新增的中間圖層上！）

受邊框寬度影響時，可用outline替換border

實現居中時，margin-left / margin-right：auto 相比margin：0 auto更準確

.clearfix:after

flex要點：

grid要點：

布局結果

可以用frgrid-template-columns: fr fr 50px fr

增加間隙：

position取值：

預設static

relative相對定位，公升起來，不脫離文件流

absolut絕對定位，脫離文件流，定位基準是祖先裡非static元素

fixed固定定位，定位基準是視口（有詐，啥忘記了）；手機端慎用！

sticky粘滯定位，現在移動裝置相容性已經不錯了（來自mdn），指定top/right/bottom/left

層疊上下文：

具體查mdn，要點：

每個層疊上下文就是乙個新的小世界，這小世界裡面的z-index和外界無關，同乙個世界裡比較z-index才有意義。

負z-index可能逃不出小世界（無法到背景下面）

可以建立小世界的有：

1、css是藝術，不要用理性思維

2、 要死記硬背，很多不正交地方

3、crm學習法，多敲**

css 平移到某個位置 CSS3平移動畫效果

在這篇文章中主要是講如何通過css3實現平移動畫效果，在開始之前先給大家介紹一下與平移動畫有關的css3屬性以及相關的屬性描述。一 transition property 是用來指定當元素其中乙個屬性改變時執行transition效果 例如 長度，寬度，顏色等 二 transition durati...

css 平移到某個位置 CSS 的常用屬性速查表

要想寫出優美的 css 作品，想象力固然很重要，然而基礎也是不可忽略的。元素本身，p 類，p.class id，p id 後代，ul li 屬性，input type checkbox 相鄰元素，input label 全選，偽類，用於選擇特定狀態下的元素 hover 滑鼠懸浮狀態 focus 元素...

如何知道某個java類從哪個位置載入？

1.如果可以除錯或加入print語句，那麼可以通過class.getprotectiondomain getcodesource getlocation 返回的url得知。2.如果不能除錯，可以重啟jvm，那麼可以新增jvm啟動引數 verbose class 或 xx traceclassload...