box-sizing:border-box的作用 (转载)
这个文章觉得不错进行转载。
原文地址:https://www.cnblogs.com/tu-0718/p/7443995.html
其实一直没仔细研究过CSS3新增的这个属性box-sizing,只是经常会看到其它网页和公司项目里面有用到这个属性,然后就百度找到了一篇不错的介绍
https://www.jianshu.com/p/e2eb0d8c9de6
要想清楚这个属性的作用,首先要理解盒子模型
盒子模型是指:外边距(margin)+ border(边框) + 内边距(padding)+ content(内容)
可以把每一个容器,比如div,都看做是一个盒子模型
比如你给一个div设置宽高为500px,但实际你设置的只是content,之后你又设置了padding:10px;border:1px solid red;
这时div的宽高就会变为544px(content 500px + padding 40px + border 4px)
相当于一个元素的实际宽高是由: padding + border + content 组成
①:没有设置box-sizing:border-box属性,宽高会加上padding和border的值,需要我们手动去计算,
减去padding和border的值,并调整content的值,以免超过给定的宽高
比如下图,我给父元素parent设置宽高为500px,背景色为黑色;然后给子元素设置宽高为478px,并设置内边距10px,红色边框1px,背景颜色为灰色
此时子元素的宽高为500px(content 478px + padding 40px + border 4px)所以就覆盖了父元素的黑色背景,只能看到子元素的灰色背景
②:加了box-sizing:border-box属性,padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里
盒子模型会自动根据padding和border的值来调整content的值,就不需要手动调整
测试代码(上面可能说的不太清楚,下面的示例代码实验一下你就懂了)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.parent {position: relative;margin: 0 auto;width: 500px;height: 500px;background-color: #000;}.son {box-sizing: border-box;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;padding: 10px;width: 478px;height: 478px;border: 1px solid red;background-color: #ccc;}</style></head><body><div class="parent"><div class="son"></div></div></body>
</html>
box-sizing:border-box的作用 (转载)相关推荐
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- 【目标检测】概念理解:region proposal、bounding box、anchor box、ground truth、IoU、NMS、RoI Pooling
最近刚接触图像识别,理解一些概念十分困难,尤其是动不动就冒出个看不懂的英语,让人抓狂.查了不少资料后做一个总结并加上一些自己的理解,理解若有误,烦请大家指出,相互学习. 本文主要对region pro ...
- 软编码Flv 到Mp4 容器(五) fmp4 ftyp box 和moovmvhd box详解
https://github.com/332065255/flv2fmp4 代码库 软编码Flv 到Mp4 容器(一) 软编码Flv 到Mp4 容器(二) flv tag拆解 软编码Flv 到Mp4 ...
- RUST笔记_特性Box和闭包Box
必须显示的初始化含有dyn triat的Box,这个代码是为结构AA装配XYZ特性,之后在某函数传入有XYZ特性的Box. struct AA {int1: i32,int2: i32, } impl ...
- Bounding Box与anchor box
之前一直分不清Bounding Box与anchor box,直到问了一下 YOLO会将输入的图片分成S*S个网格,每个小网格会生成n个anchor Box.图像的真实框会和图像中心点所在的小网格生成 ...
- 立宏安全设备工程-AI Box 门锁开关-AI BOX 人脸识别安全门锁盒子
AI Box 门锁开关 AI BOX 人脸识别安全门锁盒子 •人脸/指纹授权人员方可开锁 •非授权人员无法打开门 •安全门锁达到Ple ,安全系统可达PLd •预警功能强大 •行为分析大数据 •外壳包 ...
- AutoEventWireup 属性的作用(转载)
AutoEventWireup 属性的作用(转载) 一.Page指令中的AutoEventWireup="true",该指令默认值为true. 指示页的事件是否自动绑定.如果启用了 ...
- html5 box sizing,CSS 盒模型与box-sizing
一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
- 理解与总结:YOLOv1中候选框(Bounding Box或者Predict Box)——纯文字真的很干
各位CV伙伴估计已经看了很多网上许多关于YOLO1的博客,在这里我推荐路过的朋友可以参考以下链接,有一定基础再来看我的这个博客.因为我参考了前人的知识再做的总结,有些小的基础的概念没有详细解释. 参考 ...
最新文章
- python基本使用-Python标准库详细介绍与基本使用方式,超详细!
- opencv imshow
- Android踩坑日记:自定义水平和圆形ProgressBar样式
- vue引入vue-amap
- SAP ABAP程序优化-多线程并行处理
- 前端优化方案-JavaScript 优化方案 收藏 此文于2010-06-04被推荐到CSDN首页
- boost::pfr模块ops相关的测试程序
- linux登录界面主题,Ubuntu 18.10(Cosmic Cuttlefish) 新登录界面亮相,主题为Yaru
- C#对用户密码使用MD5加密与解密
- python爬虫反爬对抗_python爬虫反反爬,你几乎可以横扫大部分 css 字体加密的网站...
- (经验总结)flowable工作流_01_流程实例管理
- 一起学习C语言:初谈指针(三)
- 删除同目录下面txt文件(利用os,fnmacth模块)
- 【效率】专为Win7系统设计的极简番茄计时器 - MiniPomodoro (附源码)
- Java岗招聘标准水涨船高,五年Java程序员表示面试太难了
- 如何php只输入数字和字母,php 不用字母、数字和下划线写 shell
- 三角函数公式大全(速查手册)
- 解决vue项目背景图片在IE和火狐上不显示的问题
- Pygame做一期吃豆子游戏
- V4L2 pixel format 格式参考
热门文章
- 视频教程-零基础学C#编程—C#从小白到大咖-C#
- Windows安装Scoop失败解决方法
- android无法监听焦点,android tv常见问题(二)如何监听ViewGroup子View的焦点状态
- 一加手机怎么root权限_一加 A3010手机怎样Root,如何获取Root权限?
- Android手机中的加速度计与陀螺仪
- 什么是区块链,区块链又是什么?
- 相机内参和相机外参和标定
- 双屏切换单屏,之前在另一显示器显示的软件窗口现无法显示解决方法
- ARTS总结-第2周
- android hide方法 末班,Android调用@hide系统隐藏类的几种方法