
CSS
文章平均质量分 72
Amy.Wang
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
::before和::after伪元素的用法
css3为了区分伪类和伪元素,伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。 这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。 所以不要用:before转载 2021-07-05 14:32:53 · 177 阅读 · 0 评论 -
一个div宽度或高度固定,另一个div铺满剩余空间
一. 一个div宽度固定,实现如下效果: box1固定宽度200px; box2铺满页面剩余部分 <div class="wrapper"> <div class="box1"></div> <div class="box2"></div> </div> 1. 利用flex布局 .wrapper { display: flex; } .box1 { width: 200px; height: 200px翻译 2020-08-18 23:52:19 · 2290 阅读 · 0 评论 -
css实现水平垂直居中的几种方式
1. 利用flex布局:align-items: center垂直居中 justify-content:center水平居中 <div class="box"> <div class="child"></div> </div> .box { width: 100vw; height: 500px; background: skyblue; position: relative; } .child { width: 200px转载 2020-08-18 23:19:50 · 411 阅读 · 0 评论 -
element开发-Table表格多选表头添加文字
要实现在table多选框checkbox后添加文字,效果如下: <el-table-column type="selection"></el-table-column> /deep/ .el-table__header-wrapper .el-checkbox__input::after { content: '全选'; position: absolute; margin-left: 5px; } ...原创 2020-07-02 22:39:45 · 3888 阅读 · 1 评论 -
div中的弹性元素分为指定行显示,且每个弹性元素不跨行完整展示
项目有如下需求:1.标签最多展示两行,超出部分以“...”显示;2. 每个标签内容不能被拆分,一行至少展示一个完整的标签,如果该标签的内容在一行内展示不了,则其内容以“...”展示;最终UI如下: <div class="report-card" v-for="item in articleList" :key="item.articleId"> &...原创 2020-02-16 09:06:28 · 280 阅读 · 0 评论 -
CSS易混淆知识点
css选择器 div span{color:bule;}:后代选择器, 作用于div中所有的span标签; div>span{color:bule;}:儿子选择器, 作用于div里的span标签 div+span{color:orange;}:毗邻选择器,作用于紧挨着div下面的一个span标签; div~span{color:red}:兄弟选择器,作用于所有与div处于同一级的sp...原创 2020-02-01 16:37:50 · 473 阅读 · 1 评论