设置 box-sizing:border-box（原本的默认值为:content-box）

box-sizing: content-box;/*盒子宽度=CSS中设置的width+border+padding*/

box-sizing: border-box;/*盒子的宽度=css中设置的width*/

实例对比

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box1{

            box-sizing: content-box;/*盒子宽度=CSS中设置的width+border+padding*/

            width:300px;

            height:200px;

            padding:10px;

            margin: 10px;

            color:red;

            border:5px solid blue;

        }

        .box2{

            box-sizing: border-box;/*盒子的宽度=css中设置的width*/

            width:300px;

            height:200px;

            padding:10px;

            margin: 10px;

            color:red;

            border:5px solid blue;

        }

    </style>

</head>

<body>

    <div class="box1">

       <p>box-sizing: content-box;/*盒子宽度=CSS中设置的width+border+padding*/</p>

    </div>

    <div class="box2">

        <p>box-sizing: border-box;/*盒子的宽度=css中设置的width*/</p>

    </div>

</body>

</html>

可以看到，第一个div被pading等因素撑大

【前端】解决盒子被撑大问题 box-sizing的更多相关文章

  1. 怎么样子盒子能撑起父盒子？浮动,BFC,边距重叠

    怎么样子盒子能撑起父盒子? 从行内元素跟块元素来看: 一般情况下,行内元素只能包含数据和其他行内元素. 而块级元素可以包含行内元素和其他块级元素. 块级元素内部可以嵌套块级元素或行内元素. 建议行内元 ...

  2. Python web前端 04 盒子模型

    Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...

  3. PHPExcel解决内存占用过大问题-dw 查找memoryCacheSize把1M改为2048M

    http://blog.sina.com.cn/s/blog_4ec7952d0101fcrd.html PHPExcel解决内存占用过大问题-设置单元格对象缓存 PHPExcel是一个很强大的处理E ...

  4. web添加第三方应用，前端解决跨域问题的8种方案

    应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1. 注册成为QQ互联平台开发者,http://connect.qq.com/ 2. 准备一个可访问的域名,如dev.foo.com 3 ...

  5. [转] js前端解决跨域问题的8种方案（最新最全）

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  6. PHPExcel解决内存占用过大问题-设置单元格对象缓存

    PHPExcel解决内存占用过大问题-设置单元格对象缓存 PHPExcel是一个很强大的处理Excel的PHP开源类,但是很大的一个问题就是它占用内存太大,从1.7.3开始,它支持设置cell的缓存方 ...

  7. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  8. 解决EditText不能撑满全屏的问题及EditText你应该知道的属性

    一般我们要实现去下图一的效果很简单: 两个EditText就搞定 效果图一:   但是我们想让第二个EditText撑满剩余空间怎么做?如效果图二 效果图二: 解决: 使用了ScrollView嵌套L ...

  9. 微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法

    近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...

  10. [Web 前端] 解决因inline-block元素导致的空白间距和元素下沉

    cp from : https://www.jianshu.com/p/617e78a27c88 ** 前言: ** CSS 中的 display:inline-block 是笔者最为喜欢的元素之一, ...

随机推荐

  1. 00 通过 Pytorch 实现 Transformer 框架完整代码

    博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...

  2. 云原生周刊：6 项 K8s 成本控制策略 | 2023.7.17

    开源项目推荐 Base Image Finder 当使用容器扫描工具来识别已知漏洞(CVE,或常见漏洞和暴露)时,可能很难理解漏洞在容器中的位置,以及如何缓解这些漏洞.通常,最简单.最有效的缓解方法是 ...

  3. while循环和do循环、缓冲区、一维数组

    缓冲区 输入缓冲区 从键盘得到数据的时候用户输入的数据首先进入输入缓冲区,然后程序从输入缓冲区里获得数字,先进入输入缓冲区的数据必须先处理(类似排队),如果先进入输入缓冲区的数据无法处理,程序就得不到 ...

  4. Machine Learning Week_1 Model and Cost Function 5-8

    目录 2.5 Video: Cost Function Intuition-1 unfamiliar words 2.6 Reading: Cost Function Intuition-1 unfa ...

  5. mse~路由实现某个页面的灰度功能

    起因 我有个网站A[蓝色服务],要对网站A进行改版[绿色服务],其中用户中心已经改完了,希望当用户访问时,如果http请求头中包含isGroup,并且isGroup=0时,去新的绿色服务,反之就还是去 ...

  6. C++之OpenCV入门到提高003：矩阵的掩膜（Mask）处理

    一.介绍 今天是这个系列<C++之 Opencv 入门到提高>得第三篇文章.今天这篇文章也不难,主要介绍如何使用 Opencv 对图像进行掩膜处理,提高图像的对比度.在这个过程中,我们可以 ...

  7. Git命令缩写

    g = 'git' ga = 'git add' gaa='git add --all' gapa='git add --patch' gb='git branch' gba='git branch ...

  8. C++处理系统相关权限问题

    1.给某个文件或文件夹赋予特定用户的特定访问权限 /* 给文件(夹)szPath设置用户名为pszAccount的可读可写可修改权限 */ bool GiveTheAccountPrivToFile( ...

  9. 内核源码+vscode+bear+clang实现函数任意跳转，无缝跳转，无缝阅读，无缝开发

    一.准备工作 1.内核源码版本选择 务必有一份能编译通过的<内核源码>,本次选择5.10版本的. #说明:5.10版本的<内核源码>里,在 scripts/clang-tool ...

  10. C语言指针一些常见的错误用法

    指针用的好犹如神助,用不好会让你叫苦连连,但大多数人是用不好指针的,所以后来的很多语言都把指针封装,屏蔽.比如JAVA,java是没有指针的,但是很多地方都用到指针,不过不对用户开放,语言的自身机制帮 ...