如何在css中设置内边框(css,web开发)

时间:2024-05-03 13:36:43 作者 : 石家庄SEO 分类 : web开发
  • TAG :

css设置内边框的示例。

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><style>div.container{width:30em;height:106px;border:1emsolid;}div.box1{width:50%;border:1emsolidred;float:left;}div.box2{box-sizing:border-box;-moz-box-sizing:border-box;/*Firefox*/width:50%;border:1emsolidred;float:left;}</style></head><body><divclass="container"><divclass="box1">普通边框!!</div><divclass="box2">内边框!!</div></div></body></html>

如何在css中设置内边框

box-sizing属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

语法

box-sizing:content-box|border-box|inherit;

属性值:

content-box:这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box:指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit:指定 box-sizing 属性的值,应该从父元素继承。

示例:

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><style>div.container{width:30em;height:74px;border:1emsolid;}div.box{box-sizing:border-box;-moz-box-sizing:border-box;/*Firefox*/width:50%;border:1emsolidred;float:left;}</style></head><body><divclass="container"><divclass="box">这个div占据了左边的一半。</div><divclass="box">这个div占据了右边的一半。</div></div></body></html>

效果图:

如何在css中设置内边框

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:如何在css中设置内边框的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:如何在php中设置 gb2312下一篇:

6 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18