![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS学习
飞羽逐星
既然厌倦于追寻,那便一觅其中;自从一股逆风袭来,我已学会抵挡八面来风。
展开
-
抽离css文件
抽离css文件一、抽离css文件一、抽离css文件目前,css代码被css-loader转换后,交给的是style-loader进行处理。style-loader使用的方式是用一段js代码,将样式加入到style元素中。而实际的开发中,我们往往希望依赖的样式最终形成一个css文件此时,就需要用到一个库:mini-css-extract-plugin该库提供了1个plugin和1个loaderplugin:负责生成css文件loader:负责记录要生成的css文件的内容,同时导出开启css-原创 2020-08-29 11:05:01 · 469 阅读 · 0 评论 -
PostCss
PostCss一、PostCss1.什么是PostCss2.安装3.配置文件4.插件5.postcss-preset-env1.自动的厂商前缀2.未来的CSS语法3.变量4.自定义选择器5.嵌套6.postcss-apply7.postcss-color-function8.[扩展]postcss-import9.stylelint一、PostCss本节课的内容和webpack无关!!!1.什么是PostCss学习到现在,可以看出,CSS工程化面临着诸多问题,而解决这些问题的方案多种多样。如果原创 2020-08-29 08:23:09 · 2561 阅读 · 1 评论 -
预编译器less
预编译器less一、预编译器less1.基本原理2.LESS的安装和使用3.LESS的基本使用4.webpack中使用一、预编译器less1.基本原理编写css时,受限于css语言本身,常常难以处理一些问题:重复的样式值:例如常用颜色、常用尺寸重复的代码段:例如绝对定位居中、清除浮动重复的嵌套书写由于官方迟迟不对css语言本身做出改进,一些第三方机构开始想办法来解决这些问题其中一种方案,便是预编译器预编译器的原理很简单,即使用一种更加优雅的方式来书写样式代码,通过一个编译器,将其转换为原创 2020-08-27 23:59:48 · 948 阅读 · 0 评论 -
css module
css module一、css module1.思路2.实现原理3.如何应用样式一、css module1.思路通过命名规范来限制类名太过死板,而css in js虽然足够灵活,但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题css module 遵循以下思路解决类名冲突问题:css的类名冲突往往发生在大型项目中大型项目往往会使用构建工具(webpack等)搭建工程构建工具允许将css样式切分为更加精细的模块同JS的变量一样,每个css模块文件中难以出现冲突原创 2020-08-27 13:30:57 · 5689 阅读 · 0 评论 -
css in js
css in js一、css in js一、css in jscss in js 的核心思想是:用一个JS对象来描述样式,而不是css样式表例如下面的对象就是一个用于描述样式的对象:const styles = { backgroundColor: "#f40", color: "#fff", width: "400px", height: "500px", margin: "0 auto"}由于这种描述样式的方式根本就不存在类名,自然不会有类名冲突至原创 2020-08-26 23:03:34 · 1032 阅读 · 0 评论 -
css命名方法-BEM
这里写目录标题一、BEM一、BEMBEM是一套针对css类样式的命名方法。其他命名方法还有:OOCSS、AMCSS、SMACSS等等BEM全称是:Block Element Modifier一个完整的BEM类名:block__element_modifier,例如:banner__dot_selected,可以表示:轮播图中,处于选中状态的小圆点三个部分的具体含义为:Block:页面中的大区域,表示最顶级的划分,例如:轮播图(banner)、布局(layout)、文章(article)原创 2020-08-26 21:51:35 · 341 阅读 · 0 评论 -
css响应式布局
响应式布局一、问题发现二、响应式1.标签2.设置视口3.响应式网页开发方法4.媒体查询5.单位值三、最佳选择一、问题发现在pc端在移动端同一个布局,在pc和移动端显示完全不同,我们不能一个网页开发两套,一个在PC端显示一个在移动端显示。浪费时间、成本和效益。所以提出了响应式布局的方案。响应式网页设计或称自适应网页设计或称回应式网页设计/对应式网页设计,是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面计算机显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现,减原创 2020-07-21 21:52:01 · 2522 阅读 · 0 评论 -
css像素的应用原理
css像素一、css像素1.像素2.机器成像1.crt显示屏2.lcd液晶屏2.像点1.点距3.dpi4.参照像素一、css像素1.像素rgb通过三原色在同一平面同时存在时,将被我们看到的就是白色。但是在机器当中,很难实现将三种颜色放在在同一空间,所以计算机中实际通过空间混色法完成。红、黄、蓝===>空间混色法现有<div class="demo"></div>500个.box{ display: flex;}.demo{ width: 1px原创 2020-07-21 19:54:40 · 423 阅读 · 0 评论 -
浏览器的渲染流程与css性能优化
这里写目录标题一、css性能优化1.浏览器渲染顺序2.性能优化1.触发reflow的操作:3.触发reflow的操作:3.css性能优化3.刷新率二、浏览器渲染的具体流程1.构建DOM树2.构建CSSOM规则树3.构建渲染树(Render Tree)4.渲染树布局(layout of the render tree)5.渲染树绘制(Painting the render tree)三、浏览器渲染网页的那些事儿1.浏览器主要组件结构2.渲染阻塞3.重构和重绘(reflow和repaint)4.几条关于优化渲染原创 2020-07-21 15:39:57 · 523 阅读 · 0 评论 -
CSS实现3d旋转相册(疑难解答)
3d旋转相册一、代码实现1.css样式2.html+js代码二、疑难解答1.发现问题2.解决问题1.设置背景颜色2.设置透明度3.利用div.style(background-image)添加背景图片一、代码实现1.css样式<style> *{ margin: 0; padding: 0; } :root{ height: 100%; } body{ height: 100%;原创 2020-07-21 11:33:52 · 2734 阅读 · 0 评论 -
css深入剖析transform的计算规则matrix
matrix一、矩阵二、matrix1.translate(x,y)2.scale(n,m)3.rotate(θ)三、实现功能1.左右倒置一、矩阵首先了解矩阵的计算规则 |a c e| |x| |ax + cy + 2e| |b d f| * |y| = |bx + dy + 2f| |1 1 2| |2| |x + y + 4 | |a c e| |x j| |ax + cy + 2e aj + ck + e| |b d f| *原创 2020-07-20 21:05:12 · 1239 阅读 · 0 评论 -
css深入剖析transform的translate和perspective
这里写目录标题一、translate二、perspective1.perspective-origin2.transform-style: preserve-3d三、使用规则四、一、translatetranslate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0translatex(): 指定对象X轴(水平方向)的平移translatey(): 指定对象Y轴(垂直方向)的平移translatez(): 指定对原创 2020-07-20 15:57:20 · 1167 阅读 · 0 评论 -
css深入剖析transform的skew
skew一、skew1.skew(x,y)2.斜切目标3.实例运用一、skew1.skew(x,y)指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0.box { width: 150px; height: 150px; background-color: black; transform-origin: 0 0; transform: skew(45deg);}.bo原创 2020-07-20 09:48:35 · 4719 阅读 · 1 评论 -
css深入剖析transform的scale
这里写目录标题一、scale1.伸缩性2.叠加性3.保留影响二、scale3d一、scale指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。伸缩的是此元素的变化坐标轴的刻度1.伸缩性.box { width: 100px; height: 100px; background-color: black; transform-origin: 0 0; transform: scale(2,2); /* transform:原创 2020-07-19 23:45:49 · 2118 阅读 · 0 评论 -
css深入剖析transform的rotate
rotate一、rotate1.rotate2.rotateXYZ3.rotate3d4.实例一、rotate1.rotate正常情况下以transform-origin为变换中心,值正为顺时钟,负为逆时针。div.box{ width: 100px; height: 100px; border: 1px solid #000; transform-origin: 0 0; transform: rotate(45deg);}以左顶点为旋转中心顺时钟旋原创 2020-07-19 23:11:34 · 739 阅读 · 0 评论 -
css初步了解transform
transform一、transform1.transform-origin2.transform-style3.perspective4.perspective-origin5.backface-visibility一、transform1.transform-origin设置或检索对象以某个原点进行转换left: 指定原点的横坐标为leftcenter①: 指定原点的横坐标为centerright: 指定原点的横坐标为righttop: 指定原点的纵坐标为topcenter②: 指定原点原创 2020-07-19 22:40:44 · 395 阅读 · 0 评论 -
css深入剖析timing-function的step
steps一、steps一、steps检索或设置对象动画的过渡类型steps(n,[ start | end ]),默认为endstep-start: 等同于 steps(1, start)step-end: 等同于 steps(1, end)例如下列的的动画画关键帧div{ width: 100px; height: 100px; animation: run 5s steps(1,end);}@keyframes run{ 0%{ wid原创 2020-07-19 17:45:31 · 494 阅读 · 0 评论 -
css初步了解animation
animation一、animation1.animation-name2.animation-iteration-count3.animation-direction4.animation-play-state5.animation-fill-mode一、animation1.animation-name检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义。@keyframes run@-moz-keyframes run@-webki原创 2020-07-19 15:58:05 · 331 阅读 · 0 评论 -
css深入剖析timing-function的cubic-bezier
cubic-bezier一、cubic-bezier1.斜率2.贝塞尔曲线一、cubic-bezier1.斜率我们都知道在坐标系的第一象限,斜率代表着斜线上升趋势的快慢2.贝塞尔曲线而cubic-bezier的计算方式即三次为贝塞尔曲线(Bézier curve),这里最好理解的方式即为通过它的斜率去理解:<style> div{ width: 100px; height: 100px; background-color:原创 2020-07-18 23:56:03 · 541 阅读 · 0 评论 -
CSS初步了解transition
transition一、transition1.transition-property2.transition-duration3.transition-timing-function4.transition-delay意为过渡动画一、transition通过css或js等改变它可以检测的属性,都能实现过度1.transition-property检索或设置对象中的参与过渡的属性none:不指定过渡的css属性all:默认值,所有可以进行过渡的css属性2.transition-durati原创 2020-07-18 23:35:00 · 358 阅读 · 0 评论 -
CSS深入剖析box(混杂盒模型、弹性盒模型)
IE6混杂盒模型、弹性盒模型一、IE6混杂盒模型1.正常盒模型2.IE6混杂盒模型二、overflow和resize1.overflow2.resize四、flex弹性盒模型1.flex和inline-flex的区别2.flex1. flex-direction2. flex-wrap3.justify-content4.align-items5.order6.align-self7.flex-grow8.flex-basis9.flex-shrink10.flex应用一、IE6混杂盒模型1.正常盒模型原创 2020-07-18 11:08:39 · 968 阅读 · 0 评论 -
CSS深入剖析text和column
这里写目录标题一、text-shadow二、@font-face三、其他text常用特性四、column一、text-shadow与box-shadow类似,这里通过例子讲解。浮雕特效div{ font-size: 48px; color: #ddd; text-shadow: 1px 1px #000, -1px -1px #fff;}镂雕特效div{ margin-top: 20px; font-size原创 2020-07-17 09:56:47 · 547 阅读 · 0 评论 -
CSS深入剖析background
background一、background-image二、background-origin三、 background-clip四、background-repeat五、background-attachment五、background-size一、background-image:使用绝对或相对地址指定背景图像。可以引入多张,利用background-size设置其分别的大小。div{ width: 400px; height: 400px; background-i原创 2020-07-16 17:22:02 · 485 阅读 · 0 评论 -
CSS深入剖析border和box-shadow(附漂亮样式)
剖析border一、border-radius二、box-shadow三、利用这些属性渲染出漂亮图形在CSS3中赋予了border更过的功能,但是其知识结构也更加复杂,在本文中博主对border进行深入研究。一、border-radius<div style="width: 200px;height: 200px;border: 2px solid #000;"></div>//公共样式整体设置圆形border-radius: 50%;border-radius:原创 2020-07-16 10:04:21 · 3830 阅读 · 1 评论 -
CSS预处理器和后处理器
css预处理器和后处理器一、引言二、正文1.CSS 预处理器2.CSS 后处理器3.开发模式的变化4.优秀的 CSS 后处理器框架5.最后一、引言因为我是前端刚入门,昨天看了一个大神写的的初级前端需要掌握的知识,然后我就开始一一搜索,下面是我对css预处理器和后处理器的搜索结果,一是和大家分享下这方面的知识,另一方面方便自己以后翻阅。所以感兴趣的可以看下。转载自博客园:二、正文说到 CSS 预处理器,大家都很熟悉了,本文的重点是介绍从中抽出的 CSS 后处理器,这也是近一年多以来,前端社区的一些新原创 2020-07-14 16:32:23 · 765 阅读 · 0 评论 -
CSS进阶之基线(参考线)
基线(参考线)一、引入1.CSS属性2.文字二.行高三、vertical-align1.一个元素如果子元素出现行盒,该元素内部也会产生参考线2.行盒组合起来,可以形成多行,每一行的区域叫做line-box,line-box的顶边是该行内所有行盒最高顶边,底边是该行行盒的最低底边。四、可替换元素和行块盒的基线一、引入1.CSS属性font-size、line-height、vertical-align、font-family这些属性的它们在页面里是参考的什么线,我们从文字的设计开始。2.文字文字是原创 2020-07-14 16:18:19 · 5233 阅读 · 0 评论 -
CSS进阶之块级格式化上下文
块级格式化上下文一、块级格式化上下文1.引言2.作用3.区域关系二、应用一、块级格式化上下文1.引言全称Block Formatting Context,简称BFC,它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局。创建BFC渲染区域,有三种方式1.根元素2.浮动和绝对定位元素3.overflow不等于visible的块盒使用时按对布局影响最小的方式使用2.作用不同的BFC区域,它们进行渲染时互不干扰创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部原创 2020-07-14 15:44:24 · 841 阅读 · 0 评论