CSS 关于box-sizing: border-box
概念
首先这个border-box的含义是盒子宽度就是原本的width+两边的padding+两边的border;在ie8及以上的浏览器中。如果设置width:100px;padding:5px;border:5px;那么盒子现在的宽度就是120px;如果加上border-box盒子的宽度又重新回到了100px;内容的宽度缩小为80px;
举例
border-box是指将边框border和内边距padding在现有元素的宽度和高度内设置举个例子
比如div的宽度和高度都是100pxpadding是10pxborder是2px
如果设置box-sizing为默认值即为content-box那么div的实际宽高将为124px*124px
100+102+22
.box { width: px2rem(100); height: px2rem(100); padding: px2rem(10); border: px2rem(2) solid #ccc; box-sizing: content-box; }
如果设置box-sizing为border-box那么div的实际宽高将为100px*100px
.box {
width: px2rem(100);
height: px2rem(100);
padding: px2rem(10);
border: px2rem(2) solid #ccc;
box-sizing: border-box;
}
CSS 关于box-sizing: border-box相关推荐
- 【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的 基本概念和术语 2. flex 属性: 设置 伸缩 ...
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- 图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
- 【目标检测】概念理解: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 •预警功能强大 •行为分析大数据 •外壳包 ...
- html5 box sizing,CSS 盒模型与box-sizing
一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
- CSS的盒子模型(Box Model)
盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...
最新文章
- vector,数组,动态数组效率测试
- 北大核刊最新版2020目录_最新版CSSCI来源期刊目录及增减变化!
- java substance下载,做出漂亮的Java界面–substance.jar的使用 | 学步园
- android 串口调试adb,Android系统 debug 技巧(最全最强adb 串口调试命令)
- android webviwe 头布局,Android布局问题,带有WebView下方的按钮
- centos7的telnet不通已经关闭防火墙,打开阿里云端口仍然ping不通的解决办法
- Markdown (小白可查看的)基本语法
- python怎么使用-如何使用python进行第一个机器学习项目(详细教程篇)
- 【axure手机原型】移动应用原型设计新手引导
- MySQL入门系列:查询简介(二)
- 我的专业作文300字计算机,以我的专业为题的作文(以我写一篇作文300字)
- 基于Python实现的微信好友数据分析
- IDEA突然没有SVN了是怎么回事
- 我国会计计算机的发展历程,会计的发展历程是什么
- C#Application.DoEvents();的作用。
- 2020-03-18HTML
- 如何在vim快速删除全部内容
- Dubbo的异常处理
- uboot代码解析1:根据目的找主线
- liquibase编写sql脚本
热门文章
- Python爬取豆瓣电影短评
- 手机连上wif显示无法连接服务器,打开exchange management shell无法连接到服务器
- exchange邮箱一直提示密码错误,密码是正确的,求大佬解答
- SQL Server 定时自动备份和自动删除方法图文超详细步骤
- 中南大学计算机学院张伟,张伟(数学家)_百度百科
- 华为机试真题 Python 实现【相同数字的积木游戏】【2022.11 Q4 新题】
- excel群发邮件 支持html,怎么给excel表格中的邮箱群发邮件
- 接口用例设计从哪些方面考虑
- 20220905 buffer overflow detected
- VIP邮箱套餐对比,163、TOM、新浪哪家VIP邮箱最全能?