css
关注
分享
扫一扫
蚁族的奋斗1
幸福是需要奋斗的，而奋斗本身也是一种幸福
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css 100% 和 100vh区别
100% 是相对于父元素 100vh 是相对于 window原创 2020-06-04 12:59:53 · 4486 阅读 · 0 评论 -
display:node 的理解
display:node是在文档流看不到了，但是节点还在，你写的代码（节点）还在原创 2020-04-14 14:11:58 · 889 阅读 · 0 评论 -
原生 css 的变量
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties原创 2020-03-28 16:08:55 · 240 阅读 · 0 评论 -
body高度为0为什么背景色能充满整个浏览器？
原创 2020-03-26 15:16:42 · 677 阅读 · 0 评论 -
click300ms点击问题和点击穿透
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> <!-- ...原创 2019-12-25 18:29:52 · 327 阅读 · 0 评论 -
CSS布局：浮动与绝对定位的异同点
相同点：（1）都是漂起来( 离开原来的位置 )（2）并且都不占着原来的位置（3）另外，如h1包文字的标签，默认只设height的情况下，它的width是铺满父元素的宽度的，而当浮动或绝对定位后，它的宽度就是h1内文字的宽度（4）都是到当行的最左边不同点：float后，(这里float:left )它后面的对象，会占据它原来的位置，但是后面对象里的文字和图片等好像知道它在左边，所...转载 2020-02-08 11:40:27 · 371 阅读 · 0 评论 -
hover 穿透
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-16 11:04:30 · 1634 阅读 · 0 评论 -
background 简写的问题
<div style="width:200px;height:200px;border:1px solid red;background:red url('https://www.baidu.com/img/bd_logo1.png?where=super') no-repeat center center / cover"> </div> <di...原创 2019-12-04 15:24:52 · 141 阅读 · 0 评论 -
js 设置元素行内样式 都是驼峰
可以打印事件对象的target ，去看style这个属性原创 2019-12-04 14:25:42 · 568 阅读 · 0 评论 -
flex：1
如果想一个元素的子元素 大小均分，就用 这个不缩小。放大同样的比例原创 2019-11-29 14:43:55 · 157 阅读 · 0 评论 -
如何让元素跟着页面一直在最下面
min-height:100%;display:flex;justify-content:space-between;flex-direction:column;原创 2019-11-28 17:23:24 · 573 阅读 · 0 评论 -
css中hack是什么
https://www.cnblogs.com/Renyi-Fan/p/9006084.html原创 2019-11-18 11:44:18 · 138 阅读 · 0 评论 -
css 光标类型
https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor有一些是平常的文档看不到的，这个是比较全的原创 2019-11-09 15:06:11 · 197 阅读 · 0 评论 -
移动端图片变模糊问题
细说移动端 经典的REM布局 与 新秀VW布局移动端像素及视口的理解随着技术的进步，很小的屏幕能容纳很高的物理像素，比如1920*1080以前只能应用于大的显示器，现在可能被容纳于一个小的移动端设备中。利用viewport。1. 手机端的问题 如果不加viewport，传统的html 在移动端会缩小，用户能缩放等问题，因为布局窗口和视图窗口不一致， 所以利用vie...原创 2019-11-08 11:20:47 · 895 阅读 · 0 评论 -
移动端高清适配方案
https://www.cnblogs.com/superlizhao/p/8729190.html原创 2019-11-04 17:43:29 · 239 阅读 · 0 评论 -
iphone中 input圆角bug
今天写了个简单的登录注册，在电脑手机（除了iphone）样式都没有问题，但在iphone中却出现了异常，提交的按钮变成圆角被背景渐变的效果，随后又测试两个iphone版都是一个样，断定应该是safari惹的祸。如图： 搜索一番，果然，是iphone将<input type="submit">和<input type="reset">被safari浏...原创 2019-10-30 14:04:31 · 261 阅读 · 0 评论 -
CSS Modules 用法教程
http://www.ruanyifeng.com/blog/2016/06/css_modules.htmlcss-loader 和 styles-loader 的css 变成对象，插入到dom中只有在vue react 等（有虚拟dom 的框架中，因为可以将class 作为变量输入）...原创 2019-10-29 15:15:24 · 296 阅读 · 0 评论 -
移动端1px 的产生和解决方法
https://www.jianshu.com/p/31f8907637a6原创 2019-10-26 14:17:46 · 176 阅读 · 0 评论 -
table 列宽度固定的方法
1. table-layout：fixed 改变表格的算法2. colgroud 和 col 来固定 宽度原创 2019-10-22 19:00:45 · 1866 阅读 · 0 评论 -
CSS3 width——fill-available、max-content、min-content、fit-content
https://www.cnblogs.com/xiaohuochai/p/7210540.html#anchor1原创 2019-10-21 10:12:34 · 195 阅读 · 0 评论 -
详解margin： auto
https://www.cnblogs.com/coderL/p/7667474.html水平方向：默认就是水平方向的总和就等于父元素 所以一般来说是水平居中垂直方向： 默认就是自己元素的高 所以垂直方向居中不管用 （除非绝对定位）...原创 2019-10-18 15:00:11 · 631 阅读 · 0 评论 -
flex-grow flex-shrink flex-basic
flex-grow flex-shrink flex-basic 都是来定义元素的大小 是 flex 的缩写形式（0，1，auto）；不放大，缩小，自动大小flex-basic 就是width；因为都是来定义元素的大小 ，所以不要一起用比如：flex-grow:2 单纯的以为是占2分，其实还得加上flex-basic 默认auto的长度或者用的时候，flex-basic：0%...原创 2019-10-12 15:07:31 · 432 阅读 · 0 评论 -
css display 与 opacity 和 visibility的区别
小结如下：1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样...原创 2019-09-21 15:34:18 · 198 阅读 · 0 评论 -
笔记：css能做到文本超出第二行显示省略号
.ellipsis{ width:100px; overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/ text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/ display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/ ...原创 2019-10-11 13:49:02 · 413 阅读 · 0 评论 -
transtion 和animation 和 transform 的区别
CSS3 有3种和动画相关的属性：transform, transition, animation。其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以三者之中transform 常常配合后两者使用，在页面实现酷炫的五毛（或五元）特效。但后两者又有什么区别呢？这篇文章做了比较好的总结：http://www.kir...原创 2019-11-14 15:52:01 · 2306 阅读 · 0 评论 -
rem 学习
1. 理论 参考文章 https://blog.youkuaiyun.com/qq20004604/article/details/670710082. 公式 参考文章 css88.com/doc/backbone/#examples window.onload = function(){ /*720代表设计师给的设计稿的宽度，你的设计稿是多少，...转载 2018-11-10 15:48:46 · 170 阅读 · 0 评论 -
vue 修改 iview 的样式
覆盖iview样式转载 2019-06-25 14:08:59 · 2001 阅读 · 0 评论 -
table border-collapse 的属性
border-collapse 的属性 设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。和cellspacing 的区别在于cellspacing 只是td和td 之间没有间距了，但是边框是2px；border-collapse 的作用不仅td 之间没有间距，而且边框是1px；...原创 2019-05-11 16:17:06 · 1863 阅读 · 0 评论 -
浮动
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。...原创 2018-11-20 10:58:20 · 106 阅读 · 0 评论 -
position
注意事项position 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。...原创 2018-11-20 10:56:45 · 122 阅读 · 0 评论 -
pointer-events
https://www.css88.com/book/css/properties/user-interface/pointer-events.htm转载 2018-11-23 16:57:46 · 673 阅读 · 0 评论 -
vertical-align
vertical-align 起作用的条件：1. 只能对原生的行内元素或者是行内块状元素设置是有效果的（display：inline-block 的不算）2. 一定是在一行有多个行内元素(有多个才需要在垂直方向上对齐嘛)...原创 2018-11-21 22:00:51 · 116 阅读 · 0 评论 -
样式学习
1.Vue中scoped css和css module比较 https://www.cnblogs.com/macq/archive/2018/05/17/9051097.html1. <style scoped><style/>vue-loader vue永webpack来安装时候的一个包，链接：https://vue-loader.vue...原创 2018-11-15 10:58:14 · 195 阅读 · 0 评论 -
关于拾色器
1.chrome 在调试的时候样式可以用chrome再带的拾色器，但是只能捡取页面的颜色2. 或者是下载一个拾色器的插件，但是一样只能拾取页面的颜色3.最好的嘴强大的拾色器是websrtorm 编辑器样式里面的拾色器，不近可以拾取页面的颜色，也可以拾取任何桌面端应用的颜色 ...原创 2018-10-08 16:16:05 · 690 阅读 · 0 评论 -
图片在相应页面变化的时候拉长
解决方法：1. 不要设置高度，此时高度会自适应2. 通过padding 来解决。可以自行百度3. 设置滚动条解决原创 2018-08-04 14:25:05 · 334 阅读 · 0 评论 -
base64 相关知识，不知运用在图片，比如之前的生成excel文件href属性
这是一篇很好的文章https://www.cnblogs.com/coco1s/p/4375774.html转载 2018-07-04 16:09:08 · 775 阅读 · 0 评论 -
iframe 学习
<iframe allowfullscreen frameborder="0" height="100%" width="100%" src="http://videos.sproutvideo.com/embed/1c9adeb71611e3c894/37e6977349736162"></iframe>iframe 在本页面可以嵌入另外一个独立的页面，比如说优酷，原创 2018-06-20 17:23:05 · 296 阅读 · 0 评论 -
ie 在select中，option 默认显示空的不管用，angular4
<option selected="selected" disabled="disabled" style='display: none' value=''></option> disabled="disabled" 这个不能加，加的话在首次加载会忽略掉。原创 2018-06-20 13:53:16 · 720 阅读 · 0 评论 -
lineheight
lineheight 设置块状元素的行高，当块状元素的高和行号一样，文本就会垂直居中原创 2018-11-20 11:10:47 · 295 阅读 · 0 评论 -
vue scope 和module css 的对比
https://mp.weixin.qq.com/s?__biz=MzUzOTM0MTE4OQ==&mid=2247485033&idx=1&sn=a0701322cbbb5f132e17974d99529211&chksm=fac8be83cdbf3795bb8193c998d1cf2511b8cf061e1c88200c28a3154a94155b2e33026...转载 2018-12-08 16:39:46 · 855 阅读 · 0 评论