![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
不吃素的pig
人在江湖飘哪能不挨刀
展开
-
巧妙利用css选择器编写样式或者页面布局
1、::before或者::after::before选择器在被选元素的内容前面插入内容::after选择器在被选元素的内容后面插入内容以::before为例的两个小例子//css部分.result{ position: relative; padding-left:10px;}.result::before{ content:""; //必须得有centent,否则内容无法展示出来 position: absolute; top:0; left:0;原创 2020-07-20 16:14:25 · 353 阅读 · 0 评论 -
vue由于scoped应如何修改第三方样式
由于scoped属性的样式的隔离,导致无法修改第三方的样式的原因:scoped 属性会自动添加一个唯一的 属性(比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover,使得样式只在这个组件生效,不会导致污染全局样式。解决方法:1、如果是css 使用>>>外层>>> 需要修改的第三方,例如:.原创 2020-06-15 11:19:38 · 419 阅读 · 0 评论 -
纯css绘制三角形
有时候UI没有给到类似上面的三角形图,问他要又很麻烦,所以干脆自己利用css的border属性来实现,通过设置其中一个方向的border有颜色其他为透明色来实现,需要注意的是必须设置width和height为0// css 部分.up{ width:0; height:0; border-bottom:100px solid pink;...原创 2019-08-02 16:27:55 · 162 阅读 · 0 评论 -
BFC的理解和margin重叠的理解
在理解BFC之前,先了解一个margin重叠(合并)margin重叠(合并):块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单 个外边距,这样的现象称为“margin 合并”。发生重叠前提条件:1、普通文档流中的块级元素(不包括行内、浮动、绝对定位元素)2、只发生在垂直方向//css部分*{ margin:0; ...原创 2019-08-07 17:06:19 · 633 阅读 · 0 评论 -
css 实现单行、多行文本溢出省略号显示
CSS实现:单行实现:// css部分overflow:hidden;text-overflow:ellipsis;white-space:nowrap;white-space:设置如何处理元素内的空白;值为nowrap:文本不会换行,文本会在同一行上继续,直到遇到<br>标签为止。效果如下:多行实现:// css部分display: -webk...原创 2019-08-19 17:13:27 · 96 阅读 · 0 评论 -
CSS实现导航栏下划线跟随效果和下划线向两边展开效果
1、下划线跟随效果// css部分ul{ display: flex; flex-direction: row; margin:0; padding:0;}ul li{ list-style: none; color:#249DF7; padding:10px; /* 设置relative,作为伪类::after定位的参照和width的...原创 2019-09-03 17:03:22 · 1413 阅读 · 0 评论