CSS框模型的原理和应用

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

ｃｏｌｏｒ属性，它一次可以接受最多４个颜色值。可以使用任何则两个盒子之间的距离为ｂｏｘｌ的ｍａｒｇｉｎ — ｒｉｇｈｔ）Ｊ１］￣ｂｏｘ２类型的颜色值，例如可以是命名颜色，也可以是十六进制和的ｍａｒｇｉｎ — ｌｅｆｔ等于３０ｐｘ。ＲＧＢ值。ｂｏｒｄｅｒ．ｃｏｌｏｒ可以分解为４个单边颜色：ｂｏｒｄｅｒ．ｔｏｐ．３．２垂直方向两个盒子的距离
ｓｔｙｌｅ。当４个方向的边框样式不一样的时候，可以采用４个方在页面布局中，通常页面需要放入多个盒子，此时需向的单边样式进行定义，也可以给ｂｏｒｄｅｒ－ｓｔｙｌｅ设置４个值，要考虑两个盒子之间的距离。页面中放入两个盒子ｂｏｘｌ￣Ｄ４个值分别代表上、右、下、左４个方向的边框样式，比如：ｂｏｘ２，如图４所示。ｂｏｒｄｅｒ－ｓｔｙｌｅ：ｓｏｌｉｄｄｏｔｔｅｄｄａｓｈｅｄｄｏｕｂｌｅ；如果不需要边框，
ｈｌ｛ｍａｒｇｉｎ：１０ｐｘ｝１个值表示４个方向的外边距一样。
ｃｓｓ中使用ｂｏｒｄｅｒ－ｓｔｙｌｅ属性定义边框的样式，如果没有
样式，将根本没有边框显示。
ｍａｒｇｉｎ属性可以分解为４个方向的外边距：ｍａｒｇｉｎ — ｔｏｐ，ｍａｒｇｉｎ．ｒｉｇｈｔ，ｍａｒｇｉｎ — ｂｏｔｔｏｍ，ｍａｒｇｉｎ — ｌｅｆｔ，可以用来单独设
ｂｏｒｄｅｒｃｏｌＯｒ。
ｈｌ｛ｍａｒｇｉｎ：１０ｐｘ，５ｐＸ｝２个值的顺序是：上下外边距为１０ｐｘ，左右外边距为
５ｐｘ。
２．１边框的样式（ｂｏｒｄｅｒ－ｓｔｙｌｅ）
该属性可以分解为４个方向的单边样式：ｂｏｒｄｅｒ．ｔｏｐ — 置某一方向的外边距。
．１水平方向两个盒子的距离ｓｔｙｌｅ，ｂｏｒｄｅｒ－ｒｉｇｈｔ－ｓｔｙｌｅ，ｂｏｒｄｅｒ — ｂｏｔｔｏｍ－ｓｔｙｌｅ和ｂｏｒｄｅｒ．１ｅｆｌ－３
图４水平方向放置两个盒子参数
通过ｂｏｒｄｅｒ．ｗｉｄｔｈ属性为边框指定宽度。比如设置ｐ｛ｂｏｒｄｅｒ．ｗｉｄｔｈ：５ｐｘ；｝。ｂｏｒｄｅｒ — ｗｉｄｔｈ可以分解为４个方向的
单边宽度：ｂｏｒｄｅｒｔｏｐ．ｗｉｄｔｈ，ｂｏｒｄｅｒ．ｒｉｇｈｔ．ｗｉｄｔｈ，ｂｏｒｄｅｒ．
第１３期２０１７年７月
Ｎ０．１３
无线互联科技・网络地带
Ｊｕｌｙ，２０１７
２元素的边框（Ｂｏｒｄｅｒ）
ＣＳＳ的ｂｏｒｄｅｒ属性可以设定元素边框的样式、宽度和颜色，ｂｏｒｄｅｒ属性可以分解为：ｂｏｒｄｅｒ．ｓｔｙｌｅ，ｂｏｒｄｅｒ．ｗｉｄｔｈ￣Ｄ
则设置ｂｏｒｄｅｒ－ｓｔｙｌｅ：ｎｏｎｅ。
２．２边框的宽度（ｂｏｒｄｅｒ－ｗｉｄｔｈ）
＜ｄｉｖｉｄ＝黼ｂｏｘ１黼＞＜／ｄｉｖ＞＜ｄｉＶｉｄ＝ｂｏｘ２髓＞＜／ｄｉｖ＞
ｆｌｏａｔ
ｆｔ；》
＃ｂｏｘ１｛ｍａｒｇｉｎ — ｒｉｇｈｔ：２ｅｐｘ；》＃ｂｏｘ《衢ａｒｇ－ｉ — ｅｆｔ：ｌｏｐｘ；》
图５两个盒子浮动属性
设置边框颜色非常简单。ＣＳＳ使用一个简单的ｂｏｒｄｅｒ．
ｂｏｔｔｏｍ．ｗｉｄｔｈ，ｂｏｒｄｅｒ－ｌｅｆｔ．ｗｉｄｔｈ。
设置两个盒子浮动属性，如图５所示。
在实际使用中，比如对Ｐ的样式进行如下设置：Ｐ｛ｂｏｒｄｅｒ－ｓｔｙｌｅ：ｎｏｎｅ；ｂｏｒｄｅｒ－ｗｉｄｔｈ：５０ｐｘ｝虽然给边框宽度设置为５０ｐｘ，但实际效果在Ｐ元素上根本没有边框出现，原因是给边框样式设置了＿ｎｏｎｅ，即边框根本不存在，那么边框宽度也变成了０。由于ｂｏｒｄｅｒ－ｓｔｙｌｅ的默认值是ｎｏｎｅ，所以如果希望边框出现，就必须声明一个边框样式。
２．３边框的颜色（ｂｏｒｄｅｒ－ｃｏｌｏｒ）
＃ｂｏｘ１豢＃ｂｏｘ２｛
ｗｉｄｔｈ：２０ｅｐｘ；ｈｅｉｇｈｔ：２ｏｅｐｘｓｏｌｉｄ｛ＩＩｅｃｃ；