![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
zcy_csdn123
让不懂的人懂,你才真正的懂。
展开
-
css 超过长度后文本隐藏 并用省略号代替
white-space: nowrap 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格。overflow: hidden 隐藏超出单元格的部分。text-overflow: ellipsis 将被隐藏的那部分用省略号代替。...转载 2019-10-15 17:23:20 · 168 阅读 · 0 评论 -
H5 布局 -- 让容器充满屏幕高度或自适应剩余高度
转自:https://blog.csdn.net/zgh0711/article/details/80319738转载 2019-10-15 14:49:25 · 855 阅读 · 0 评论 -
下拉箭头点击旋转,再次点击旋转恢复
:class="{icon: true, iconTrans:abc}">.icon { position: absolute; top: 18px; right: 10px; width: 8px; height: 6px; background-image: url("../../assets/img/icon-t原创 2018-01-20 11:19:15 · 5980 阅读 · 0 评论 -
vue 使用less
// 在项目目录下npm install less --save-devnpm install less-loader --save-dev// 然后重新npm installnpm run dev记录一下,本来是想在webpack中配置呢,重新npm install 就可以了,应该是默认写进去了,或者是作为node的包 包含进去了,具体不明确,不过可以适用less了原创 2018-02-24 16:47:40 · 566 阅读 · 0 评论 -
修改placeholder中的颜色
<style> input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; } input:-mo...原创 2018-05-15 10:47:56 · 1200 阅读 · 0 评论 -
如何使div根据里面内容而改变大小
1.display: inline-block;2.width: auto; height: auto;原创 2018-05-08 19:38:12 · 13965 阅读 · 0 评论 -
2倍图等的使用
为了 是图片更清楚 有时候会给2倍图 使用//background-size: cover;//background-size: 100%;原理一样 就是 使 图片 平铺满 你设定的大小原创 2018-07-30 16:32:30 · 2139 阅读 · 0 评论 -
position:sticky粘粘性定位
https://blog.csdn.net/yesyoucan_/article/details/80506742转载 2018-09-28 16:34:35 · 239 阅读 · 0 评论 -
实现点击其他位置弹窗消失的方法
1、 对整个文档 document 添加监听事件2、div 添加tabindex 使其有focus blur 在blur时 使弹窗消失原创 2018-09-30 18:28:18 · 2221 阅读 · 0 评论 -
HTML CSS 特殊字体图标表
https://www.cnblogs.com/fml1com/p/5149269.html转载 2019-04-10 10:06:39 · 1297 阅读 · 0 评论 -
物理像素设备像素PX rem
https://blog.csdn.net/cout__waht/article/details/81697774转载 2019-04-10 11:50:32 · 128 阅读 · 0 评论 -
css 如何使高度充满浏览器
传送门:https://www.cnblogs.com/ch-zaizai/p/6322751.html总结一下: 就是从hyml body 开始 所有的高度都要 height:100% 这样在你想要的区域 设置 height:100% 才会沾满剩余的屏幕...转载 2019-06-19 17:13:37 · 3356 阅读 · 0 评论 -
响应式表格
说一个简单的方式:在table外层加个div,div根据屏幕会改变大小,当在小屏幕的时候,将内部,过宽或者过长的table隐藏,并添加滚动还有很多别的方式:http://caibaojian.com/responsive-tables.html表格表框合并:border-collapse:collapse;转载 2017-12-18 14:31:22 · 706 阅读 · 0 评论 -
表格合并边框
table { border-collapse:collapse; }原创 2017-11-24 11:25:14 · 213 阅读 · 0 评论 -
ul的li float后居中的问题
ul li 水平排列并居中是一个常常会遇到的布局。 经常作为菜单栏、导航栏、tap标签栏等等。 虽然li float可以实现,但都比较麻烦,并且因为浮动了稍有不注意可能会影响布局,所以今天介绍个比较简单的方法。 display:inline-block 方法 将li display:inline-block, 并且在ul 上用text-align 既可以实现水平排列并居中。/* css */原创 2017-08-22 15:57:58 · 2267 阅读 · 0 评论 -
设备像素,分辨率 ,设备独立像素,CSS像素
前言这两个属性说难不难,说容易又不易容。但如果你弄明白了这个,你就明白了一些东西,一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起,其实虽然标题里是三个名词,但我们接下来只聊两个就可以了,为什么?看完你就知道了。基本定义设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。原创 2017-08-24 17:31:26 · 412 阅读 · 0 评论 -
@media 媒体查询
目前各种屏幕尺寸的移动设备,笔记本,台式机, 还有前后端分离的思想,要求页面尽量多的适应设备屏幕,这就会用到Media Query 媒体查询。 先介绍一片文章:http://www.w3cplus.com/content/css3-media-queries 写的很具体 下面是我自己对@media的理解 我常用的引入方式:<link href="print.css" media="print原创 2017-08-23 18:37:50 · 381 阅读 · 0 评论 -
CSS3--背景效果
背景效果 回顾一下原来的几个属性 background-color:背景颜色 background-position:背景图像的位置 background-repeat:如何重复背景图像 background-image:要使用的背景图片 background-attachment:背景图片随滚动轴移动的方式(移动、不移动、继承)background 新增了4个属性,以便更精细的对背景图原创 2017-08-31 15:27:07 · 793 阅读 · 0 评论 -
input表单内添加单位或者文字或者图标的方法
如上面图的需求。暂时想到两种方法 一、绝对定位.div2 span{ position:absolute; right:50%;}<div class="div2"> <label for="money">输入金额:</label> <input type="text" name="money"><span>$</span></div>原理很好理解,父级pos原创 2017-09-05 17:57:53 · 22620 阅读 · 0 评论 -
CSS3--字体字符效果等
@Font-face 特性 可以用来加载字体样式,并且他还能够加载服务器端的字体文字(这个功能挺新颖)。<p><font face="arial">arial courier verdana</font></p>对比下以前的写法<p><font style="font-family: arial">arial courier verdana</font></p>获取服务端字体@font-face原创 2017-08-29 16:29:40 · 285 阅读 · 0 评论 -
CSS3--Transition,Transform和Animation
因为说的是动态效果,所以并没有截图,如果想看效果复制代码后即可以看到。不过还是建议大家手动操作。一、Transition(过渡) 属性: transition-property:用于指定过渡的性质,比如 transition-property:backgrond 就是指 对backgound的变化进行过渡。 transition-duration:用于指定这个过渡的时间。(多久将效果过渡完成)原创 2017-09-08 15:01:11 · 440 阅读 · 0 评论 -
CSS3--弹性盒模型(display:flex)
介绍篇好的文章:https://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/盒模型的概念并不是很陌生。 在传统的不居中,block不会是把块在垂直方向上从上到下排列;inline是在水平方向排列。 而现在要介绍的CSS3的弹性盒模型并没有这样的限制,可以有开发人员自由操作。优势:弹性盒模型可以用简单的方式免租很多常见的布局原创 2017-09-01 12:05:01 · 1136 阅读 · 0 评论 -
CSS3的新特性--选择器
CSS3出来很久了,但是因为本人前端小白,对大部分CSS3的特性并不是很熟悉,所以在实际开发中使用的也不是很多,但CSS3的很多特性会使开发变得共容易(要不然出CSS3干什么呢(摊手)) 国际惯例介绍篇文章:https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/ 文章是对CSS3新特性的总结,并且配有一些小例子,很不错。接下来原创 2017-08-28 12:06:04 · 410 阅读 · 0 评论 -
CSS3--多列布局、边框颜色、圆角、渐变效果、阴影反射
多列布局(multi-column layout) <style> .div{ width:60%; column-count:3; column-rule:1px solid black; column-gap:2em; } </style> <div原创 2017-08-29 18:32:11 · 1156 阅读 · 0 评论 -
css3动画模拟光标
.animation::after { content:''; display: block; width:1px; height:16px; animation: blink 1s infinite steps(1, start) }@keyframes blink { 0%{ background-color: white; } 50%原创 2017-10-27 17:12:49 · 5071 阅读 · 0 评论 -
父元素position:absolute/relative的区别
最近在写div水平垂直居中的时候发现一个问题:就是在父级是absolute的情况下也可以实现。于是就想搞清楚父级position的relative和absolute的区别。先看一下position这个属性,它有四个值: static:会忽略所有top left right bottom的设置,但margin和padding是好使的 fixed:相对于浏览器窗口定位,不会受滚动条的影响。 rel原创 2017-08-15 11:50:47 · 3900 阅读 · 0 评论