CSS其实如此强大
关注
分享
扫一扫
CSS其实如此强大
静尾
前端开发工程师
展开
-
css中的@import与sass中的@import的区别
css中的@import与sass中的@import的区别二者的功能都是在css文件中导入其他css文件。css中的@import会在浏览器执行到这句话时才将导入的css文件下载下来并解析，这会拖慢网页的加载速度。而sass中的@import会在其生成css文件时就将相关文件下载并解析进生成的css文件中，无需发起额外的下载请求。...原创 2021-03-06 11:46:05 · 969 阅读 · 0 评论 -
Scss学习笔记
Scss学习笔记文章目录Scss学习笔记变量：嵌套：父选择器的标识符&:群组选择器的嵌套:子组合选择器和同层组合选择器：>、+和~嵌套属性导入SASS文件css和sass的关系scss和css的关系sass和scss的关系混合器变量：$nav-color: #F90;nav { $width: 100px; width: $width; color: $nav-color;}//编译后nav { width: 100px; color: #F90;}原创 2021-02-06 14:22:13 · 306 阅读 · 0 评论 -
背景图片在屏幕分辨率变化时，以图片中心为基点来缩放变化
背景图片在屏幕分辨率变化时，以图片中心为基点来缩放变化.content-image { width: 100%; height: 200px; background-image: url(./548.png); background-size: cover;/*保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小，超出部分被裁减*/ background-position: center;/*设置背景图像的起始位置*/}...原创 2021-01-11 17:27:00 · 524 阅读 · 0 评论 -
解决有些浏览器rem不以html的font-size为基准问题
解决有些浏览器rem不以html的font-size为基准问题文章目录解决有些浏览器rem不以html的font-size为基准问题问题原因：解决办法：有关rem以及其他长度单位（px，em，vw…）请移步：通俗易懂——css长度单位：px、em、rem、vh、vw、in、…问题原因：各大浏览器的最小字体限制不同：google为6pxfirefox、Edge、IE（5 7 8 9 10）Safari为0pxOpera、搜狗浏览器、360浏览器、为12px等有关更多浏览器最小字体与默认原创 2021-01-11 11:06:30 · 2187 阅读 · 3 评论 -
炫彩的按钮渐变动画——css3
炫彩的按钮渐变动画——css3效果（是动态的）：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style原创 2021-01-06 11:14:11 · 469 阅读 · 0 评论 -
自己也可以写栅格化系统——css实现响应式布局
自己也可以写栅格化系统——css实现响应式布局用媒体查询（@media）实现屏幕分辨率与各种设备之间的关系：设备屏幕分辨率大屏电脑（台式）width > 1200px小屏电脑（笔记本）1200px >= width > 992px平板电脑992px >= width > 768px手机width <= 768px以著名的bootstrap的栅格化系统为例，每行分12列，且优先移动端：注：.col-yd-…：原创 2020-12-29 17:18:25 · 585 阅读 · 0 评论 -
css实现文字大小随着页面大小变化而改变大小
css实现文字大小随着页面大小变化而改变大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html { fon原创 2020-12-28 10:00:57 · 19398 阅读 · 0 评论 -
css选择器权重的计算规则
css选择器权重的计算规则选择器权重!importantInfinity行间样式1000id100class/属性/伪类10标签/伪元素1通配符0举例：#app .div1 > span {/*权重计算：100 + 10 + 1 = 111*/ }.div2 > div > input[tyle="checkbox"] {/*权重计算：10 + 1 + 1 + 10 = 22*/原创 2020-12-18 17:12:12 · 160 阅读 · 4 评论 -
神奇的box-sizing——不同类型的盒模型
神奇的box-sizing——不同类型的盒模型标准盒模型：为元素设置box-sizing属性的不同值，会有不同的盒模型来体现：box-sizing可取的值为：content-box：width = contentWidthborder-box：width = margin-right + border-width + padding-left + contentWidth + padding-right + border-width + margin-rightinherit：继承父元素原创 2020-12-18 16:44:53 · 375 阅读 · 2 评论 -
css选择器的性能分析——如何编写高性能的css代码
css选择器的性能分析——如何编写高性能的css代码css所有选择器的性能由高到低排行为：idclass标签选择器（div）（span）（…）相邻选择器（div + span）子元素选择器（div > span）后代选择器（div span）（消耗性能，下面会有讲解）通配符选择器（*）属性选择器（input[type=“checkbox”]）伪类选择器（a:hover）所以编写css时要尽量避免使用性能低的选择器，能用高性能选择器代替一定要用高性能选择器。选择器性能不高的原原创 2020-12-18 15:24:43 · 500 阅读 · 0 评论 -
CSS选择器的匹配规则，你真的了解吗？
CSS选择器的匹配规则，你真的了解吗？大部分人第一感觉肯定会认为是从左往右来解析css的，因为那样很符合常理，但现实却恰恰相反，浏览器是从右往左来解析css的。那么为什么呢？这样做一定有它的道理，下面我用一个非常简单的例子来解释一下：我们先来看一个简单的css代码： <style> .parent .child2 .sun2-1 { color: red; } </style> <div cl原创 2020-12-18 14:10:12 · 448 阅读 · 0 评论 -
让元素高度占满整个屏幕的方法：
height:100%;是错误的height:100vh;才是正确的不懂vh的戳这里：https://blog.youkuaiyun.com/qq_41176306/article/details/111300795原创 2020-12-16 19:24:37 · 1799 阅读 · 0 评论 -
通俗易懂——css长度单位：px、em、rem、vh、vw、in、...
单位解析px绝对单位。像素em相对单位。相对于其父元素的font-size，如父元素font-size: 12px；那么子元素1em = 12px，1em = 24px，…rem相对单位。相对于其根元素（）的font-size，如html{font-size: 12px}；那么页面中1em = 12px，1em = 24px，…vw相对单位。相对页面视口的宽度，页面总宽度为100vw，页面宽度的1% = 1vwvh相对单位。相对页面视口的高度，页面总高度...原创 2020-12-16 19:20:17 · 3477 阅读 · 0 评论 -
各大浏览器的最小字体与默认字体
五大浏览器默认字体大小均为16pxChrome（87.0）Firefox（83.0）IE（5 7 8 9 10 11）Edge（87.0）Opera （72.0）Safari （5.1.7）最小字体大小6px0012px12px0原创 2020-12-16 18:38:15 · 10588 阅读 · 4 评论 -
css实现元素充满整个页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; }原创 2020-12-16 18:07:45 · 2491 阅读 · 0 评论