D-CSS
小妖666
喜欢学习技术
展开
-
SCSS常用语法总结
Scss 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。1. 使用变量因为css里不能使用变量,造成很大不便。所以scss里引入的变量。任何可以用作css属性值的赋值都可以用作scss的变量值...原创 2019-12-09 16:05:12 · 2445 阅读 · 0 评论 -
Css实现漂亮的滚动条样式(兼容IE)
WebKit内核浏览器效果:代码:<!DOCTYPE html><html><head><meta charset="utf-8"><style>.container { height: 200px; width: 600px; overflow: auto;}.left_table {...原创 2019-12-07 23:09:58 · 1435 阅读 · 1 评论 -
html 设置button 内文字垂直居中
将button的行高和其列高设置相同即可height: 30px;line-height: 30px;原创 2019-12-02 13:37:12 · 7043 阅读 · 1 评论 -
flex布局文本溢出显示省略号...不好使
<div style="width: 0px; display: flex; flex-grow: 1;"> hellowww.baidu.comhello@baidu.com</div>这种格式永远也不显示省略号,百度后是因为:容器的子容器是文本,但是你不能将任何CSS直接应用于文本,因为它是匿名FLEX项目(即,没有定义标记的FLEX项)。因此,你需要将...原创 2019-11-15 14:26:13 · 5512 阅读 · 0 评论 -
flex布局IE下英文过长不自动换行问题
加上css属性word-break:break-all;原创 2019-11-15 14:09:23 · 907 阅读 · 0 评论 -
CSS替换select下拉菜单后边图标
select {/*Chrome和Firefox里面的边框是不一样的,复写了一下*/border: solid 1px #000;/*很关键:将默认的select选择框样式清除,注意ie的比较特别用最下面的方法清除*/appearance:none;-moz-appearance:none;-webkit-appearance:none;/*在选择框的最右侧中间显示小箭头图片*...原创 2019-11-15 12:37:40 · 2243 阅读 · 0 评论 -
html做出漂亮的复选框(angular)
效果首先要准备两张svg格式的图片,分别是未选中状态和选中状态的。icon_check.svg<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&...原创 2019-10-23 10:52:14 · 645 阅读 · 0 评论 -
chrome设置font-size小于12px失效问题
chrome 中默认中文字体最小为 12px,可在chrome://settings/fonts中修改要设置字体小于 12px,以 10px 为例:scale(num),num值算法是num=10/12=0.83transform: scale(0.83);不过这种方法虽然可以实现小字体,但是字体仍然“占位”即占据大字体的位置只是缩小了字体。所以样式要调整,div前面会有空,添加...原创 2019-10-07 16:59:29 · 1670 阅读 · 0 评论 -
阻止a标签默认跳转
法一:<a href="javascript:void(0)">百度</a>void是运算符,执行void后面的表达式,始终返回的是undefined.所以也可以写成 <a href="javascript:undefined">百度</a>再简洁一些:<a href="javascript:;">百度</...原创 2019-10-19 03:16:42 · 278 阅读 · 0 评论 -
html中的文本在指定位置换行
在“浏览器处理"中,想在浏览器和处理中间换行,因为某些原因还不想使用换行标签<br>。<meta charset="utf-8"/><div style="white-space: pre-wrap">浏览器处理</div>css里加入white-space: pre-wrap这个属性就可以了。white-space属性可以设置如何...原创 2019-10-15 19:08:01 · 1681 阅读 · 0 评论 -
CSS3绘制的基本图形
1、正方形#square { width: 100px; height: 100px; background: #6bbf20;}2、长方形#square { width: 200px; height: 100px; background: #6bbf20;}3、圆形#square { width: 100px; heigh...原创 2019-10-12 14:28:26 · 373 阅读 · 0 评论 -
Flex布局中的flex-grow无效问题
今天用flex布局画table,当设置表头间距的时候用到了flex-grow属性,全部设置成1后并没有出现距离等分的效果。lex-grow重点在lex-grow重点说明落在 剩余 这两个字上,父元素剩余的空间,那什么算父元素剩余空间呢,简单的理解就是(父元素的宽度-子元素总和的宽度),这里有两种情况:(1)子元素没有设置宽度:那么整个父元素的宽度就是剩余宽度,这个时候flex-grow可...转载 2019-10-10 23:29:30 · 3746 阅读 · 0 评论 -
span做成按钮时,文字不被选中样式
今天用span做成按钮,但是每次双击都会选中span内容,很不和谐。怎么办呢?添加下面样式即可,亲测ie和谷歌浏览器没问题:.button { display: inline-block; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-s...原创 2019-10-10 18:44:19 · 2136 阅读 · 3 评论 -
span里面没有内容,还想让它占一定空间怎么办?
今天做画面时想在span下放置个背景图片,但是因为span里没有内容不会占用空间,怎么办呢?只要设置width和height就行了。width: 24px;height: 24px;display: inline-block;background: url(images/icon_check.svg) no-repeat;...原创 2019-10-10 16:59:00 · 2444 阅读 · 0 评论 -
CSS里的颜色简写(3位字母和6位字母)
color:#ccc和color:#cccccc它俩是一样的色值。那为什么会有两种写法呢?原来3位是6位的简写。但并不是每一个6位代码都可以简写,必须符合一定格式的。比如:#123(#112233);#1D2(#11DD22);...原创 2019-10-07 21:47:03 · 2091 阅读 · 0 评论 -
RGB颜色值与十六进制颜色码转换
RGB颜色值"rgb(238 , 221 , 204)"与十六进制颜色码"#EEDDCC"转换RGB颜色值是十进制的,十六进制颜色码是十六进制的。它们之间的转换其实就是十进制与十六进制之间的转换。238转十六进制=EE221转十六进制=DD204转十六进制=CC...原创 2019-10-07 21:35:51 · 1444 阅读 · 0 评论 -
CSS3中使用rgba来调节透明度
css3可以用opacity设置透明度,但是这个透明度设置后不仅字体颜色,背景色的透明度都变了。有没有办法只让字体颜色的透明度改变呢?RGBA:此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。例:color:rgb(255, 0, 0,0.3)...原创 2019-10-07 21:19:04 · 1127 阅读 · 0 评论