CSS
万花果子
没文化的前端工程师
展开
-
CSS基础
CSS简介cascading style sheets 层叠样式表(修饰网页显示样式)CSS1发布于1996年,CSS3发布于2001年 ,用来表现样式的计算机语言,遵循W3C标准样式的建立 内部样式 (使用style标记创建样式时,最好将该标记写在; )内联样式(行间样式,行内样式,嵌入式样式 ) 语法:外部样式原创 2016-03-30 19:40:44 · 270 阅读 · 0 评论 -
opacity兼容ie8
兼容ie6-8的透明度问题.demo{ opacity: 0.5; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);}原创 2016-10-08 15:36:36 · 1277 阅读 · 0 评论 -
文字两端对齐 text-align: justify;
很多时候我们想实现这样的自适应功能你 好:xxxx 我 是:xxxx 我们没有:xxxx2个文字前后自动两端对齐,来个栗子: 移动端和pc端都能直接用<div class="mate-tit">哈哈</div>.mate-tit { width: 1.4rem; text-align: justify; height: 25px; color: #333333;}原创 2016-09-09 14:24:17 · 755 阅读 · 0 评论 -
placeholder兼容到ie8
/** * 模拟placeholder * jQuery EnPlaceholder plug * EnPlaceholder是一个跨浏览器实现placeholder效果的jQuery插件 * version 1.0 * by Frans.Lee <dmon@foxmail.com> http://www.ifrans.cn * * 修正无placeholder显示un原创 2016-10-09 15:47:21 · 375 阅读 · 0 评论 -
css sprite 图片整合处理技术(精灵技术)
CSS SpritesCSS Sprites的原理 将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定位技术。图片整合的优势 1)通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度。 2)通过整合图片来减小图片的体积。background:#000 url() no-repeat原创 2016-04-14 19:27:33 · 1420 阅读 · 0 评论 -
关于CSS定位的理解
相对定位,绝对定位,固定定位position:relative相对定位相对定位,对象不可层叠,将依据right,top,left,bottom等属性在正常文档中偏移位置。但是并不脱离标准流,即不会因相对位置的改变而改变原来位置的占据。 相对定位的使用还是比较普遍和方便的,在遇到需要调整位置的时候添加一个相对定位就能很轻松的移动到周边需要细调的位置。position:absolute绝对定位绝原创 2016-04-14 16:05:06 · 397 阅读 · 0 评论 -
关于ie6常见浏览器兼容问题
ie6的退役无疑对前端工程师们来说是巨大的福音,不必再为ie6的兼容问题烧脑费时搬砖了,虽如此,还是整理一下ie6浏览器下的常见兼容性问题图片间隙描述:在div中插入图片时,图片会将div下方撑大三像素。 一.div中的图片间隙(该bug出现在IE6及更低版本中) 解决方案: hack1:将与写在一行上; hack2:将转为块状元素,给添加声明:display:block; 二. d原创 2016-04-07 20:35:53 · 2517 阅读 · 0 评论 -
CSS溢出实现一个图片放大的效果
关于溢出的基本属性 overflow:visible/hidden/scroll/auto/inherit; visible:默认值,内容不会被修剪,会成现在元素框之外; hidden:内容会被修剪,并且其余内容是不可见的; scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容; auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容; inherit:规定原创 2016-04-06 18:55:48 · 2707 阅读 · 0 评论 -
关于vertical-align实现图片垂直居中
有时候我们会遇到多个不同大小图片排列居中的情况,但是图片大小不一致,又不希望通过给图片设定固定宽高来改变图片大小时,来给图片实现垂直居中的效果,这时候用相对定位就不大方便了,用vertical-align可以来实现图片垂直居中的效果。举个栗子 Html<div> <img src="images/11.gif"> <span></span></div>CSSdiv{ wi原创 2016-04-07 19:30:10 · 691 阅读 · 0 评论 -
CSS盒子模型理解
盒子模型刚开始接触html的时候对于盒模型的理解还不够清晰,弄清楚后其实发现特别的简单,其实就是想象一个房间,里面放一张床,这个床的位置,通过magin和padding来自己定位。 margin也就是外边距,容器到外边的距离 padding也就是内边距,容器到容器内的距离 一个完整的盒子是由外边距加内边距加容器加边框的距离先上个经典图![盒模型](http://img.blog.csdn.n原创 2016-04-01 13:14:13 · 885 阅读 · 0 评论 -
常用手机uc浏览器兼容问题记录(陆续补充)
移动端的uc和微信被认定为手机端的ie6,从flex出世以来,移动端的布局使用flex真的是得心应手,各种布局问题得以简化,但是uc浏览器实在是业界一大毒瘤,不得不特别关照,下面列一下我再工作中遇到过的手机uc兼容性问题,做个归纳整理。 1. uc浏览器可以识别空格 数据中如果加入了空格浏览器是不会自动过滤的,在自己的手机浏览器不会有这个问题,不过平时注意一下后台的数据处理的话,就不会产生什么影原创 2016-09-23 14:37:38 · 10079 阅读 · 1 评论