CSS
蜗牛1T
中山大学计算机系网络工程专业本科毕业。
2010年加入金山安全至今,专注前端开发,PHP和NodeJS也有所涉猎。
喜欢关注业界动态,乐于学习新技术,有代码洁癖强迫症,追求高质量高效率的代码。
欢迎关注微信公众号《前端分享吧》
展开
-
FireFox中的Flex兼容性问题
在项目中使用elementUI的datePicker,代码如下: <el-date-picker type="daterange" :clearable="false" start-placeholder="Begin Date" end-placeholder="End Date" ...原创 2020-04-07 14:08:53 · 2410 阅读 · 0 评论 -
CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。语法CSS 代码:/* offset-x | offset-y | color */box-shadow: 60px -...转载 2019-07-12 18:57:51 · 6338 阅读 · 0 评论 -
外边距折叠(margin collapse)
一、定义两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开 这些 margin 都处于普通流中注意一点,在没有被分隔开的情况下,一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻;只有在一个元素的 height 是 "auto" 的...原创 2019-03-24 15:15:15 · 286 阅读 · 0 评论 -
IE6的双边距Bug以及解决办法
bug描述:就是你明明设置margin-left为10px,但是在IE6下显示的左边距却是20px。bug出现的条件:当浮动元素的浮动方向和外边距的设置方向一致且浮动元素靠近浮动边界时才会出现。比如元素向左浮动时设置左边距,并且为一行中的第一个浮动元素时会出现这个bug,同样,向右浮动时设置右边距,且为一行中的最后一个浮动元素时也会出现这个bug。bug的解决办法:给浮动元素块加上disp...原创 2019-03-18 22:30:52 · 383 阅读 · 0 评论 -
解决IE6中PNG透明显示灰底的8种方法
方案一 - 滤镜解决方案介绍:滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解决IE6的PNG透明问题,滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意:此方法在部分版本的IETest中无效,建议使用标准的IE6来进行测试!思路:1、书写正常的CSS代码,通过background导入图片,这样所有的浏览器均使用了此PNG图片;background:url(....转载 2019-03-17 16:32:08 · 459 阅读 · 0 评论 -
说说BFC(Block Formatting Contexts,块级格式化上下文)
一、BFC是什么?BFC是容器的一种属性,从样式上看,具有BFC的元素与普通的容器没有什么区别,但从功能上,具有BFC的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且BFC具有普通容器没有的一些特性。二、BFC的特性1、BFC会阻止外边距折叠即便两个块级元素相邻,但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。2、BFC可以包含浮动的...原创 2019-03-19 23:00:13 · 243 阅读 · 0 评论 -
未来必热:SVG Sprite技术介绍(转自张鑫旭-鑫空间-鑫生活)
一、Sprite技术这里所说的Sprite技术,没错,类似于CSS中的Sprite技术。图标图形整合在一起,实际呈现的时候准确显示特定图标。另,本文图片甚多,爪机党继续浏览需慎重。二、SVG Sprite与symbol元素目前,SVG Sprite最佳实践是使用symbol元素。symbol元素是什么呢?单纯翻译的话,是“符号”的意思。然,这个释义并不符合这里的场景。不知大家有没有...转载 2019-03-09 23:13:15 · 2726 阅读 · 0 评论 -
关于布局
转载 2019-03-05 23:10:21 · 109 阅读 · 0 评论 -
Flex 布局教程:实例篇
一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明,本节的HTML模板一律如下。<div class="box"> <span class="item"></span></div>上面代码中,div元素(代表...转载 2019-03-05 17:56:49 · 151 阅读 · 0 评论 -
Flex 布局教程:语法篇
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地...转载 2019-02-24 23:17:40 · 250 阅读 · 0 评论 -
ie6下js动态更改图片地址,图片不显示的bug
当在ie6中用js动态更改图片地址时,图片不会变换,产生的原因是或如应用a标签的话其实不能禁止a标签最后触发一个甚么行动,致使ie6会过错的以为页面刷新或重定向了,而且中止了当前所有衔接,新图片的加载就被aborted了。解决方法是不使用a标签,或者在方法的最后加上一句 return false;就可以了。如看不清楚?换一张图片转载 2014-08-13 17:13:27 · 1328 阅读 · 0 评论 -
IE6下text-overflow:ellipsis不生效
对于父元素定了宽度而自己本身没定宽度的设置overflow:hidden;text-overflow:ellipsis;white-space:nowrap;这样的样式时,除了IE6外的浏览器都可以自动省略过长的文本,所以为了兼容IE6,需要给P元素定一个宽度:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;_widt原创 2014-02-14 18:12:05 · 3174 阅读 · 0 评论 -
浮动的li在IE6、7、8下出现默认间距的问题
在IE6、7、8下,以下样式:.myUL{list-style: none;height: 98px;width:957px;}.myLI{display: block;float: left;width: 319px;height: 98px;text-align:center;line-height: 98px;} abc mmm会出现每一个浮动的li都比前原创 2014-02-14 18:05:58 · 1053 阅读 · 0 评论 -
css解决td单元格内文字溢出
td单元格内显示的文字太长时,总是会自动分行,把表格撑高了,或者密密麻麻的一片,总是不好看~俺一开始的做法是用php的mb_substr()来截取定长的字符串,但是,因为中英文字节的差异,比如,10个中文字符就比10个英文字符要长得多,在网页上显示起来就忽长忽短,无法对齐,很不美原创 2011-07-26 15:36:01 · 8100 阅读 · 0 评论 -
浏览器兼容之IE6\IE7\IE8专用CSS样式
拿color:#000; 这个一个样式为例:IE6专用样式: _color:#000 ;IE7专用样式: #color:#000;IE8专用样式: color:#ooo\0;IE6、7、8共用:color:#000\9;IE6、7共用:*color:#000;=======================转载 2013-01-31 11:19:02 · 10416 阅读 · 1 评论 -
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
在IE6,IE7下,子元素使用position:relative、父元素使用overflow:auto后,我们预期的是滚动条滚动时,子元素也随着滚动,实际情况是内容不滚动,就感觉你是定位定在那里了。解决办法是父元素添加position:relative样式。原创 2012-05-07 18:03:34 · 8272 阅读 · 2 评论 -
IE6的png显示问题以及div无法实现1px高度问题的解决
1、先说PNG的问题吧~(1)IE6的PNG显示就是个老生常谈的问题,我平常都是用js来解决,最近发现有个png8格式的文件,可以在IE6下显示png,而且背景透明~但也不是百试百灵,对一些颜色丰富的小图片,显示得就不是那么尽如人意了~(2)还有一种CSS的解决方法:原创 2011-08-21 18:34:58 · 1094 阅读 · 0 评论