网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
CSS中的px 和 %
px
(pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响。%
(percentage) 是相对单位,代表元素大小相对于其父元素或视口(viewport
)的大小的百分比。使用百分比可以让元素随着屏幕大小或父元素大小的变化而自动调整大小。
选择使用哪种单位取决于您的需求和项目的要求。通常情况下,固定大小的元素(如图像)使用 px
,而相对大小的元素(如布局)使用%
。
案例描述:
以上是描述盒子居中的过程。
1、box2
由初始状态通过step1
,盒子的定位类型变成了绝对定位元素,此时left: 50%
和top: 50%
两个属性值将**盒子的原点(0, 0)**移到了父元素(这里指box1
)的中心位置。这里的50%
是相对于父元素的,也就是相对于盒子box1
, 通过换算得到:left:100px;top:100px;
代表的含义是:盒子的原点在X
轴水平方向向右向移动的100px
, 在Y
轴的垂直方向向下移动了100px
。
2、box2
由step1
到step2
, 通过margin-left: -50px;margin-top: -50px;
使得盒子在X
轴的水平方向向左移动了50px
,在Y
轴的垂直方向向上移动了50px
; ** 使得父盒子和子盒子的圆心重合**,至此盒子居中过程结束。
在此我先介绍一下
CSS
中的坐标系统:坐标轴不只是存在于数学中,它同样存在于
Web
世界中。在Web
中,我们常称之为Web
坐标轴 或CSS
坐标系统 。在
Web
中,默认原点是给定上下文的左上角,也就是元素盒子的左上角,它分为x
轴(也称为水平轴),向右为正值,向左为负值;y
轴(垂直轴),向上为负值,向下为正值:
CSS中的 em 和 rem
em
是相对单位,代表元素的字体大小相对于其父元素的字体大小。因此,如果父元素的字体大小变化,则em
单位的大小也会随之变化。rem
(root em)也是一种相对单位,但它代表元素的字体大小相对于根元素(通常是<html>
元素)的字体大小。因此,即使父元素的字体大小变化,rem
单位的大小也不会随之变化。
两种单位都可以用于设置字体大小、边距等元素的大小,但选择使用哪种单位取决于您的需求和项目的要求。通常情况下,使用 rem
更好,因为它提供了更好的可维护性和可读性。
案例描述:
在以上案例中:我设置的html
根节点的字体大小font-size:15px
,其中状态1、状态2、状态3 都各不相同。
下面我们来看看在浏览器中他们各自的属性:
- 状态1中p标签的属性:
font-size: 20px;
- 状态2中p标签的属性:
// <p style="text-indent: 2em;"><span>我是天界程序员</span></p>
font-size:20px;
text-indent:40px;
// <p style="text-indent: 2rem;"><span>我同时也是一个社畜</span></p>
font-size:20px;
text-indent:30px;
深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上鸿蒙开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**