CSS
kongjunchao159
这个作者很懒,什么都没留下…
展开
-
CSS HACK技巧
CSS HACK技巧http://blog.sina.com.cn/s/blog_5d64f7e301011m4a.html原创 2015-08-06 15:40:39 · 325 阅读 · 0 评论 -
CSS实现多行文本溢出显示省略号
单行文本溢出显示省略号,可以直接使用text-overflow:ellipsis; white-space:nowrap; *{margin: 0; padding: 0;} div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; mar原创 2016-10-17 19:02:30 · 738 阅读 · 0 评论 -
margin负值实现左右固定中间自适应布局
布局需求左右两列宽度固定(像素单位),中间自适应可以使用负的margin值实现该布局 *{margin: 0; padding: 0;} .main{width: 100%; float: left;} .main .main-box{margin: 0 200px; height: 200px; background-color: red;} .lef原创 2016-10-17 17:43:36 · 607 阅读 · 0 评论 -
margin-bottom负值实现多列等高布局
什么是多列等高布局?经常会有这样的需求,一个父容器中,存在多列子容器,这些子容器的高度是不固定的,正常情况下,父容器的高度会随着其子容器最高的那个容器的高度而变化伸缩,但其它子容器的高度并不会变化,导致如下结果显然,这并不是我们想要的,我们需要左侧和右侧的高度共同变化,这时,就可以使用margin-bottom负边距实现padding补偿法首先,给子容器设置padding-原创 2016-10-17 17:01:52 · 1608 阅读 · 0 评论 -
CSS实现等比例缩放的盒子
如何实现一个等比例缩放的盒子:众所周知,对于一个img元素而言,当你没有指定它的高度height时,它会默认根据它的宽度width等比例缩放其自身大小,而如果换成其它元素则不行,例如div元素,当你调整它的宽度时,它的高度依然会保持原来大小,并不会实现等比例效果,这是因为img在元素分类中属于replaced(被替换的)元素,这种类型表示这个元素内容的显示不是由CSS控制的,换句话说,对于im原创 2016-03-19 10:49:50 · 7436 阅读 · 2 评论 -
IOS下WEB开发细节问题
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以屏蔽ios点击元素时出现的阴影2、-webkit-appearance:none可以屏蔽输入框怪异的内阴影3、-webkit-transform:translate3d(0,0,0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),安卓下可能会产生bug4、ios5+可以通过原创 2015-10-19 10:20:01 · 921 阅读 · 0 评论 -
如何使用font-spider
如何使用字蛛:1、首先安装好NodeJS环境,cmd中执行下列语句:npm install font-spider -g即安装完毕font-spider(C:\Users\Administrator\AppData\Roaming\npm\node_modules\)注意:AppData可能为隐藏文件夹2、在桌面上新建一个html文件,在其css中引入字体,比如:原创 2015-09-23 16:35:04 · 3992 阅读 · 0 评论 -
CSS实现多行文字垂直居中
多行文字垂直居中显示:HTMLxxxxxxxxxxxxxxxCSSdiv{display:table-cell;width:200px;height:100px;border:1px solid red;vertical-align:middle;}div span{display:inline-block;vertical-align:原创 2015-10-19 13:34:01 · 677 阅读 · 0 评论 -
CSS标签
单元格之间的空间:cellspacing="0";单元格与单元格内容之间的空间:cellpadding="5";删除下划线:text-decoration:none;删除ul/li小圆圈:list-style:none;li前面小圆圈:list-style:disc;转换成行内元素:display:inline;转换成块元素:display:block;虚线:dashe原创 2015-08-07 09:32:30 · 321 阅读 · 0 评论 -
CSS中的四种选择器
CSS中四种不同的选择器:1、类选择器,又叫class选择器2、id选择器3、html元素选择器4、通配符选择器selector.css/*class选择器*/.s1{background-color:pink;font-weight:bold;font-size:16px;color:black;}/*id选择器*/原创 2015-08-07 09:45:25 · 668 阅读 · 0 评论 -
绝对定位和相对定位
原创 2015-08-06 16:25:48 · 361 阅读 · 0 评论 -
IE6、7下overflow:hidden失效
IE6、7下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效,解决方案:给overflow:hidden加position:relative或者position:absolute,此外,IE6、7下,overflow:hidden所在容器必须固定高度、宽度原创 2015-08-06 16:11:46 · 312 阅读 · 0 评论 -
css display属性
原创 2015-08-06 15:55:07 · 298 阅读 · 0 评论 -
CSS自定义字体
1、下载字体包,.ttf格式2、css中添加代码:@font-face{font-family:'katong'; src:url(../images/katong_font.ttf); font-style:normal; font-weight:normal;}@font-face{font-family:'katong'; src:url(../images/katong_fon原创 2015-08-06 15:48:07 · 341 阅读 · 0 评论 -
margin-top无效解决方法
浏览器中,有两个嵌套关系的div,如果外层div父元素的padding值为0,那么内层div的margin-top或者margin-bottom的值会转移给外层div原因:盒子没有获得haslayout造成margin-top无效解决方法:1、在父层div加上overflow:hidden;2、把margin-top外边距改成padding-top内边距3、父层原创 2015-08-07 09:32:02 · 1067 阅读 · 0 评论 -
cursor样式
语法:object.style.cursor = value原创 2015-08-06 16:01:54 · 325 阅读 · 0 评论 -
修改element.style样式
修改element.style样式时无法直接修改,找不到该文件,可以通过css中的!important语法优先权来实现我们想要的效果例子:element.style{ padding:20px;}body,html{ padding:0px !important;}则element.style{padding:20px;}被禁用原创 2015-08-06 16:07:33 · 731 阅读 · 0 评论 -
IE8 overflow:hidden 失效
IE6、IE7、IE8 overflow:hidden 失效解决办法:当父元素的直接子元素或者下级子元素拥有样式position:relative属性时,父元素的overflow:hidden就会失效在父元素中加上position:relative即可原创 2015-08-06 15:57:56 · 1054 阅读 · 0 评论 -
CSS实现垂直居中
1、最简单的单行文本line-height垂直居中*{margin:0; padding:0;}.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; text-align:center;}p{line-height:300px;} XXXXX原创 2016-03-08 11:23:23 · 342 阅读 · 0 评论