Div+CSS规则整理之六-常用CSS细节处理样式

来源：百度文库编辑：神马文学网时间：2024/06/13 03:43:29

十八、 Padding影响宽度问题
如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
十九、完美的单象素外框线表格
table{border-collapse:collapse;}
td{border:1px solid #000;}
二十、如果文字过长,则将过长的部分变成省略号显示

二十一、并不是所有样式都要简写
当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。(此种方法对后期修改样式很重要)
二十二、几个常用到的CSS细节处理上的样式
1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;
2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不让其换行，不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。
***万能强制换行：white-space:normal;word-break:break-all
禁止换行：white-space:nowrap
强制换行：word-wrap: break-word; word-break: normal;
.AutoNewline
{
/*word-break: break-all; 方法一必须*/
/*word-wrap:break-word;overflow:hidden; 方法二 */
/*word-wrap:break-word; word-break: normal; 方法三 */
word-wrap:break-word; word-break:break-all;
}
.NoNewline
{
/*word-break: keep-all; 方法一必须*/
white-space:nowrap;
}
3）固定宽度汉字（词）折行：; word-break:break-all;（IE5以上）FF不能。
4）文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。
5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；
6）FLASH透明：选中swf,打开原代码窗口，在前输入以上是针对IE的代码。
针对FIREFOX 给

标签也增加类似参数wmode=”transparent”
7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
8）层在浏览器中居中对齐问题
body { text-align: center }
#content { text-align: left; width: 700px; margin: 0 auto }
9)单行内容在层中垂直对齐问题
# content{height:19px; line-height:19px; }缺点是要内容不要换行。
10）层在浏览器中垂直居中对齐问题
缺点是：水平、垂直方向上不能出现滚动条，只能是在一屏的情况下
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以2。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。
请看实例代码：
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid red;
}
11）CSS控制图片自适应大小
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

Div+CSS规则整理之六-常用CSS细节处理样式 Div+CSS样式布局学习笔记(1) Div+CSS Div+CSS css 样式 css样式 CSS样式+DIV页面布局(水平三列) 有利于SEO的DIV+CSS的命名规则收集 div+css布局漫谈 DIV + CSS 相对位置 div css测试 CSS DIV布局教程 div+css布局漫谈 div css测试 css+div 示例式 Div CSS布局入门教程 div+css布局经验 Div+CSS布局入门教程 DIV CSS优化 DIV+CSS制作网页之如何设置z-index|DIV/CSS 网页设计中常用的CSS命名规则整理 - 建站教学网 jzread.com 建站教程>CMS建站>整理网页设计中常用的CSS命名规则汇集层叠样式表 css 实时切换CSS样式