随笔分类 -  css

css 布局解决方案
摘要：转自https://mp.weixin.qq.com/s?__biz=MjM5OTA1MDUyMA==&mid=2655441098&idx=2&sn=089c106e9ee03dfcfc58810b2f5991a2&chksm=bd731cbd8a0495ab01a057c0e680b544caa 阅读全文
posted @ 2018-04-16 09:53 四国诸葛不亮 阅读(136) 评论(0) 推荐(0)
页面预加载
摘要：css: 阅读全文
posted @ 2017-12-26 14:49 四国诸葛不亮 阅读(172) 评论(0) 推荐(0)
侧面图片 拉伸铺满不变形
摘要：html: <div id='left'></div> 设定#left的背景图：background-image:url(''../img.jpg) 预设#left的宽度为25%； 通过hover,或者click,将#left的宽度设置为100%； 相应的背景图片会根据#left 大小 等比的缩放 阅读全文
posted @ 2017-11-06 16:37 四国诸葛不亮 阅读(247) 评论(0) 推荐(0)
超出长度的内容显示省略号
摘要：html： <p><a class="my_note">阿货到付款就会水洒苏打粉时代电费水电费空间啊还是短发角色的</a></p> css: 阅读全文
posted @ 2017-10-30 17:19 四国诸葛不亮 阅读(278) 评论(0) 推荐(0)
canvas 时钟
摘要：canvas听了很久，一直没用上，今天去慕课网上看了一个canvas绘制动态时钟的视频，跟着写了一遍，这个例子应用了许多个canvas的API。 这个例子支持ie9以上： 阅读全文
posted @ 2017-06-15 15:55 四国诸葛不亮 阅读(173) 评论(0) 推荐(0)
栅格系统原理
摘要：先看代码 html： <div> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> css： ul,li{padding:0;margin:0;list-style: none;} *{box-sizing:border-box;-m 阅读全文
posted @ 2017-05-30 18:23 四国诸葛不亮 阅读(440) 评论(0) 推荐(0)
图片在盒子中 垂直居中 覆盖的处理
摘要：html: <div class="imgbox"> <img src="" /> </div> 图片在盒子中垂直居中 css: .imgbox{ height:100px; width:100px; display:table-cell; vertical-align:middle; text-a 阅读全文
posted @ 2017-05-27 17:36 四国诸葛不亮 阅读(868) 评论(0) 推荐(0)
margin:auto 实现的条件
摘要：网上搜索到margin：auto 实现的条件有三： 第一：给居中的元素一个固定的宽度（固定的宽度不是指一定要px） 第二：该元素没有设浮动 第三：父级使用<center></center>标签（center标签在html4.01中已经废弃，在html5里不支持可以设置css属性text-align: 阅读全文
posted @ 2017-05-11 11:36 四国诸葛不亮 阅读(605) 评论(0) 推荐(0)
ie6、7 下input的边框问题 ？
摘要：input的border设置为none,ie8及以上border都兼容，ie6和7的border还继续存在，将border设为0时所有浏览器上都不存在了，但是border为0时还是会继续的渲染。 将input的border设为"0 none",ie7及以上都正常了，但是ie6上input和a不在同一 阅读全文
posted @ 2016-06-30 14:22 四国诸葛不亮 阅读(435) 评论(0) 推荐(0)
去除img的空白符；inline-block元素之间间距的方法
摘要：去除img的空白符 在div里面嵌套了一个img出来问题，div的高度超过了img的高度,大约3px ,查看了样式没什么问题，后来百度了一下，找到了2种的方法都有效： 第一种:img{display:block} 第二种:{vertical-align:top} 去除inline-block元素之间 阅读全文
posted @ 2016-06-21 11:22 四国诸葛不亮 阅读(198) 评论(0) 推荐(0)
position定位 left和offsetLeft的区别
摘要：1.当该对象的position为relative时，根据自己最初的位置进行定位，不受父级的定位影响。 例： 2.当该对象的position为fixed时，根据窗口的视图进行定位，不受父级的定位影响。 例： 3.position:sticky 粘性定位，相对于父级和BFC进行定位。类似fixed定位和 阅读全文
posted @ 2016-05-27 13:54 四国诸葛不亮 阅读(666) 评论(0) 推荐(0)