css学习笔记

内容居中

一、CSS 居中 — 水平居中

body{ text-align:center; display: inline-block;}   # 内部居中 

body{margin:0 auto;}   #外部居中

center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

二. CSS居中 — 垂直居中

 

1、单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}

 

div {line-height:父控件高; vertical-align:top}

 

优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要

 

 

2、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。

.middle-demo-2{
display: table-cell;
height: 300px;
vertical-align: middle;
}

可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。

优点：
不用说了吧，就是表格，效果和表格一模一样
缺点：
IE下无效

 

 

四、以毒攻毒！用 IE 的 bug 解决 IE 中的绝对居中
先不得不说一句，IE 真的是个很烂的浏览器，CSS1中的定义都不支持，害得要我们转个大圈子来造居中。不过就像我说的，凡是 table 布局可以实现的，CSS 一定可以实现，即使在 IE 里也不例外。我研究 IE layout 模式多年，还是找出了一个可以在 IE 中绝对居中的方法。这个方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行

.middle-demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
}

div { position: absolute; left:50%; Top:50%;z-index: 1; }

窗口定位

position: fixed;

浮动

float: left;

背景

 

background: #00FF00 url(bgimage.gif) no-repeat [fixed top/20px 20px];

 

伪代码

[.tml_content]:hover [.btn_ctrl] {display:block;}

 

发光：

box-shadow：length length length length color
length：阴影水平偏移值
length：阴影垂直偏移值
length：阴影模糊值
length：阴影边框
color：阴影颜色

说明：设置块阴影

box-shadow:3px 3px 6px 0px #666
效果如下图:

box-shadow:-3px -3px 6px 0px #666
效果如下图：

box-shadow:0px 0px 12px 0px #666
效果如下图：

box-shadow: 0px 0px 10px 5px #666
效果如下图：

 transition:border linear .2s,box-shadow linear .5s;
 -moz-transition:border linear .2s,-moz-box-shadow linear .5s;                 
 -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
 outline:none;border-color:rgba(241,39,242,.75);
 box-shadow:0 0 8px rgba(241,39,232,.5);
 -moz-box-shadow:0 0 8px rgba(241,39,232,.5);
 -webkit-box-shadow:0 0 8px rgba(241,39,232,3);

 

 

CSS 内阴影

 

 

浏览器参照基准：Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE9.0 and Later

内阴影效果（偏移值都为正）：

#box-shadow{
	-moz-box-shadow:5px 5px 5px #999 inset;               /* For Firefox3.6+ */
	-webkit-box-shadow:5px 5px 5px #999 inset;            /* For Chrome5+, Safari5+ */
	box-shadow:5px 5px 5px #999 inset;                    /* For Latest Opera */
}

内阴影效果（偏移值都为负）：

#box-shadow2{
	-moz-box-shadow:-5px -5px 5px #999 inset;             /* For Firefox3.6+ */
	-webkit-box-shadow:-5px -5px 5px #999 inset;          /* For Chrome5+, Safari5+ */
	box-shadow:-5px -5px 5px #999 inset;                  /* For Latest Opera */
}

内阴影效果（水平偏移为负，垂直偏移为负）：

#box-shadow3{
	-moz-box-shadow:-5px 5px 5px #999 inset;              /* For Firefox3.6+ */
	-webkit-box-shadow:-5px 5px 5px #999 inset;           /* For Chrome5+, Safari5+ */
	box-shadow:-5px 5px 5px #999 inset;                   /* For Latest Opera */
}

内阴影效果（水平偏移为正，垂直偏移为负）：

#box-shadow4{
	-moz-box-shadow:5px -5px 5px #999 inset;              /* For Firefox3.6+ */
	-webkit-box-shadow:5px -5px 5px #999 inset;           /* For Chrome5+, Safari5+ */
	box-shadow:5px -5px 5px #999 inset;                   /* For Latest Opera */
}

* 还可以试试把某个偏移值设置为0，这时阴影的效果就只是单边的

 

 

CSS 限制字符串长度。

方法一：
<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div>
说明：优点是内容可以为任何HTML元素，包括超链接和图片等，在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值，并且宽度不能是百分数，否则在IE中会被认为是字符总长的百分比。

方法二：
<input type=”text” style=”width:100%; cursor:default; border-width:0; border-style:none; background-color:transparent;” value=”任意长度的字符串” readonly/>

说明：优点是宽度可以设为百分数。但缺点是内容只能为纯文本，不能有超链接等内容。

方法三：
.tableStyle table {
    table-layout: fixed;
}
.tableStyle td {
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
}
说明：优点是没有上面两种方法的缺憾，缺点只是必须使用table。