rem、em和px都是CSS中用于设置元素尺寸的单位,它们的区别和计算方式如下:
相对单位 vs 绝对单位
px,像素,是一个绝对单位,它提供了一个具体的、固定的尺寸。1像素等于屏幕上的一个实际像素点,
2024年11月07日
rem、em和px都是CSS中用于设置元素尺寸的单位,它们的区别和计算方式如下:
px,像素,是一个绝对单位,它提供了一个具体的、固定的尺寸。1像素等于屏幕上的一个实际像素点,
2024年11月07日
一、px rem em区别
px
1.相对长度单位。相对于显示器屏幕分辨率而言。 2.存在浏览器不兼容问题。
em
1.相对长度单位。相对于当前对象内文本字体尺寸。 2.em值并不是固定的,em会继承父级元素的大小. 3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px;如果父级设置font-size为30px. 1em=30px. 2em=60px. 4.存在容易造成字体设置混乱问题。
2024年11月07日
1》原因
由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了
2》解决方法
一.在ios8+中当devicePixelRatio=2的时候使用0.5px
p{
border:1px solid #000;
}
@media (-webkit-min-device-pixel-ratio: 2) {
2024年11月07日
最近,在几个不同的群里都遇到有人在问同一个问题,如何使用 CSS 实现如下所示的单侧阴影:
也就是正常而言,阴影应该是出现在多条边上的,而现在,我们只希望阴影固定只能出现在某一侧。
单侧阴影其实是一个非常老生常谈的话题,在 CSS 中之前也有比较巧妙的方式实现。当然,CSS 发展到今天,我们有了更多种不同方式来实现单侧阴影这个需求。本文,我们一共会介绍现阶段,实现单侧阴影可行的三种方式:
2024年11月07日
# CSS 面试题
## 01. 盒模型
盒模型分为标准盒模型和怪异盒模型
- 标准盒模型:实际宽度由 宽度 + padding + border 组成(box-sizing: content-box)- 怪异盒模型:内容宽度为 定义的宽度 - padding - border(box-sizing: border-box)
## 02. 什么是文档流
文档流是元素在 web 页面上的一种呈现方式,按照出现的先后顺序进行排列
2024年11月07日
水平居中
1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
2) 若是块级元素, 该元素设置 margin:0 auto即可.
3) 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
2024年11月07日
css水平垂直居中方式
划重点啦!"css实现元素垂直水平居中"是一道前端工程师面试必考题,很多面试官都喜欢问这个问题。如图:
2024年11月07日
版权声明
本文首发自微信公共帐号: 学习学习再学习(xiaolai-xuexi); 无需授权即可转载,甚至无需保留以上版权声明; 转载时请务必注明作者。
Markdown Here是个浏览器插件(Chrome/Firefox/Safari),可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML。又由于它能自定义 CSS,于是,对我这种平时大量使用 Markdown 格式写作的人来说实在是一大福音 —— 可惜我刚刚才知道还有这么个浏览器插件…… 要不是有人在新生大学的 APP 里提起这事儿,我还不知道啥时候能知道呢。