CSS - box-sizing简单例子
来源:互联网 发布:java 邮件发送乱码 编辑:程序博客网 时间:2024/06/05 17:33
最近工作中使用到css box-sizing属性,以一个简单的例子特此记录。
1. 实验
css代码:
.monitor { font-size: 16px; width: 100px; height: 100px; padding: 10px; border: 1px solid black; box-sizing: content-box;}html代码:
<div id="hp" class="monitor"></div>
效果截图:
指定 box-sizing 为 content-box:
指定 box-sizing 为 border-box:
2. 结论:
1. 当指定 box-sizing 为 content-box:div 中 content 的 width 等于 css 中设置的 width
(100px )
2. 当指定 box-sizing 为 border-box: div 中 content 的 width 等于 css 中设置的 width - padding width * 2 - border width * 2
(100 - 10 * 2 - 1 * 2 = 78px )
3. 常见应用: 有时候设置子元素的padding或者border, 会把父元素撑破,为了避免这种情况,我们可以指定子元素的box-sizing为border-box。
0 0
- CSS - box-sizing简单例子
- css box-sizing
- CSS-CSS3 box-sizing
- css:box-sizing总结
- CSS box-sizing属性
- css-------box-sizing
- css box-sizing
- css :box-sizing
- CSS之Box-sizing
- CSS: box-sizing
- CSS | box-model & box-sizing
- CSS之box-sizing的用处简单介绍
- css布局box-sizing使用
- CSS:box-sizing的使用
- CSS的box-sizing属性
- CSS学习笔记:box-sizing
- html+css:box-sizing属性
- CSS box-sizing 属性详解
- JAVA 遍历C盘下所有TXT格式文件
- 第12周 【项目4 - 点、圆的关系】(3)
- 26>AFN监控当前网络的状态
- Xcode中BaseSDK和IOS DeploymentTarget区别
- kingeditor配置
- CSS - box-sizing简单例子
- JPA的查询语言:JPQL的关联查询
- vc 文档的读写
- [leetcode][tree][dfs] Path Sum
- 注册表
- js 基础总结
- Android 碎片Fragment之(生命周期事件处理过程)
- 生成@3x图片对应的@2x和@1x版本--RTImageAssets
- 文章标题