kongjunchao159的博客

仅对平时工作接触到的知识点做个记录,防止遗忘

CSS实现多行文本溢出显示省略号

单行文本溢出显示省略号,可以直接使用 text-overflow:ellipsis; white-space:nowrap; *{margin: 0; padding: 0;} div{width: 200px; height: 40px; line-height: ...

2016-10-17 19:02:30

阅读数:423

评论数:0

margin负值实现左右固定中间自适应布局

布局需求 左右两列宽度固定(像素单位),中间自适应 可以使用负的margin值实现该布局 *{margin: 0; padding: 0;} .main{width: 100%; float: left;} .main .main-box{margin: 0 2...

2016-10-17 17:43:36

阅读数:352

评论数:0

margin-bottom负值实现多列等高布局

什么是多列等高布局? 经常会有这样的需求,一个父容器中,存在多列子容器,这些子容器的高度是不固定的,正常情况下,父容器的高度会随着其子容器最高的那个容器的高度而变化伸缩,但其它子容器的高度并不会变化,导致如下结果 显然,这并不是我们想要的,我们需要左侧和右侧的高度共同变化,这时,就可以...

2016-10-17 17:01:52

阅读数:1018

评论数:0

CSS实现等比例缩放的盒子

如何实现一个等比例缩放的盒子: 众所周知,对于一个img元素而言,当你没有指定它的高度height时,它会默认根据它的宽度width等比例缩放其自身大小,而如果换成其它元素则不行,例如div元素,当你调整它的宽度时,它的高度依然会保持原来大小,并不会实现等比例效果,这是因为img在元素分类中属于...

2016-03-19 10:49:50

阅读数:2931

评论数:1

CSS实现垂直居中

1、最简单的单行文本line-height垂直居中 *{margin:0; padding:0;} .box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; te...

2016-03-08 11:23:23

阅读数:241

评论数:0

CSS实现多行文字垂直居中

多行文字垂直居中显示: HTML xxxxxxxxxxxxxxx CSS div{ display:table-cell; width:200px; height:100px; border:1px solid red; vertical-align:middle; } div span{ d...

2015-10-19 13:34:01

阅读数:436

评论数:0

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下...

2015-10-19 10:20:01

阅读数:757

评论数:0

如何使用font-spider

如何使用字蛛: 1、首先安装好NodeJS环境,cmd中执行下列语句: npm install font-spider -g 即安装完毕font-spider (C:\Users\Administrator\AppData\Roaming\npm\node_modules\) 注意:Ap...

2015-09-23 16:35:04

阅读数:2241

评论数:0

CSS中的四种选择器

CSS中四种不同的选择器: 1、类选择器,又叫class选择器 2、id选择器 3、html元素选择器 4、通配符选择器 selector.css /*class选择器*/ .s1{ background-color:pink; font-weight:b...

2015-08-07 09:45:25

阅读数:306

评论数:0

CSS标签

单元格之间的空间:cellspacing="0"; 单元格与单元格内容之间的空间:cellpadding="5"; 删除下划线:text-decoration:none; 删除ul/li小圆圈:list-style:none; li前面小圆圈:list-st...

2015-08-07 09:32:30

阅读数:221

评论数:0

margin-top无效解决方法

浏览器中,有两个嵌套关系的div,如果外层div父元素的padding值为0,那么内层div的margin-top或者margin-bottom的值会转移给外层div 原因:盒子没有获得haslayout造成margin-top无效 解决方法: 1、在父层div加上overf...

2015-08-07 09:32:02

阅读数:294

评论数:0

绝对定位和相对定位

2015-08-06 16:25:48

阅读数:192

评论数:0

IE6、7下overflow:hidden失效

IE6、7下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效,解决方案:给overflow:hidden加position:relative或者position:absolute,此外,IE6、7下,overflow:h...

2015-08-06 16:11:46

阅读数:168

评论数:0

修改element.style样式

修改element.style样式时无法直接修改,找不到该文件,可以通过css中的!important语法优先权来实现我们想要的效果 例子: element.style{     padding:20px; } body,html{     padding:0px !importa...

2015-08-06 16:07:33

阅读数:208

评论数:0

cursor样式

语法:object.style.cursor = value

2015-08-06 16:01:54

阅读数:182

评论数:0

IE8 overflow:hidden 失效

IE6、IE7、IE8 overflow:hidden 失效 解决办法: 当父元素的直接子元素或者下级子元素拥有样式position:relative属性时,父元素的overflow:hidden就会失效 在父元素中加上position:relative即可

2015-08-06 15:57:56

阅读数:324

评论数:0

css display属性

2015-08-06 15:55:07

阅读数:140

评论数: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...

2015-08-06 15:48:07

阅读数:191

评论数:0

CSS HACK技巧

CSS HACK技巧 http://blog.sina.com.cn/s/blog_5d64f7e301011m4a.html

2015-08-06 15:40:39

阅读数:183

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭