css
文章平均质量分 52
木蓝茶陌*_*
这个作者很懒,什么都没留下…
展开
-
css modules的用法和在react项目中的应用
CSS Modules 的功能很单纯,只加入了局部作用域和模块依赖,可以保证某个组件的样式,不会影响到其他组件。CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个唯一的 `class` 的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。原创 2023-08-11 09:44:58 · 767 阅读 · 0 评论 -
CSS3 新增特性总结
CSS3 新增特性有哪些颜色:新增 RGBA,HSLA 模式,新增透明度文字阴影:(text-shadow)边框:边框圆角:(border-radius)边框阴影:(box-shadow)边框图片:(border-image)弹性盒子模型:(box-sizing:border-box;)背景:background-size :设置背景图片的尺寸background-origin :设置背景图片的原点(定位、位置)background-clip :设置背景图片的原创 2020-10-20 14:38:04 · 1622 阅读 · 0 评论 -
CSS3新增特性详解
CSS3CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3 被划分为模块。其中最重要的 CSS3 模块包括:选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面1. 背景透明rgba()background: rgba(0, 0, 0, 0.3);最后一个参数是alpha透明度,取值范围 0~1之间。习惯上把0.3的0省略掉,background: rgba(0, 0, 0, .3);后面必须是 4个值。注意:背景半透明是原创 2021-01-26 09:17:40 · 477 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号
CSS实现单行文本溢出显示省略号white-space: nowrap; // 文本不换行overflow: hidden; // 溢出隐藏text-overflow: ellipsis; // 文本溢出显示省略号效果:CSS实现多行文本溢出显示省略号display: -webkit-box; // 设置弹性伸缩盒子模型-webkit-box-orient: vertical; // 设置子元素排列方式-webkit-line-clamp: 3; // 限制在一个块元素显示的文本行数原创 2022-04-06 20:02:54 · 1000 阅读 · 0 评论 -
CSS隐藏元素滚动条
针对特定浏览器设置滚动条样式来实现Firefox浏览器对于Firefox,可以将滚动条宽度设置为none:scrollbar-width: none; /* Firefox */IE浏览器对于IE,需要使用-ms-prefix属性定义滚动条样式:-ms-overflow-style: none; /* IE 10+ */Chrome和Safari浏览器对于Chrome和Safari浏览器,必须使用CSS滚动条选择器,然后使用display:none隐藏它:::-webkit-scrol原创 2021-04-30 09:17:44 · 390 阅读 · 0 评论 -
路由按钮样式设置
路由按钮样式设置标签按钮被单击访问,其对应组件就显示,为了使得用户体验比较好,要给当前的按钮设置与众不同的css样式,使得可以很清楚地知道是哪个按钮正在被访问,增强用户体验。语法:在App.vue中设置如下css样式:<style lang="less" scoped>/*给激活按钮设置高亮样式*/.router-link-active{color:blue;}</style>通过观察,发现按钮被访问激活后,其对应的html标签就会存在 class=“rout原创 2021-02-05 16:18:34 · 335 阅读 · 0 评论 -
CSS4种定位模式 (position)的特性详解
CSS定位position详解定位是用来布局的,它有两部分组成:定位 = 定位模式 + 边偏移边偏移CSS定位的盒子,是通过边偏移来移动位置的。在 CSS 中,通过 top、bottom、left 和 right 属性定义元素的边偏移:(方位名词)边偏移属性示例描述toptop: 80px顶端偏移量,定义元素相对于其父元素上边线的距离。bottombottom: 80px底部偏移量,定义元素相对于其父元素下边线的距离。leftleft: 80px左侧偏原创 2021-02-04 09:19:38 · 1683 阅读 · 0 评论 -
CSS属性书写顺序推荐
CSS属性书写顺序推荐建议遵循以下顺序:布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,因为关系到模式)。盒子属性:width / height / margin / padding / border / background文本属性:color / font / text-decoration / text-align / vertical-align / white- space原创 2021-02-02 09:13:27 · 129 阅读 · 0 评论 -
CSS应用 z-index 层叠等级属性来调整盒子的堆叠顺序
CSS应用 z-index 层叠等级属性来调整盒子的堆叠顺序在使用position定位布局时,可能会出现盒子重叠的情况。加了定位position的盒子,默认后来者居上, 后面的盒子会压住前面的盒子。应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示:z-index 的特性如下:属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上;如果属性值相同,则按照书写顺序,后来居上;数字后面不能加单位。数字后面不能加单位*。注意:z-index 只能应用于相对定位、原创 2021-02-01 09:14:41 · 699 阅读 · 0 评论 -
深度作用选择器deep的应用
深度作用选择器什么是深度作用选择器:当前组件A 引入一个其他组件B做应用,A组件由于scoped作用,A组件本身的全部html标签都会包含一个 data-v-xxx 的属性名称,使得css样式达到私有效果。被使用的组件B由于某些原因,编译解析后各个html标签不会形成 data-v-xxx 的属性,这样在组件A中给组件B设置样式会导致无效。深度作用选择器: https://vue-loader.vuejs.org/zh/guide/scoped-css.html#解决:通过深度作用选择器原创 2020-09-30 10:43:27 · 742 阅读 · 0 评论 -
前端基础学习——CSS入门详解
CSSCSS 是指层叠样式表 (Cascading Style Sheets),使用样式来定义如何显示 HTML 元素。1. CSS样式表1.1. 行内式(内联样式)<div style="color: red; font-size: 12px;">青春不常在</div>1.2. 内部样式表(内嵌样式表)将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义。<head> <style>原创 2020-09-22 09:18:50 · 864 阅读 · 0 评论 -
前端基础学习——页面布局之flex布局
Flex1. flex-介绍特点:相比于传统布局,代码少,布局快,对移动端兼容性好;使用:移动端首选flex ,PC端 不考虑兼容情况可以使用flex;flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 ;思想:使用思想上和传统盒子完全不同,不要再想子元素是块级元素、行内元素等,语法:加在父级容器上面display:flex;整体的flex布局只是对整体下的子元素有flex布局的影响,单独子元素形成新的flex布局,需要重新写display:flex;2.容器属性2.原创 2020-07-15 12:12:58 · 345 阅读 · 1 评论