CSS:box-sizing 的语法和基本用处(五颗星)

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

box-sizing 规定两个并排的带边框的框,

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

语法:

box-sizing:content-box/border-box/inherit

属性:

  • content-box:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框
  • border-box:为元素设定的宽度和高度决定了元素的边框盒,
  • inherit:继承父元素的 box-sizing

看代码和结果可能更清楚:

<style>
        .box{
            height: 100px;
            width: 100px;
            border: 5px solid rgb(244, 6, 6);
        }
        .empbox{
            ba

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

前端面试题 文章被收录于专栏

前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理

全部评论
归纳得挺好的
1 回复 分享
发布于 2023-02-13 11:00 湖南
学习学习,学不能停
1 回复 分享
发布于 2023-02-13 11:00 四川

相关推荐

03-19 21:39
门头沟学院 Java
Data_Seven:6 他说的 全是我的词儿啊
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
正在热议
更多
# 春招至今,你的战绩如何? #
10999次浏览 94人参与
# 你的实习产出是真实的还是包装的? #
1943次浏览 42人参与
# 巨人网络春招 #
11361次浏览 223人参与
# 军工所铁饭碗 vs 互联网高薪资,你会选谁 #
7628次浏览 43人参与
# 简历第一个项目做什么 #
31736次浏览 339人参与
# 重来一次,我还会选择这个专业吗 #
433536次浏览 3926人参与
# MiniMax求职进展汇总 #
24113次浏览 309人参与
# 当下环境,你会继续卷互联网,还是看其他行业机会 #
187191次浏览 1122人参与
# 牛客AI文生图 #
21445次浏览 238人参与
# 不考虑薪资和职业,你最想做什么工作呢? #
152441次浏览 888人参与
# 研究所笔面经互助 #
118960次浏览 577人参与
# 简历中的项目经历要怎么写? #
310349次浏览 4217人参与
# AI时代,哪些岗位最容易被淘汰 #
63803次浏览 826人参与
# 面试紧张时你会有什么表现? #
30509次浏览 188人参与
# 你今年的平均薪资是多少? #
213128次浏览 1039人参与
# 你怎么看待AI面试 #
180122次浏览 1258人参与
# 高学历就一定能找到好工作吗? #
64331次浏览 620人参与
# 你最满意的offer薪资是哪家公司? #
76537次浏览 374人参与
# 我的求职精神状态 #
448121次浏览 3129人参与
# 正在春招的你,也参与了去年秋招吗? #
363503次浏览 2638人参与
# 腾讯音乐求职进展汇总 #
160672次浏览 1112人参与
# 校招笔试 #
471140次浏览 2964人参与
牛客网
牛客网在线编程
牛客网题解
牛客企业服务