css之box-sizing用法
CSS 中的 box-sizing 属性定义了 浏览器 应该如何计算一个元素的总宽度和总高度。
在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ,绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时,这个特点尤其烦人。
box-sizing 属性可以被用来调整这些表现:
- content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
- border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
注: border-box不包含margin。
看一个例子:
box-sizing: content-box;
width: 100%;
效果如下:
当设置了padding和border后:
box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
效果如下:
设置了border和padding,并且制定box-size为border-box:
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
效果如下:
补充:margin和padding的区别
margin:指的是元素边框对外的空间距离;
padding:指的是元素边框对内的空间距离;
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
https://blog.hubspot.com/website/css-margin-vs-padding
css之box-sizing用法相关推荐
- html5 box sizing,CSS 盒模型与box-sizing
一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
- css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯 拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...
- css中hideFocus的用法
css中hideFocus的用法 简单说:hideFocus是对超链接外虚线框的设定! hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.b ...
- css圆角box(网上流行用b标签)
css圆角box备忘 <style type="text/css"> div.box{} div.boxtitle{background-color:#888; hei ...
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- css圆角box(宽度自适应)(百度知道挖出)
css圆角box(百度知道挖出) 1.css .zhidao_box { position: relative; width: 100%; } .zhidao_box .rg_1, . ...
- html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
- php中框是什么代码,css中box是什么文件
css中box是指CSS盒子模型,即Box Model:在CSS中,"box model"这一术语是用来设计和布局时使用:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包 ...
- CSS样式 float浮动用法
CSS样式 float浮动用法 前言 Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>标签.<a>标签.<em>标 ...
- html css中margin的用法
css中margin的用法 1.使用auto实现在浏览器水平自动居中 2.margin实现贴边 3.使用margin垂直外边距的合并 示例: 4.margin-top的塌陷问题 1.外部盒子设置一个边 ...
最新文章
- vue-music 音乐网站
- 【学神-RHEL7】1-4-1-Linux文件管理和恢复误删除的文件
- Hike on a Graph HDU - 1252(bfs)
- 蓝桥杯 123 二分+打表
- winmail计算机三级,2016年计算机三级网络技术机考模拟题(1)
- python中除法 / 和// 区别 以及np.divide,np.true_divide,np.floor_divide方法区别
- 吴恩达深度学习——2.2 Logistic回归
- 《CLR via C#》读书笔记 之 基元类型、引用类型和值类型
- 添加git 忽略文件
- L3-002. 堆栈-PAT团体程序设计天梯赛GPLT(树状数组)
- pycharm怎么安装python3.6_【python】Mac在Pycharm中导入python3.6(简单易行)
- 上面两点下面一个三角形_【人人都能欣赏的数学证明】为什么三角形的三个内角相加是180度?...
- 常见随机变量的数学期望和方差
- Google SketchUp For Dummies
- 孩子兄弟表示法实现树
- 联想 linux u盘启动不了,联想u盘启动黑屏,开机按ESC无法进入U盘启动界面怎么办?...
- 串行并行 同步异步通信
- 致敬最美抗击疫情的逆行者 DIV布局大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载
- 学交互设计要懂什么:交互设计师的知识体系
- 抖音“何青绫”金融知识整理(部分)
热门文章
- 巨佬就是巨佬,乔布斯 1973 年求职申请表,拍出22万美元高价!
- “automation服务器不能创建对象”的问题的解决方案大全
- Windows安装多个不同版本谷歌chrome浏览器
- 关于数据迁移:解决kettle中mysql的数据是tinyint的kettle查出来后变成boolean问题
- STM32F103C8T6基于HAL库移植uC/OS-III
- 苹果电脑访问文件共享服务器,mac电脑肿么访问mac共享的文件
- ISP(六) 空间域图像变换(图像反转、对数变换、幂次变换、分段线性变换、直方图均衡与匹配)
- echarts 直方图加正态_在频数直方图上绘制正态分布曲线
- Linux下软连接(softlink)和硬连接(hardlink)的区别
- 克罗内克张量积 Kron 的 OpenCV C++实现