学习CSS布局 - box-sizing
2024-08-22 07:27:21
box-sizing
人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing
的CSS属性。
当你设置一个元素为 box-sizing: border-box;
时,此元素的内边距和边框不再会增加它的宽度。
这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
/** {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}*/ .simple {
width: 400px;
height: 200px;
border: 1px solid red;
margin: 20px auto; box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.fancy {
width: 400px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
padding: 50px; box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="simple" class="simple">我是simple</div>
<div id="fancy" class="fancy">我和simple一样大了</div> <script>
var oDiv1 = document.querySelector('#simple');
console.log(oDiv1.offsetWidth, oDiv1.offsetHeight);
var oDiv2 = document.querySelector('#fancy');
console.log(oDiv2.offsetWidth, oDiv2.offsetHeight);
</script>
</body>
</html>
结果:
既然没有比这更好的方法,一些CSS开发者想要页面上所有的元素都有如此表现。
所以开发者们把以下CSS代码放在他们页面上:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
这样可以确保所有的元素都会用这种更直观的方式排版。
不过 box-sizing
是个很新的属性,目前你还应该像我上面例子中那样使用 -webkit-
和 -moz-
前缀。
这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。
原文地址:http://zh.learnlayout.com/box-sizing.html
最新文章
- TDD学习笔记【三】---是否需针对非public方法进行测试?
- MFC控件的SubclassDlgItem
- SQL server 临时表
- 转 iOS Core Animation 动画 入门学习(一)基础
- 例题.点击按钮显示内容+弹窗效果+ajax
- Entity Framework SqlFunctions 教你如何在EF调用sqlserver方法的函数存根
- 用JSP做后台管理系统
- bzoj 3926 [Zjoi2015]诸神眷顾的幻想乡(SAM)
- JS设置Cookie,及COOKIE的限制
- 《Effective C++ 》学习笔记——条款11
- JQUERY prop与attr差额
- 用R进行文本分析初探——以《红楼梦》为例
- poweshell批量删除某类型文件
- Excel读写
- NCC Meetup 2018 Shanghai 活动小结(含PPT与视频)
- (zhuan) 一些RL的文献(及笔记)
- [FQ]Tor + Chrome + PAC 尝试 FQ
- Ing_制作在线QQ
- hadoop kafka install (6)
- SpringKafka消费端配置类ConsumerConfig.java源码
热门文章
- <;a>;标签里面直接嵌套图片,<;img>;下面出现一小段空白的原因
- js 如何移除一个匿名函数的绑定事件
- 前端整理——Vue部分
- 【读书笔记】iOS-“一心多用”利用多线程提升性能
- 每篇半小时1天入门MongoDB——1. MongoDB介绍和安装
- Python&#160;基于python编写一些算法程序等
- js,H5本地存储
- 【Java入门提高篇】Day27 Java容器类详解(九)LinkedList详解
- 洗礼灵魂,修炼python(40)--面向对象编程(10)—定制魔法方法+time模块
- linux调度器源码分析 - 概述(一)