设置 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. Android复习(二)应用资源

    1. res下的资源类型 目录 资源类型 animator/ 用于定义属性动画的 XML 文件. anim/ 用于定义渐变动画的 XML 文件.(属性动画也可保存在此目录中,但为了区分这两种类型,属性 ...

  2. CEOI2023

    Day1 T1 A Light Inconvenience (light) 题意:若干个人排成一个队列,保证任何时刻队列中都有至少一个人.每个人手中有一个火把,火把有点亮和熄灭两种状态. 现在进行 \ ...

  3. IHostedService(BackgroundService)的启动和停止顺序

    一句话总结: 按照Add顺序启动, 先启动, 后停止. Host 源代码 public async Task StartAsync(CancellationToken cancellationToke ...

  4. Matrix Calculus

    1 Scalar Function \(\text{If }f(\mathbf{x})\in\mathbf{R},\mathrm{then}\) \[df=\frac{\partial f}{\par ...

  5. Halcon 快速入门教程

    文章首发于我的 github 仓库-cv算法工程师成长之路,欢迎关注我的公众号-嵌入式视觉. 本人水平有限,文章如有问题,欢迎及时指出.如果看完文章有所收获,一定要先点赞后收藏.毕竟,赠人玫瑰,手有余 ...

  6. ESP32+L298N+MQTT+4G无线远程监控+四驱动小破车

    ESP32+L298N+MQTT+4G无线远程监控+四驱动小破车 小车源代码 注意修改WIFI 信息 #include <analogWrite.h> #include <WiFi. ...

  7. NOIP2024模拟11:忠于自我

    NOIP2024模拟11:忠于自我 T1 一句话题意:有若干个容量为 \(L\) 的包,从左往右装物品,当前包还能装则装,否则必须重开一个包装进去,对于\(\forall i \in [1,n]\), ...

  8. QT生成固定长度的随机字符串

    最近项目中有一个需要使用QT生成固定长度随机字符串的需求,需求也很简单,就是生成一个n位的仅包含0-9以及大写字母的字符串,因为这也是第一次使用QT自身的随机数,这里就做一下简单记录. 废话不多说,直 ...

  9. 14-8 C++函数调用运算符

    目录 14.8.0 引入 函数对象 含有状态的函数对象 函数对象常做泛型算法实参 14.8.1 lambda是函数对象 表示没有捕获值的lambda的类 表示lambda及其捕获行为的类 14.8.2 ...

  10. switch、case语句的问题

    switch.case语句: 点击查看代码 int state = 1; switch(state) { case 1: { //状态1执行的程序 } case 2: { //状态2执行的程序 } d ...