css box-sizing:border-box
box-sizing:border-box的理解和作用_Leeeeeer的博客-CSDN博客_box-sizing: border-box;
盒子模型
盒子模型是指:外边距(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 组成
1、没有设置box-sizing:border-box属性,宽高会加上padding和border的值,需要我们手动去计算,减去padding和border的值,并调整content的值,以免超过给定的宽高
比如,给父元素parent设置宽高为500px,背景色为黑色;然后给子元素设置宽高为478px,并设置内边距10px,红色边框1px,背景颜色为灰色
此时子元素的宽高为500px(content 478px + padding 40px + border 4px)所以就覆盖了父元素的黑色背景,只能看到子元素的灰色背景
2、加了box-sizing:border-box属性,padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里
盒子模型会自动根据padding和border的值来调整content的值,就不需要手动调整
标准盒子模型,一般浏览器也都默认为标准盒子模型。即:box-sizing:content-box
怪异盒子模型,一般根据实际项目需要自行设置。即:box-sizing:border-box
css box-sizing:border-box相关推荐
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- 详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
- [css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
- [css] css中的border:none和border:0px有什么区别?
[css] css中的border:none和border:0px有什么区别? none是没有边框. 0px是边框的宽度为0px. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- CSS盒子边框(border)样式综合样式
CSS盒子边框(border) 语法: border : border-width ll border-style ll border-color 边框的样式: none:没有边框即忽略所有边框的宽度 ...
- 【目标检测】概念理解: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.图像的真实框会和图像中心点所在的小网格生成 ...
- CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
最新文章
- 于媛龄(201552118)第二次作业网调问卷的制作
- idea console中文乱码_Python3的字符编码乱码问题解决思路
- MySql学习之varchar类型
- java借口案例实现_java实现接口的典型案例
- vue项目部署iis后 乱码_vue项目的自动化部署
- java –cp_Java设置–用Java设置
- 文件上传时判断文件夹是否存在
- POJ 2987 Firing【最大权闭合图】
- 点钞视频软件测试,模拟银行综合实验
- python手册中文版-Python中文文档
- 2021-07-26
- Android电量优化全解析 ,赶快收藏备战金九银十
- Origin多峰拟合
- 视频: 视频码率、分辨率、帧率、视频大小等
- 怎么格式化云服务器,云服务器磁盘怎么格式化
- iOS3DTouch功能实现
- 计算机毕业设计ssm图书馆自习室占座选座zg09h系统+程序+源码+lw+远程部署
- win10下自带输入法变为繁体字的原因及解决方法
- 如何读书:实用性阅读指南
- 平面构成之形式美与要素
热门文章
- 【实验】阿里云大数据助理工程师认证(ACA)- ACA认证配套实验-01-MaxCompute DML操作
- 网页设计图片向上浮动_CSS 关于浮动
- 天天炫斗三大职业技能属性全面分析
- 中国股民掉进罗杰斯们的陷阱(摘录)
- linux驱动摸索-- LCD显示(mini2440_T35)
- Linux 透明大页 THP 和标准大页 HP
- 前端必看!微信都在用的开源动效方案【PAG动效】
- html输入浮点型,input框限定输入值为浮点型代码分享
- 智慧养殖:鸡舍环境监测智慧管理系统
- Go Ahead, Throw That Practice Out