1. <input>标签的默认样式

当在页面中添加一个input标签，当点击输入框时会有一个外边框包裹着，可以使用 ：
input { outline: none} 去除点击时产生的外边框包裹默认样式

input{border: none} 去除input标签的默认样式

2. div自适应浏览器高度

html,body{

	height:100%;

	overflow:hidden;

}

/*需要自适应的div*/

.container {

	height: 100%;

}

3. display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

例子：

<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; 隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; 隐藏区域</span><span style="background-color:Green">显示区域</span>
</body>
</html>

4.空格转义字符

记录一下，空格的转义字符分为如下几种：

平时一般用的是&nbsp;

1. &nbsp;&160#;不断行的空白（1个字符宽度）

2. &ensp;&8194#;半个空白（1个字符宽度）

3. &emsp;&8195#;一个空白（2个字符宽度）

4. &thinsp;&8201#;窄空白（小于1个字符宽度）

平时一般用的是&nbsp;但是在中文中也许有时候更适合用&emsp;

5. 垂直水平居中

1. 父元素div设置为relative；

2. 子元素div

table{

              position: absolute;

              height: 200px;

              width: 380px;

              top: 50%;

              left: 50%;

              margin-top: -100x;　　　　//等于高度的一半

              margin-left: -190px;　　 //等于宽度的一半

            }

　　

css小tip的更多相关文章

  1. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  2. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  3. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  4. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  5. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  6. 小tip: 某简单的字符重叠与图形生成----张鑫旭

    引言 字符重叠不是什么稀奇的东西. 如1像素错位模拟阴影效果: 或者powerFloat中展示的带边框三角: 以及其他很多. 但是技术这东西不是豆腐,老了可以吃,臭了也可以吃:那我这里还拿着个说事作甚 ...

  7. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  8. HTML+CSS小实战案例

    HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...

  9. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

随机推荐

  1. colorPrimaryDark无法改变状态栏颜色

    设置完colorPrimaryDark后,这个颜色是改变状态栏的颜色的, colorPrimary是改变标题栏背景色的 发现状态栏一直是灰色. 然后在布局文件中 AndroidMainifest.xm ...

  2. supervisor使用详解

    1.什么是supervisorsupervisor是用python写的一个进程管理工具,用来启动,重启,关闭进程. 2.supervisor的安装 pip install supervisor 3.s ...

  3. linux cpu性能测试

    sysbench --test=cpu --cpu-max-prime=20000000 run --num-threads=4 mpstat -P ALL 1 1000000

  4. Winform中调用js函数

    var wb = new WebBrowser(); wb.AllowNavigation = true; wb.ScriptErrorsSuppressed = false; wb.Navigate ...

  5. Morphia 学习一 注解

    http://blog.csdn.net/liumm0000/article/details/7535858 生命周期方法注解(delete没有生命周期事件)@PrePersist save之前被调用 ...

  6. mac 10.9开启有道词典取词功能

    取词时候,有道词典给出提示,说要去开启辅助功能,但提示的是在mac 10.8上面怎么操作,在10.9的话,就是以下位置去改了. 补充以下: 在mac机器上,实际上大多数的单词都能从自带的词典中查找到. ...

  7. Android 另类方法监听软键盘的弹出收起事件

    http://www.cnblogs.com/csonezp/p/5065624.html 最近做的项目碰到个问题,a界面是fragment+recyclerview,b界面带个edittext,并且 ...

  8. 【转】贾扬清：希望Caffe成为深度学习领域的Hadoop

    [转:http://www.csdn.net/article/2015-07-07/2825150] 在深度学习(Deep Learning)的热潮下,Caffe作为一个高效.实用的深度学习框架受到了 ...

  9. laravel 指定 版本安装

    composer create-project laravel/laravel=5.0.* --prefer-dist composer create-project laravel/laravel= ...

  10. (LinkedList)2. Add Two Numbers

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...