CSSboxmodel盒子模型

CSS box model 盒子模型也称为区块模型,所谓的 box model 其实就是传统的 HTML 区块概念再进化,假设我们用了一个 DIV 区块来放置内容,CSS 允许网页设计师将 DIV 区块看成一个盒子,透过控制内距的 padding、控制外距的 margin 以及控制元素边框的 border 属性来调整盒子的展现结果,我们会在示例中呈现各种不同的 CSS box model 盒子模型效果,这对网页排板有相当的帮助。

这里要先解释 CSS box model 会用到的属性
padding:用来设计元素内容与元素本身边框间的距离,详细请参阅:CSS padding 内距属性与用法示例。margin:用来设计元素与外部元素的距离,详细请参阅:CSS margin 属性与用法示例。border:用来设计元素边框的颜色、粗细与样式,详细请参阅:CSS border 边框。
CSS box model 盒子模型的示意图
CSS box model 盒子模型的示意图CSS box model 盒子模型实际示例<style type=”text/css”>
#BoxText1 {
border:5px orange solid;
padding:10px;
width:500px;
margin:15px 0px;
}
#BoxText2 {
border:2px gray dashed;
padding:6px;
width:500px;
background-color:#fafafa;
}
</style>
<div id=”BoxText1″>这是 CSS box model 的测试区块<br>橘色边框为 5px 粗,实线,内距为 10px,外距为 15px。</div>
<div id=”BoxText2″>这是 CSS box model 的测试区块<br>灰色边框为 2px 粗,虚线,内距为 6px,背景色为浅灰色。</div>
示例的呈现结果这是 CSS box model 的测试区块
橘色边框为 5px 粗,实线,内距为 10px,外距为 15px。这是 CSS box model 的测试区块
灰色边框为 2px 粗,虚线,内距为 6px,背景色为浅灰色。
我们在示例中准备了两个不同的 DIV 区块,分别透过 CSS 的 border、padding、width、margin、background-color 等属性设计出 box model 效果,第一个区块是橘色的 5px 粗边框,边框与内容间的内距(padding)是 10px,再透过外距 margin 属性加大与第二个区块间的垂直距离,如此一来就不会黏在一起,第二个 DIV 区块的边框就显得比较细,只有 2px 的宽度,不过因为套用了虚线(dashed)效果,视觉表现也还不错看,内距调整为 6px,所以文字与边框间的距离变近了,再加上浅灰色的背景颜色,整体呈现出来的效果完全不一样,这就是 CSS box model 的设计应用示例,请自行变化练习。

网页设计

imghref图片连结

2022-6-13 19:21:20

网页设计

HTMLblockquote缩排语法

2022-6-13 19:51:22



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 yp10086@vip.qq.com 举报,一经查实,本站将立刻删除。

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索