![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
文章平均质量分 87
果果ha
向着光奔跑~
展开
-
style scoped 原理
在了解 <style scoped></style> 前先回顾vue实例的挂载和渲染流程: 其中template模板在运行时进行编译,它会利用Vue内部的编译器进行模板的编译,字符串模板会转换为抽象的语法树,即AST树(抽象语法树) 一、vue-loader 一个 vue 的项目中,整个项目是通过.vue单文件组件组织的,我们写的单文件组件都被处理为了SFC对象(单个文件组件), 即包含了单个HTML模块, 单个脚本模块, 一个或多个样式模块的功能完备的...原创 2021-01-05 18:20:23 · 544 阅读 · 1 评论 -
css权重
在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。 CSS权重: 1、权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。 2、当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先级的过程。原创 2018-04-20 11:28:11 · 584 阅读 · 0 评论 -
(原生JS) 图片无缝滚动、图片转化、轮播图、折叠效果
1.图片无缝滚动(原生JS)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"&原创 2018-03-17 00:37:32 · 1711 阅读 · 0 评论 -
IE下判断IE版本的语句
<!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见 <!--[if lte IE 7]> <![endif]--> IE7及其以下版本可见<!--[if IE 6]> <![endif]--> 只有IE6版本可见<![if !IE]> <![endif]&g原创 2018-03-17 00:23:18 · 232 阅读 · 0 评论 -
元素垂直居中方法(面试常问)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>元素居中</title> <style> body{ padding: 0; margin: 0;原创 2018-03-07 00:50:55 · 250 阅读 · 0 评论 -
rem,em,px区别
rem,em,px区别 1. px像素(Pixel)。相对长度单位。像素px是相对于显示屏幕分辨率而言的。 2. em是相对长度单位。相对于父级字体尺寸,会叠加(继承父级元素字体大小)。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px)。 例:<p id="fu"> 福<span id="qi">气</span> <...原创 2018-02-26 22:53:18 · 258 阅读 · 0 评论 -
CSS中可以和不可以继承的属性
CSS中可以和不可以继承的属性一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、m...原创 2018-02-11 00:31:02 · 247 阅读 · 0 评论 -
css hack
什么是css hack ?由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack(针对不同的浏览器写不同的css code的过程即css hack,也叫写css hack)css hack可翻译为:浏览器兼容性、兼容方案、简略兼容浏览器。常用的CSS hack 有三种方式:CSS 内部hack、选择器h...原创 2018-02-11 00:23:33 · 290 阅读 · 0 评论 -
常见的两列布局和三列布局
(1)两列布局 方法一:采用position:absollute;并设置margin-left的值。 左边定宽 右边自适应 #box{position: relative;} #left{position:absolute;top:0px; left:0px; width:300px;background:#F00;} #right{margin-left原创 2017-08-14 18:05:08 · 2564 阅读 · 0 评论 -
css清除浮动
源码: div id="div1"> div class="left">leftdiv> div class="right">rightdiv> div> div id="div2"> div2 div> 1.使用.clearfix----推荐使用 ----给父类添加class=“clearfix” .clearfix:before,.clearfi原创 2017-03-14 22:35:30 · 256 阅读 · 0 评论 -
flex速记 和 flex 在IE下兼容问题解决
flex 速记: 属性值标识: reverse -> 反方向 start -> 左/上 end -> 右/下 baseline -> 第一行文字基线 stretch -> 撑开 between -> 两端对齐,间隔均分 around -> 项目两侧间隔相等 默认值 -> 第一个值 auto -> 1 1 auto none -> 0 0 auto 一、容器属性 主轴方向: flex-direction:row | row-reverse |.原创 2020-11-18 19:17:00 · 1216 阅读 · 0 评论 -
css动画概念、兼容性及使用
什么是css3中的动画:使元素从一种样式逐渐变化为另一种样式可以改变任意多的样式任意多的次数可以用百分比规定变化发生的时间,或者用关键词“from”和“to”,等价于“0%”和“100%”,表示动画的开始和完成通过css3我们可以创建动画,可以代替页面中的动画图片、Flash动画以及JavaScript。如果创建css动画,需要了解@keyframes规则。@keyframes规则用于创建动画,在...原创 2018-03-28 00:52:32 · 1085 阅读 · 0 评论 -
CSS3中 translate、transform和translation,和动画animation
举个栗子:--------元素整体居中.box{position:absolute;top:50%;left:50%;width:50px;height:50px;transform:translate(-50%,-50%);background:gray;}1.translate:移动,是transform的一个方法通过translate() 方法,元...原创 2018-02-09 00:28:26 · 6076 阅读 · 0 评论