畫乙個皮卡丘專案小結(1)

2022-08-30 17:54:13 字數 565 閱讀 8515

今天開始做乙個 畫皮卡丘的專案,所以總結一下過程中學到的一些新知識。

設定盒模型為 ie盒模型:

*

*::after, *::before

通過flex布局,形成絕對居中的效果:

body
通過相對定位和絕對定位,形成水平居中:

width: 100%;

height: 165px;

border: 1px solid red;

position: relative; /*注釋4:和絕對定位配合,實現水平居中*/

}.nose

.nose
.nose
.eye

.eye.left

.eye
.eye::before
1 border-radius圓角詳解;

2 詳解 css屬性::before & ::after;

畫乙個皮卡丘專案小結(3)

繼續總結過程中學到的新知識,這是第3部分。預設框架樣式 引入跟隨展示效果 樣式 after body flex 1 height 50 使code部分佔高度一半 padding 10px flex 1 height 50 使效果展示部分佔高度一半 preview width 100 height 1...

畫乙個皮卡丘專案小結(2)

繼續總結過程中學到的新知識,這是第2部分。upperlip upperlip.left.lowerlip設定容器絕對定位 height 110px 設定框的高度,使框的高度與 相對元素底對齊 width 300px position absolute bottom 0 距離相對元素下面0,即上移至 ...

畫乙隻動態的皮卡丘(二)

繼續總結過程中學到的新知識,這是第2部分。upperlip upperlip.left.lowerlip設定容器絕對定位 height 110px 設定框的高度,使框的高度與 相對元素底對齊 width 300px position absolute bottom 0 距離相對元素下面0,即上移至 ...