今天開始做乙個 畫皮卡丘的專案,所以總結一下過程中學到的一些新知識。
設定盒模型為 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,即上移至 ...