css中box-sizing解放盒子实际宽高计算

晴空闲云 等级 567 0 0
标签: box-sizingcss

我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子, 造成盒子的宽度不好计算,在实务中特别不方便。

box-sizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。

盒子宽高计算

假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。

但是当我们设置这个盒子的边框和内间距的时候,那么这个盒子实际的宽高就会发生变化,参考如下代码:

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid steelblue;
        padding: 10px;
    }
</style>
<div class="box">我一个有趣的盒子</div>

实际的盒子的宽高是222px,参考如下图:

css中box-sizing解放盒子实际宽高计算

那么是什么原因呢?其实很简单,就是盒模型的实际宽度除了受 width 影响,也受边框border和内间距padding影响。

实际的计算公式:

实际宽高 = width + 内间距padding + 边框border

上面因为左右都有内间距和边框,所以实际宽度为:

实际宽度 = 200 + 10 * 2 + 1 * 2 = 222px

高度也是这个道理。

box-sizing设置

针对这种情况,css3推出了 box-sizing 这个属性,其语法如下:

box-sizing: content-box(default) | border-box;

其中:

content-box 默认值。设置的宽高不包含边框和内间距,实际宽高会根据边框和内间距撑大。
border-box 设置盒子的宽高包含边框和内间距,实际宽高不受边框和内间距影响。

示例1,接上面例子,设置div盒子的 box-sizing 为 border-box。

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid steelblue;
        padding: 10px;
        /* 设置盒子的宽高包含边框和内间距 */
        box-sizing: border-box;
    }
</style>
<div class="box">我一个有趣的盒子</div>

运行效果:

css中box-sizing解放盒子实际宽高计算

可以看到效果,这边盒子的实际宽高就都为200px了。

一般来讲在实务中,我们都是希望直接设置盒子的实际宽高,这种方式就特别方便了,不然以前老是改了边框或者内间距,就要重新计算设置width,老麻烦了。

这个属性确实方便很多,赞一下。

收藏
评论区

相关推荐

CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
uniapp获取手机状态栏高度
1、状态栏高度 css中直接写 var(statusbarheight) 2、 $('body').height(document.documentElement.clientHeight) //获取浏览器可视窗口高度、宽度 clientWidth 3、监听浏览器放大缩小 window.onresize function
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题
一: 右侧固定宽度 左侧自适应   第一种方法:左侧用margin-right,右侧float:right  就可以实现。     HTML代码可以如下写:     <div>         <a href="" target="_blank">我是龙恩</a>     </div>   <div>
CSS块级元素与行内元素
**CSS块级元素与行内元素** **行内元素与块状元素** 1、块级元素:可以设置 width, height属性。 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。 可以通过line-height设置行高(行高和height是不同的东西)。 2、块级元素:可以设置margin和padd
CSS基本用法介绍
CSS介绍 ===== css定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 ===== ### css实列 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ### css注释 /*这是注释*/ CSS的几种引入方
CSS基础知识整理
### **1 什么是CSS?** CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ###
CSS开发过程中的20个快速提升技巧
> **摘要:**本文涵盖了20个CSS技巧,可以解决许多工作中常见的问题, 让你也成为一个CSS高手。 1、使用CSS重置(reset) ---------------- css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性。 大多数项目并不需要这些库包含的所有规则,可以
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
CSS预处理器SASS用法和koala工具的使用
    最近在学习前端的时候,发现了一个SASS(CSS预处理器),感觉在前端布局写css样式来说是相当强大,效率又高,在用到SASS的时候感觉很爽。     首先说一下传统的CSS,在程序员的眼里感觉是一个很麻烦的东西,没有变量,也没有运算,还没有条件语句,感觉写的相当费事。     在人们都感觉费事的同时,真有牛人把CSS加入了编程的元素,这就是(CS
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preproces
table超出长度隐藏的字符用省略号表示
<!doctype html>   <html lang="en">   <head>       <meta charset="UTF-8" />       <title>表格演示</title>       <style type="text/css">           table{                wid