文章
  • 文章
搜索
腾讯广告 >> 最新资讯 >>网站建设 >> 使用 CSS3 box-sizing 属性-网站建设
详细内容

使用 CSS3 box-sizing 属性-网站建设

使用 CSS3 box-sizing 属性-网站建设

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

两个 div 现在是一样大小的!


菜鸟教程!


以下是两个 <div> 元素添加 box-sizing: border-box; 属性的简单实例。

实例

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}


尝试一下 »

从结果上看 box-sizing: border-box; 效果更好,也正是很多开发人员需要的效果。

以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。

所有元素使用 box-sizing 是比较推荐的:

实例

{
    box-sizing: border-box;
}


返回顶部 seo seo