css
文章平均质量分 74
zwkkkk1
这个作者很懒,什么都没留下…
展开
-
sass 中如何使用 calc 计算变量
问题描述问题很简单,在计算 vh 和 px 时,需要使用 calc() 函数例如,设置一个容器高度:height: calc(100vh - 60px);然而在开发过程中,一些有特殊意义的数字还是尽可能赋给 sass 变量,便于其他文件可以共用,比如上面的 60px 是个底部导航栏的高度,这就很多地方可能用上了,设一个 $tabbar-height然后改一下上面设置高度的语句:heig...原创 2019-11-21 17:54:14 · 5873 阅读 · 0 评论 -
h5页面适配 iPhoneX
h5页面如何适配 iPhoneX 的刘海屏与底部操作栏也变成了移动端开发所需要了解的常用知识,下面分享一篇 网页适配 iPhoneX 的经典好文网页适配 iPhoneX,就是这么简单使用 viewport-fit 和 env()、constant() 两种方法均能有效解决方案,可以根据项目的实际情况进行选择...原创 2019-10-08 19:54:23 · 510 阅读 · 0 评论 -
常见设计稿字体对应字重font-weight大小
在拿到 UI 设计稿时,可以经常看设计稿中常见的字体有 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold,并不会直接给我们 font-weight 的值。在这我们就需要知道常见字体和 font-weight 的对应关系详细可以看 font-weight 的介绍 传送门font-weight 属性执行字体中字形的重量,这取决于黑度等级或...原创 2019-08-27 19:57:39 · 14149 阅读 · 0 评论 -
CSS 文本溢出省略显示
实现文本显示单行或多行,超出部分用省略号显示是一个很常见的需求,在这里做个分享记录。(文末有 demo 演示~)单行溢出缩略下面是单行缩略的实现:overflow: hidden;text-overflow: ellipsis;white-space: nowrap;注:要在块级元素设置单行缩略很简单,唯一比较生疏的是 text-overflow: epllipsis;下面关于...原创 2018-11-21 17:15:24 · 579 阅读 · 0 评论 -
CSS 的相对单位 em 与 ex
相对单位之所以得名,是因为它们是根据与其他事物的关系来度量的,共有3种相对长度单位:em、ex 和 px。前两个单位代表 em-height 和 x-height,这是常用的印刷度量单位。而 px 代表“像素”,这个值被定义为相对单位,因为它取决于显示设备的分辨率。em在 CSS 中,em 定义为一种给定字体的 font-size 值。如果一个元素的 font-size: 14px,那么对...原创 2018-11-10 17:01:03 · 4469 阅读 · 0 评论 -
HTML 中的块级元素、行内元素、行内块级元素
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种,一般使用 display,进行三者的转换。display: inline; 将元素转换为行内元素;display: block; 将元素转换为块级元素;display: inline-block; 将元素转换为行内块级元素。行内元素(display: inline)特点: 1. 和其他元素都在一行上; ...原创 2018-05-09 10:16:49 · 1335 阅读 · 0 评论 -
CSS 实现水平居中与垂直居中
CSS 实现水平居中与垂直居中面试时遇到这个问题,当时答得很不全面,有必要做个总结。一、水平居中的实现1. 行内元素解决方案在行内元素的父级 block 元素加上 text-align: center; 即可。 2.块级元素解决方案在需要水平居中的块级元素设置 margin: 0 auto; 即可(含义为上下 margin 为 0,左右 margin 自动...原创 2018-04-12 18:07:44 · 536 阅读 · 0 评论 -
从 CSS 的权重规则看选择器及优先级
CSS中的选择器和优先级 这算是前端中基础的基础了,不过在面试中遇到答得不够完整,特意查了资料做个总结。 转自:https://www.cnblogs.com/zxjwlh/p/6213239.html一、CSS选择器分类CSS 中的选择器可以分为以下12类: 1. 标签选择器(如:body,div,p,ul,li) 2. 类选择器(如:class=”head”...原创 2018-04-12 16:20:49 · 577 阅读 · 0 评论 -
CSS 中的高度坍塌
首先,抛出一段代码引出本篇的主题:CSS 中的高度坍塌。 ps:代码可以复制出去运行哦~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高度塌陷</title><原创 2018-04-11 16:54:04 · 1250 阅读 · 0 评论 -
css的两种盒模型
前言初学 css 的时候 div 的一些宽高问题经常会引起一些不好理解的问题,这里做一个关于css盒模型的分享。 问题 下面的代码可以直接复制出去运行哦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl原创 2018-03-24 15:15:34 · 66705 阅读 · 7 评论 -
css揭秘 -- Sticky footers解决方案
最近在读《CSS Secrets》,结合网上的许多文章写了笔记,希望大家都能有所收获 注:《CSS Secrets》是 Lea Verou最新著作,这本书讲解了有关于CSS中的一些小秘密,是一本所有CSSer值得一读的一本书。我自身的感受是:这确实是多年难得一见的重磅CSS书籍,看得很过瘾,CSS进阶必读!问题 在网页设计中,存在一个相当古老但又相当常见的问题,它是前端...原创 2018-03-18 17:27:13 · 857 阅读 · 0 评论