源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 745|回复: 20

[CSS/HTML] 写CSS_关于Border你可能需要注意的地方第1/2页

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2007-12-11 21:48:39 | 显示全部楼层 |阅读模式
今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处, 但这个你不一定注意过; 

先说一个场景,例如: 
一个宽400px的黄盒子,左边放一个300px的小蓝盒子,右边放一个宽100px的红盒子.这样应该正好放下对吧? 因为300+100正好是400呀! 好了,先试一试! 
我开始写了(头部省略): 
复制代码 代码如下:
<style> 
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;} 
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;} 
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;} 
</style> 

400px 
<div id="yellow"> 
 <div id="blue">300px</div> 
 <div id="red">100px</div> 
</div> 

看一下效果:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最后的效果是这样的:




没有放下,原因就是因为我写了一个border:1px; 那我们把他去掉看一下. 

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

恩,这下对了,正好放下. 
所以说:
边框是计算在width外边的. 是这样吗? 我们接着看下边的代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
如果你是用IE; 那么你会看他们间隔小了很多,FIREFOX应该和最开始的效果一样没有变化; 

接着看最后一个效果:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这个里边两个小盒子都有边框,在宽度没有变的情况下,在IE中放下了. FIREFOX不会变的. 

看代码区别,我少加了:


 程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



如果不加(完全没有); 应该是按html3.0执行,这一点我不太确定。 


 程序代码
转一段:
DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。


写出来就是友情提醒一下在写CSS千万把这个记住,如果页面比较要求不是相相相当的严格,计算时尽可能留出一点间隔来。这样即使有1px的边框,也不会对页面造成严重影响,1px还好一些,如果是10px呢,你的页面就完了。我比较倾向于:如果盒子有width就不要加padding,不加border是不太可能的。多套一两层没有人会笑话,这些可以避开很多的浏览器兼容的问题。 今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处, 但这个你不一定注意过; 

先说一个场景,例如: 
一个宽400px的黄盒子,左边放一个300px的小蓝盒子,右边放一个宽100px的红盒子.这样应该正好放下对吧? 因为300+100正好是400呀! 好了,先试一试! 
我开始写了(头部省略): 
复制代码 代码如下:
<style> 
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;} 
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;} 
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;} 
</style> 

400px 
<div id="yellow"> 
 <div id="blue">300px</div> 
 <div id="red">100px</div> 
</div> 

看一下效果:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最后的效果是这样的:




没有放下,原因就是因为我写了一个border:1px; 那我们把他去掉看一下. 

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

恩,这下对了,正好放下. 
所以说:
边框是计算在width外边的. 是这样吗? 我们接着看下边的代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
如果你是用IE; 那么你会看他们间隔小了很多,FIREFOX应该和最开始的效果一样没有变化; 

接着看最后一个效果:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这个里边两个小盒子都有边框,在宽度没有变的情况下,在IE中放下了. FIREFOX不会变的. 

看代码区别,我少加了:


 程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



如果不加(完全没有); 应该是按html3.0执行,这一点我不太确定。 


 程序代码
转一段:
DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。


写出来就是友情提醒一下在写CSS千万把这个记住,如果页面比较要求不是相相相当的严格,计算时尽可能留出一点间隔来。这样即使有1px的边框,也不会对页面造成严重影响,1px还好一些,如果是10px呢,你的页面就完了。我比较倾向于:如果盒子有width就不要加padding,不加border是不太可能的。多套一两层没有人会笑话,这些可以避开很多的浏览器兼容的问题。
回复

使用道具 举报

1

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2022-12-5 01:10:03 | 显示全部楼层
搞个免费的用用
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-1-26 04:17:51 | 显示全部楼层
天天源码社区论坛
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

207

积分

中级会员

Rank: 3Rank: 3

积分
207
发表于 2023-3-11 09:39:38 | 显示全部楼层
天天源码社区www.tiantianym.com
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2023-4-27 22:54:44 | 显示全部楼层
大家都不容易!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-5 13:25:34 | 显示全部楼层
老大你好你好好你好
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

176

积分

注册会员

Rank: 2

积分
176
发表于 2023-11-23 15:33:09 | 显示全部楼层
可以,看卡巴
回复 支持 反对

使用道具 举报

6

主题

1万

回帖

174

积分

注册会员

Rank: 2

积分
174
发表于 2024-3-10 05:43:42 | 显示全部楼层
可以,看卡巴
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-20 14:26:21 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

172

积分

注册会员

Rank: 2

积分
172
发表于 2024-4-2 08:44:53 | 显示全部楼层
天天源码社区论坛
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-22 21:31 , Processed in 0.072767 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表