关于CSS3 box-sizing属性的详细案例讲解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了关于CSS3 box-sizing属性的详细案例讲解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2170字,纯文字阅读大概需要4分钟。
内容图文
关于 CSS3
的box-sizing
属性还可以参考W3school
box-sizing属性的语法
和其他css属性一样,该属性有三个可取的值,具体语法:
box-sizing: content-box|border-box|inherit;
以下案例都是基于固定宽高的容器为例。
content-box(默认)
box-sizing
属性的默认值就是 content-box
。
实例:
<ul class="box">
<li class="box-item content-box"></li>
<li class="box-item border-box"></li>
<li class="box-item inherit"></li>
</ul>
.box {
background: #737373;
height: 500px;
padding: 20px;
display: flex;
}
.box-item {
background: white;
list-style: none;
width: 350px; /*注意! 固定宽高*/
height: 350px;
margin: 40px auto;
}
.content-box {
box-sizing: content-box;
/*注意! padding: 20px; */
/* border: 2px solid red; */
background: burlywood;
}
以上运行结果为:
- 设置
padding
和border
之前 宽度和高度为350px
设置padding
和border
之后 宽度和高度为394px
总结:
box-sizing
值为content-box
时候,元素的padding
和border
属性的值会在元素的宽度和高度属性基础上绘制元素的内边距和边框
此时元素的宽度 = width + padding + border (高度同理)
border-box (重点)
Element-UI
组件库就大量的使用了 border-box
值。
继以上案例。针对第二的li,调整其样式为:
.border-box {
box-sizing: border-box;
border: 2px solid red;
padding: 20px;
background: darkorange;
}
总结:
设置为border-box
值之后,对元素设置内边距和边框不会影响元素的宽高。也就是说为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
此时元素的宽度 = width (高度同理)
inherit
从父元素继承 box-sizing
属性的值,若未设置,默认为 content-box
,在此就不赘述了。
完整代码
<template>
<ul class="box">
<li class="box-item content-box"></li>
<li class="box-item border-box"></li>
<li class="box-item inherit"></li>
</ul>
</template>
<style scoped>
.box {
background: #737373;
height: 500px;
padding: 20px;
display: flex;
}
.box-item {
background: white;
list-style: none;
width: 350px;
height: 350px;
margin: 40px auto;
}
.content-box {
box-sizing: content-box;
padding: 20px;
border: 2px solid red;
background: burlywood;
}
.border-box {
box-sizing: border-box;
padding: 20px;
border: 2px solid red;
background: darkorange;
}
.inherit {
box-sizing: inherit;
}
</style>
以上就是 box-sizing
属性的全部取值和区别。
对于固定宽高
的元素设置 box-sizing: border-box
之后,再也不用担心元素的宽高随padding
变化了 -.-
内容总结
以上是互联网集市为您收集整理的关于CSS3 box-sizing属性的详细案例讲解全部内容,希望文章能够帮你解决关于CSS3 box-sizing属性的详细案例讲解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。