CSS中的border-sizing

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS中的border-sizing相关的知识，希望对你有一定的参考价值。

参考技术A 一、box-sizing: content-box|border-box|inherit;
1.content-box:宽和高只是内容部分，不包含padding和border
2.border-box:box的宽和高包含padding和border
3.inherit：继承自父级
二、demo
<style type="text/css">
.box1,.box2
width: 100px;
height: 100px;
border:20px solid red;
padding:20px;
float: left;
margin-right: 50px;

.box1
box-sizing: content-box;

.box2box-sizing: border-box;
</style>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
效果图：
![RCT223]26@56_K91HECU_0D.png]( https://upload-images.jianshu.io/upload_images/6955119-520e1f66f0c68568.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )

css CSS中的变量示例

body {
  --my-background-color-variable: yellow;
  --my-width-value: 100%;
}

div {
  background-color: var(--my-background-color-variable);
  width: var(--my-width-value);
}

以上是关于CSS中的border-sizing的主要内容，如果未能解决你的问题，请参考以下文章

css SCSS和CSS中的纯CSS交叉。

如何获取网页中的css

使用 HTML 中的自定义 CSS 覆盖 CSS 文件中的媒体查询

css CSS中的变量示例

css CSS中的变量

css 如何打破css中的单词？