css小tip
1. <input>标签的默认样式
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.空格转义字符
记录一下,空格的转义字符分为如下几种:
平时一般用的是
1. &160#;不断行的空白(1个字符宽度)
2.  &8194#;半个空白(1个字符宽度)
3.  &8195#;一个空白(2个字符宽度)
4.  &8201#;窄空白(小于1个字符宽度)
平时一般用的是 但是在中文中也许有时候更适合用 
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的更多相关文章
- CSS小tip整理
CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...
- 小tip: 某简单的字符重叠与图形生成----张鑫旭
引言 字符重叠不是什么稀奇的东西. 如1像素错位模拟阴影效果: 或者powerFloat中展示的带边框三角: 以及其他很多. 但是技术这东西不是豆腐,老了可以吃,臭了也可以吃:那我这里还拿着个说事作甚 ...
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- HTML+CSS小实战案例
HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...
- css小细节罗列
有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...
随机推荐
- 论文笔记之: Hierarchical Convolutional Features for Visual Tracking
Hierarchical Convolutional Features for Visual Tracking ICCV 2015 摘要:跟卢湖川的那个文章一样,本文也是利用深度学习各个 layer ...
- yii2 使用composer安装
composer global require "fxp/composer-asset-plugin:~1.0.0" composer create-project --prefe ...
- 基于Spring框架的Shiro配置
一.在web.xml中添加shiro过滤器 <!-- Shiro filter--> <filter> <filter-name>shiroFilter</ ...
- [内核]Linux workqueue
转自:http://blog.chinaunix.net/uid-24148050-id-296982.html 一.workqueue简介workqueue与tasklet类似,都是允许内核代码请求 ...
- Android学习笔记(八)
android中常见空间的使用方法 1.TextView TextView主要用于在界面上显示一段文本信息,如下面代码所示: <LinearLayout xmlns:android=" ...
- rsync+sersync实现文件实时同步
前言: 一.为什么要用Rsync+sersync架构? 1.sersync是基于Inotify开发的,类似于Inotify-tools的工具 2.sersync可以记录下被监听目录中发生变化的(包括增 ...
- git 新建项目
备份. 1.cd dirctory 2.git init 3.git.oschina.net 上新建项目. 4.git remote add origin XXX.git 5.git push ...
- 实用的VS工具
工具 1.Visual Studio Visual Studio Productivity Power tool:Visual Studio专业版(及以上)的扩展,具有丰富的功能,如快速查找,导航解决 ...
- java maven诡异的错误no class found
从服务器下载一个java web项目,启动老提示no class found,查看maven依赖库,相关的jar包都已经引入.同样一个项目,在别的机器都可以运行,唯独在我本机运行出错. 为了排错,将其 ...
- 课堂笔记--Strom并发模型
Strom并发模型: topology是如何运行的?(可与mapreduce对比) 第一层:cluster 第二层:supervisor(host.node.机 ...