CSS 技巧积累

--CSS 弹出窗体后面的半透明效果
style="filter:alpha(opacity=30)"

--DIV高度最低不能为1px
加上font-size:0px;因为DIV有个默认字体大小

--position:absolute
style="position:absolute;"
加上这句,它修饰的对象会绝对服从后面left,top等的设置来定位对象位置。(相当于“浮起来”)
去掉这句,它修饰的对象会自动匹配动态调整来定位对象位置。(相当于“沉下去”)

--TextBox 极细边框
BorderStyle="Solid" BorderColor="#999999" BorderWidth="1px"

--CSS 表格显示极细边框
<table border="0" bgcolor="#cfe5f0" bordercolor="#cfe5f0" cellpadding="0" cellspacing="1" >
<tr bgcolor="white">
<td bgcolor="white" width="100px">单位部门</td>
<td bgcolor="white" width="625px">应急响应</td>
</tr>
</table>

--CSS 表格打印极细边框
<table border=1 style="display:;border-collapse: collapse">

--CSS 应用DIV高度自适应布局中最小高度(min-height)的妙用(兼容IE,FF)
{height:auto !important;height:600px; min-height:600px;}

--CSS 字体强行换行
有时候会遇到给表格设置了宽度而字体过多却不能换行的问题,特别是英文字体
<table cellspacing = "0" cellpadding = "0" width = "100" border = "1">
我们使用word-break:break-all; 来强行换行即可
<table cellspacing = "0" cellpadding = "0" width = "100" border = "1" style = "WORD-BREAK: break-all">

--CSS 首行缩进
<p style = "text-indent:2em;200px;">
有时候,我们需要将段落的首行缩进两个文字,一般我们都是用4个HTML的空格(&amp;nbsp;)来实现,其实我们还可以用样式表来达到这种效果!</p>

--CSS 两个表格并排不换行
<table border="1" style="display:inline;">
<tr>
<td>表格1</td>
</tr>
</table>
<table border="1" style="display:inline;">
<tr>
<td>表格2</td>
</tr>
</table>

--CSS 同时使用两个类
一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个:<p class="text side">...</p>
同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。

--CSS用于文档打印
许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。
也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:
<link type="text/css" rel="stylesheet" href="/blog/stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
第1行就是显示,第2行是打印,注意其中的media属性。

--CSS 垂直居中
垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。

原文地址:https://www.cnblogs.com/wanghafan/p/2344211.html