1. 使用结构性伪类选择器使用结构性伪类选择器能够根据元素在文档中的位置选择元素。这类选择器都有一个冒号字符前缀(:),例如 :empty 。它们可以单独使用,也可以跟其他选择器组合使用,如: p:empty 。1.1 使用元素选择器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
文章目录一、CSS元素显示模式(一)块元素(二)行内元素(三)行内块元素(四)元素显示模式转换1.转化为块元素(display:block;)2.转化为行内元素(display:inline;)3.转化为行内块(display:inline-block;)单行文字垂直居中的小技巧总结二、CSS的三大特性(一)层叠性2.层叠性原则(二)继承性2.行高的继承性(三)优先级三、选择器权重 一、CSS
rem是如何实现布局的? rem是相对于元素,这样就意味着,我们只需要在元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。rem是什么? 说到rem自然就会想到em,我们知道em是相对于父元素的字体大小的单位,那么rem则是相对于元素也就是元素的字体大小的单位。上面说过rem是通过元素进行适配的,网页中的元素指的是html我们通过设置html的字体大小就可
转载 7天前
2阅读
  简单来说,如果想要在750px设计稿中 1rem = 40px(基准值),在100vw(设备视口总宽度)的屏幕中 1rem = a(文档元素html的字体大小),那么有:   750 / 40 = 100vw / a    => a = 100vw * (40 / 750)   => a = 100vw / (750 / 40)   => a = 100vw /
rem是什么? rem(font size of the root element)是指相对于元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖元素一个是依赖父元素计算。兼容性: 目前,IE9+,Firefox、Chrome、
之前写了前几章的测试题 javaScript的单元测试题,今天把剩下的写完。第七章理论测试题1、HTML文档的树状结构中,( )标签为文档的节点,位于结构中的最顶层。 A、 B、 C、 D、<br/> 答案:A<br/> 2、nodeType属性可用于获取节点类型,如果返回值为1,则表明该节点为( )。<br/> A、文本节点<br/
Vue 实例首先,我觉得这个问题要先从 Vue 的实例开始讲起。Vue 的实例一般都是长成下面这个样子,不同的只是 id 名的不同。<div id="app"></div>var vm = new Vue({ el: '#app', data: {}, methods: {} ... })这就是 Vue 实例的基本结构,并不陌生。从这里可以看
转载 5月前
26阅读
DOM下,HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法,利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性,DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型:接口nodeType常量nodeType值备注ElementNode.ELEMENT_NODE1元素节点TextNode.TEXT_NODE3文本节点Doc
效果以react 为例逻辑const eStyle = useRef<HTMLElement>(document.createElement("style"));const eHead = useMemo<HTMLHeadElement | null>( () => document.querySelector("head"), []);const handleC
原创 2023-02-14 08:43:54
161阅读
方案需求: rem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题,我们需要动态的给文档的节点添加font-size 值。 使用mediaquery 可以解决这个问题,但是每一个文件都引用一大串的font-size 值很繁琐,而且值也不能达到连续的效果。 就使用js动态计算给
转载 2022-02-23 15:09:22
977阅读
响应式布局和自适应写网页时,经常要求要适配不同屏幕,要求可以在大屏幕,ipad,手机上可以显示正常。对于公司的官网这是很重要的。那么,这就涉及到了响应式布局和自适应。 文章目录响应式布局和自适应前言一、响应式布局二、自适应字体大小rem方案一:postcss-px2rem+setRem()方案二:flexible和 postcss-px2rem总结 前言如果对网站的适应方面要求多的话,例如移动端
remCSS3新引入的单位,它改良了往期版本中em单位使用不方便的缺点。(如果想了解em单位的更多信息,可以查看之前的文章:CSS中的em单位)一、em单位带来的问题我们知道,em的长度是根据元素自身的font-size大小来确定的:1em = 元素中文本的1个垂直高度如果元素自身没有设置font-size,那么em的长度将根据父元素的font-size来确定。另外,元素自身的font-size
转载 2月前
82阅读
/* px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem:相对单位,可理解为”root em”, 相对节点html的字体大小来计算,CSS3新加属性,ch ...
转载 2021-10-12 09:09:00
861阅读
思考1. 页面布局文字能否随着屏幕大小变化而变化?2. 流式布局和flex布局主要针对于宽度布局,那高度如何设置?3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?一、rem 基础rem 单位rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,元素(html)设置font-size=12px; 非元素设置
1.什么叫REM     rem(font size of the root element)是指相对于元素(html标签)的字体大小的单位。 2.REM有什么用?    现在我们在制作网页的时候,用PX单位+百分比。在到放大和缩放,会看到样式混乱,部分换行错误等问题。这样制作的网页只能
本文,我们将探讨 CSS 中使用t,即 Root EM。
原创 2023-05-20 02:26:32
62阅读
pt是绝对长度,px是相对的, 我现在创建了一个图片A,A的分辨率为1400px .px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便;pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;字体大小的设置单位,常用的有2种:px、pt。这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;pt就是poin
px\em\rem三者介绍pxpx像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。emem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。因此,为了换算方便,通常我们会在HTML的元素设置:ht
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、计算机存储的底层知识二、图片1.图片像素2.图片存储类型(图片深度)总结 前言学习计算机视觉两年多了,发现最底层的图像知识始终没有搞透彻,今天借着这篇博客把自己所查阅的资料和尝试的计算做一个记录。一、计算机存储的底层知识计算机用二进制存储和表示数字,基本单位为字节B(Byte),最小单位是位(bit)。8位bit组成
使用rem进行字体大小调整的主要问题是使用这些值有些困难。让我们看一个以rem单位表示的常见字体大小的示例,当然,假定基本大小为16px:报表广告10px = 0.625rem12px = 0.75rem14px = 0.875rem16px = 1rem(基本)18px = 1.125rem20px = 1.25rem24px = 1.5rem30px = 1.875rem32px = 2rem
  • 1
  • 2
  • 3
  • 4
  • 5