DIV或者其他标签内的多行文本文字，默认情况下的很多时候，可能对齐方式排版的对齐方式不对，不是很好看（右侧不对齐），如图： 为了让网页美观，希望让文本两段对齐，可以使用来进行对齐 示例的代码如下： .my-div { word-wrap: anywhere; text-align:justify; } 修改后如图就两端对齐了，好看多了：  

如题，可能有一些需求（例如使用其他人的组件，不方便修改JS代码等情况），需要让CSS来控制某些超链接无法点击，例如，有以下Html代码： <a class="baidu-link" href="https://www.baidu.com">Baidu.com</a> 要使Baidu.com无法点击，可以可以给a标签加pointer-events: none; 代码如下： .baidu-link { pointer-events: none; }  

CSS给div设置透明度的方式有多种，根据自己的实际情况做选择 opacity取值是[0,1]之前的小数都可以，直接使用opacity: 0.5，意思是透明度50%，不过这种方式有个问题，就是整个div全部透明了，且div里面的内容（包括文字）也会产生透明： .my-div { opacity: 0.5; } 如果想要让div里面的内容不透明，可以使用这种方式: RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带…

Html里的元素将其旋转一定的角度，可以利用CSS的transform:rotate来实现，例如： .some-div { transform:rotate(-30deg); } 其中-30deg说明逆时针旋转30°，如果顺时针的角度，就是正数，根据自己的实际需求做相应的调整。

我们使用到给元素设置成display:inline-block; 例如用于同一行摆放多个元素，发现一个问题，他们之间有空隙，如下所示代码： <div style="padding: 0px;margin:0px;"> <div style="display:inline-block;background:red;width:50px;height:50px;"></div> <div style="display:inline-block;background:green;…

需要将某个buttons下面的类名是button的前几个或者后几个按钮筛选出来做特别的CSS处理。 可以利用nth-child(从前数第几个)和nth-last-child(从后数第几个) 还是以上面的例子，我们给button添加background为例： 选择前3个做处理： .buttons .button:nth-child(-n+3) { background: red; } 选择后1个（最后一个）做处理： .buttons .button:nth-last-child(-n+1) { background:…

在一行（例如一个div中）需要排多个元素，如果一行排不下的情况，我们不希望内容换行(默认情况就会换行)，而是可以左右让用户进行左右滑动（滚动，例如鼠标拖动或者手指拖动），另外因为不影响美观，还希望可以隐藏横向的左右拖动滚动条。 我已经写好了h-scroll，只要给上层div加这个class就可以了。   .h-scroll { white-space: nowrap; overflow-x: scroll; overflow-y: hidden; -ms-overflow-style: none; /* …

Html中input输入框，如果设置属性type="number"可以限制用户仅能输入数字（不过限制不能完全自定义，有自定义需求的，请查看：https://blog.terrynow.com/2022/04/20/vuejs-iview-input-allow-digits-or-specified-chars/），但是加上这个属性后，发现输入框右侧有个上下的箭头，可以给输入的数字+1后者-1，但是因为一些特定的要求，产品要求我们去掉或者隐藏这个上下箭头，如图： 可以利用css实现，Html代码如下： <in…

写CSS的是否，遇到一个需求，需要根据标签的属性（例如属性是否是某个值，是否包含某个属性，是否不包含某个属性）选择出来增加css内容。 input:not([type]), input[type='text'], input[type='password'] { /* style here */ } input[type] { /* 根据input里的是否包含type来选择 */ } input:not([type]) { /* 根据input里的属性如果不包含type来选择 */ } input:not([typ…

打开一个vue项目，里面有SASS语法，其中CSS里用到/deep/，发现编译报错，如下： ERROR Failed to compile with 1 errors 10:34:52 AM error in ./src/components/floatBtn.vue?vue&type=style&index=0&id=cacbdb20&lang=scss&scoped=true& Module build failed (from ./node_modules/sa…