当前位置: 首页 > news >正文

box-sizing失效情况

box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

  • 分析;如果目标元素的高度(宽度)只由其内容、padding、border确定的情况下,则会存在失效情况。

  • 解决方法:对目标元素设置固定高度(宽度)

  • 注:宽度或高度设置为百分比也会失效

/*情况一*/
.c {
    /* width: 200px; */
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
}
/*情况二*/
.c {
    width: 200px;
    /* height: 100px; */
    padding: 20px;
    box-sizing: border-box;
}

image-20210313175816446

image-20210313175841487

相关文章:

  • 多留点时间给生活和家人!
  • vue、uniapp 动态创建input进行文件上传
  • Js 三种绑定事件方式 及 区别
  • [软工] 楼上SLM 雏形具现
  • js promise resolve()的用法
  • 寻找传说中的“卡塔西斯”...
  • uniapp 页面通讯 uni.$on执行多次
  • 教材编者,请多点儿“钻研”精神
  • js 合并两个数组
  • 全国.NET俱乐部领导人在线会议报道
  • uniapp 动态获取节点信息
  • 记张自忠将军(梁实秋)
  • for、foreach、for in、for of 的区别
  • 「法拉第的故事」读后心得
  • js 导出json文件
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • __proto__ 和 prototype的关系
  • 【翻译】babel对TC39装饰器草案的实现
  • C++入门教程(10):for 语句
  • css选择器
  • extract-text-webpack-plugin用法
  • IE报vuex requires a Promise polyfill in this browser问题解决
  • laravel5.5 视图共享数据
  • leetcode46 Permutation 排列组合
  • Mac 鼠须管 Rime 输入法 安装五笔输入法 教程
  • MySQL-事务管理(基础)
  • Spring Cloud Alibaba迁移指南(一):一行代码从 Hystrix 迁移到 Sentinel
  • Travix是如何部署应用程序到Kubernetes上的
  • 分类模型——Logistics Regression
  • 工作中总结前端开发流程--vue项目
  • 七牛云假注销小指南
  • 入手阿里云新服务器的部署NODE
  • 扫描识别控件Dynamic Web TWAIN v12.2发布,改进SSL证书
  • 由插件封装引出的一丢丢思考
  • Java总结 - String - 这篇请使劲喷我
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • ​iOS实时查看App运行日志
  • ​Java并发新构件之Exchanger
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • (2)(2.10) LTM telemetry
  • (2009.11版)《网络管理员考试 考前冲刺预测卷及考点解析》复习重点
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (附源码)计算机毕业设计SSM疫情社区管理系统
  • (十六)串口UART
  • (一)Spring Cloud 直击微服务作用、架构应用、hystrix降级
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • ./和../以及/和~之间的区别
  • .NET CF命令行调试器MDbg入门(三) 进程控制
  • .NET 解决重复提交问题
  • .NET 设计一套高性能的弱事件机制
  • .set 数据导入matlab,设置变量导入选项 - MATLAB setvaropts - MathWorks 中国
  • /etc/fstab 只读无法修改的解决办法
  • /usr/bin/env: node: No such file or directory