首页 > TAG信息列表 > 24px
px、rem、em、rpx 的区别及应用场景
px 像素单位，相对于显示器屏幕的分辨率 特点：设置字体大小和宽度比较精确和稳定，但不适用浏览器缩放时产生的变化 rem 是CSS3新增的单位，参考对象为<html>标签的font-size值， 如：html {font-size: 24px}，1rem = 24px 特点： 适用于做适配，响应式的网站 em 参考对象为父元素的字体大小JavaScript: sprite
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content=Web实现：图标加文字 伪元素实现 一般实现
图标加文字的两种实现方式： 第一种方式：插入背景图 HTML部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例</title> <link rel="stylesheet" href="index.css"> &前端学习记录6
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> #camera { width: 24px; height: 24px; border: 1px solid; margin: 100px auto 0; b【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）
前言 Hello！小伙伴！ 非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称：海轰 标签：程序猿｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 +css详解background八大属性及其含义
background（背景） 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content） 4部分组成，不过这只是从2D的视角来看盒模型的组成，而今天笔者将阐述如何从3D的视角看待盒模型的组成。 从2D视角看vue外卖十七：商家详情-cartControl组件：购物车加减商品页面及功能
一、基础页面 1.创建静态页面+接收props传值src/components/CartControl/cartControl.vue <template> <div class="cartcontrol"> <div class="iconfont icon-remove_circle_outline"></div> <div class="cart-count"&gVue 父组件向子组件动态传style样式
父组件： DOM部分 <el-table-column prop="img" :label="label" width="180"> <template slot-scope="scope"> <div class="img-wrap"> <img v-lazy="scope.row.albureact项目中实现悬浮（hover）在按钮上时在旁边显示提示
<i className={classNames({ 'device-icon': true, 'camera-icon': true, 'camera-icon-hover-show-intro': this.state.shouldVolumeGainBarShow === false, accss完成下图
<div></div> div{ height: 48px; width: 80px; padding: 0 16px 0 32px; background: rgba(0,0,0,.6); position: relative; overflow: hidden; } div:after{ display: block; content: ""; height: