画一只动态皮卡丘（一）

最新推荐文章于 2024-08-21 10:03:05 发布

sunwan19941023

最新推荐文章于 2024-08-21 10:03:05 发布

阅读量756

点赞数 1

分类专栏：项目复习 CSS3

本文链接：https://blog.csdn.net/m0_49210479/article/details/108207585

版权

本文记录了一个画皮卡丘项目的初期阶段，主要介绍了如何设置盒模型为IE模式，运用flex布局实现元素的绝对居中，以及通过边框圆角技巧创建扇形和内部小圆的方法。内容涵盖水平居中、正方形转圆形、边框颜色调整等CSS知识点。

摘要由CSDN通过智能技术生成

前言

今天开始做一个画皮卡丘的项目，所以总结一下过程中学到的一些新知识。

一设置盒模型

设置盒模型为 IE盒模型：

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}


*::after, *::before{ /*注释1： css3伪元素*/

box-sizing: border-box;

}

二 flex布局

通过flex布局，形成绝对居中的效果：

body{

height: 100vh; /* 注释2：css3单位*/

border: 1px solid green;

display: flex; /*注释3： css3 flex布局*/

justify-content: center;

align-items: center;

}

三水平居中的方法：

通过相对定位和绝对定位，形成水平居中：

.wrapper{

width: 100%;

height: 165px;

border: 1px solid red;

position: relative; /*注释4：和绝对定位配合，实现水平居中*/

}


.nose{

width: 22px;

height: 22px;

background: black;

position: absolute; /*