首页 > web前端 > css教程 > 正文

CSS中的box-sizing属性怎么使用

不言
发布: 2018-12-08 14:29:16
原创
5447人浏览过

box-sizing属性可用于设置更改区域大小,比如,如果你需要并排放置两个带边框的框,可通过将 box-sizing 设置为 border-box实现,下面我们就来看具体的内容。

box-sizing属性是用于更改区域大小计算的设置,使用padding和border属性设定边距和边界线的粗细时,在区域的width和height中加入padding和border的部分,因此,根据padding和border的值,整个区域的大小就会改变。

box-sizing

这是因为区域的大小不包含padding,border的值。

根据box-sizing属性改变设定,可以在区域大小中设置padding和border。这使得可以确定盒子的大小而不受padding和border的影响。

立即学习前端免费学习笔记(深入)”;

我们接着来看box-sizing的使用方法

box-sizing属性写法如下

box-sizing:value ;
登录后复制

value的值你可以写入content-box和border-box。

content-box:宽度和高度分别应用到元素的内容框;在宽度和高度之外绘制元素的内边距和边框。

border-box:为元素设定的宽度和高度决定了元素的边框盒,也就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

此外,如果输入inherit,则继承父元素的值。

下面我们来看一个具体的例子

代码如下

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
  <p class="content1">content-box(初始值)
  的情况下、padding和border不包括在width和height之中</p>
<p class="content2">border-box的情况下、padding和border包括在width和height之中</p>
</body>
</html>
登录后复制

设置宽度和高度完全相同的两个盒子(宽度400px,高度150px),第一个盒子设置的初始值content-box,第二个盒子设置的值是border-box。

CSS代码

p.content1 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: content-box;
}
p.content2 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: border-box;
}
登录后复制

运行结果

在浏览器上将显示如下效果

box-sizing

以上就是CSS中的box-sizing属性怎么使用的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号