css的一些样式用法

目录

1.img标签有一个属性clip，相当于就是裁剪图片展示

2.input伪类  伪类挺多经常用的就是单选多选

3.label标签

4.height的一个属性

5.'align="left"'导致表格漂浮 样式错乱

6.position:sticky;top: 20px;正常滑动到顶部后固定

7.vue活动组件

8.visibility与display

---

目录

1.img标签有一个属性clip，相当于就是裁剪图片展示

2.input伪类  伪类挺多经常用的就是单选多选

3.label标签

4.height的一个属性

5.'align="left"'导致表格漂浮 样式错乱

6.position:sticky;top: 20px;正常滑动到顶部后固定

7.vue活动组件

---

一些不好记，但是有时候会用到的零碎

1.img标签有一个属性clip，相当于就是裁剪图片展示

我们公司项目有个地方就类似微博列表那样，图片占的地方是固定大小的，但是图片不能大小固定变形，只能裁剪掉，就是只展示图片的某一部分，超出部分就超出减掉

clip: rect(0px,10px,10px,0px);position: absolute;

2.input伪类  伪类挺多经常用的就是单选多选

一般就是单选框多选框什么的，不太好记

选中没选中的时候的图标变换，变成ui设计好的图标

 input[type = "radio"]{-webkit-appearance: none;appearance: none;width: 0.14rem;height: 0.14rem;border-radius: 50%;background: #fff;border: 1px solid #cecece;-webkit-box-sizing: border-box;box-sizing: border-box;outline: none}
input[type = "radio"]:checked{border: none;}
input[type ='radio']:checked::after {content: '';display: block;width: 0.14rem;height: 0.14rem;background: url(../../assets/goods/right2.png) center center no-repeat;-webkit-background-size: 100% 100%;background-size: 100% 100%;border: none;}

多选同理 把radio变成checkbox就行了

3.label标签

 这个就是用它包含住input单选和后面的选项字体，作用就是点击input或者字体都可以显示选中情况  其实就是扩大选中范围

<label><input type="radio" />选项A</label>

4.height的一个属性

height:calc(100% - 30px);  100%高度减去30px，注意空格要有

5.'align="left"'导致表格漂浮 样式错乱

      这个属性已经废弃了,巨坑,项目遇到的之前的数据里包含这个属性,去百度都是告诉你会造成这个结果,但是怎么办没说
        但是我们项目这一段是活的数据,富文本里包含的,在没拿到数据的时候不能直接用js去掉这个属性,就比较麻烦
        然后我就用函数截取了一下，反正都是字符串

 var nowdetail =  nowhtml.split('align="left"');
 nowdetail = nowdetail[0].concat(nowdetail[1])

我觉得应该有直接截掉的函数吧，但是没找到，有知道的可以评论一下？

6.position:sticky;top: 20px;正常滑动到顶部后固定

这个属性是position新增的，经常有需求让某一块元素在整个页面内跟随滑动，到达顶部之后就固定悬浮在上面，之前就是判断这个元素和顶部的距离，然后改改fixed什么的，这个属性就完全不用了   在距离顶部20px处固定

7.vue活动组件

<component  :is="coms" />

coms是谁，就是那个组件，如果定义了aa,bb两个组件，coms是aa那这个组件就是aa

8.visibility与display

频繁切换显示，最好用visibility，不会引起dom的重绘