样式（css等）
关注
分享
扫一扫
前端样式方面的知识及遇到的问题积累与分享
w-somebody
这个作者很懒，什么都没留下…
展开
-
深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）,最好使用深度选择器。本文对深度选择器做一个总结记录1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式<style lang="css" s.原创 2022-01-26 15:47:53 · 17332 阅读 · 0 评论 -
css 文字两端对齐
1、需求是这样的：用div+css实现一个表单，要求表单中，输入框前面的label文字都两端对齐,效果如下:2、先贴出html代码：<div class="item-box"> <span>姓名：</span> <el-input v-model="name"></el-input></div><div class="item-box"> <span>电话号码：</span原创 2022-01-12 10:33:12 · 26806 阅读 · 0 评论 -
css 文本溢出处理（单行文本显示 ... 多行文本显示指定行数，且可展开）
目录1、单行文本溢出，显示 ...2、多行文本溢出，显示 指定行数 + ...1、单行文本溢出，显示 …<template> <div class="text-div">{{ value }}</div></template><script>export default{ data(){ return { value: '单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行原创 2021-12-23 17:27:05 · 1004 阅读 · 0 评论 -
css 怎么把一个元素藏起来
1、使用display进行隐藏，简单粗暴，会直接将元素从文档中删除，不利于SEO。用法：display: none;2、使用text-index设置文本的缩进，给其一个大的负值。用法：text-indent: -999em;3、使用position，定位值（top, left, bottom, right）给其一个大的负值。用法: position: absolute;top: -999em4、使用visibility，设置值为hidden，该属性有继承作用，如果子元素要显示，那么要单独设置子元素的v原创 2021-10-18 16:40:54 · 145 阅读 · 0 评论 -
flex弹性布局--笔记02
一、概述1，设置了弹性布局的元素称为容器，元素里面的子元素称为项目2、容器有水平的主轴和垂直的交叉轴，主轴和交叉轴都有起点（开始的位置）和终点（结束的位置）3、容器有容器属性，项目有项目属性4、容器属性：（flex-direction flex-wrap flex-flow justify-content align-items align-content）---6个...原创 2019-08-13 22:49:17 · 165 阅读 · 0 评论 -
flex弹性布局--笔记01
flex布局是什么flex是flexiblel box的简写，中文翻译为弹性布局，任何元素都可以设置为弹性布局1、display为flex,父元素的宽度为最外元素的宽度的100%,如下，.box的宽度为500px.c1{ width: 500px; border: 1px solid #000; }.box{ display: flex; border: 1px ...原创 2019-08-06 23:16:59 · 194 阅读 · 0 评论 -
简单html、css实现瀑布流
一、具体实现1、html<template> <div class="container"> <div class="item-box" v-for="(item,index) in list" :key="index">{{index+1}}</div> </div></template>2、js<script>export default{ data(){原创 2020-07-01 11:39:50 · 784 阅读 · 0 评论 -
说说filter这个css属性（网站置灰实现）
在2020年4月4日这一天，大家无论打开手机、电脑网页还是APP，都可以看到所有的内容都已经变成了灰色，大家可能还会误以为是网站统一换了一套css样式，不过后面转念一想这么多网站及页面，如果要统一换样式，工程还是很大的。好奇心驱使我打开浏览器查看元素，结果发现很多的网站几乎是通过一个css属性filter来设置这种置灰的效果一、filter属性：1、也叫做滤镜属性，用于将模糊和颜...原创 2020-04-09 11:12:46 · 2941 阅读 · 0 评论 -
pointer-event属性详解
一、pointer-event属性可以指定在什么情况下元素可以成为鼠标事件二、取值： 1、pointer-event:auto;(默认值)，对于svg元素，该值与visiblePainted效果相同 2、pointer-event:none;元素不会成为鼠标事件的target 3、pointer-event:visiblePainted;只适用于SVG元素，元素只有在以下情况才会成...原创 2019-08-13 22:59:40 · 38420 阅读 · 2 评论 -
文字两端对齐，一般可用于input前的说明文字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height:30px; margin:20px; } .s1...原创 2019-06-27 16:37:48 · 1196 阅读 · 0 评论 -
页面文字显示溢出使用省略号（...）
思路：1、box设置宽度（width）2、设置该box的样式：overflow: hidden;white-space: nowrap;text-overflow: ellipsis;例如：1、html文件中<span>2222222222222222222222222222222222222222222222222</span><div>55...原创 2019-06-27 16:21:14 · 310 阅读 · 0 评论