box-sizing
来源:互联网 发布:java获取客户端的ip 编辑:程序博客网 时间:2024/06/05 20:47
关于css 常用的box-sizing
在做项目时,有许多因素都要考虑到,其中浏览器解析的盒子模型就是其中之一;特别是在早些时候,万恶的IE 6 7 8时代 。我们都知道 一个常规完整的盒子模型内 包含 padding border width 如果有需求的话还要加上margin 。在保留元素各项声明需求的同时(比如border padding)还要得到我们想要的整个元素的width 不如试试box-sizing;css为我们减轻了不必要的麻烦。css3 真的带来便利 。
box-sizing 有三个属性,在这里第三个属性就不聊了 (inherit 就是继承来自父级的box-sizing属性)
box-sizing的第二个属性:
box-sizing:content-box;(
宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
div{ width: 180px; height:130px; padding: 50px; border:10px solid gray; background: red; /* box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; */ };
这是一个常规的盒子,content-box 就是这种效果 默认的。
);
box-sizing:content-box;(
这里重点说明下这个值:
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
这里先上样式:
div{ width: 180px; height:130px; padding: 50px; border:10px solid gray; background: red; box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; };
事实说明最终整个盒子模型的大小就是180px 边框和内补包含在内。
);
0 0
- Box-Sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- box-sizing
- 黑马程序员_Java基础:多功能小窗口,swing,io,net综合应用
- html中利用table进行布局
- 关于String内存分配的深入探讨
- MODBUS通讯协议及编程【一】
- [知其然不知其所以然-3] 为什么在高负载下cpu的温度没有显著提升
- box-sizing
- DateTime.Now.ToString()总结
- 南邮 OJ 1225 石子合并问题
- Java 嵌套类(Nested Class):静态嵌套类,内部类,局部类,匿名类
- POJ 1236 Network of Schools
- POJ3126
- 在C#中新手易犯的典型缺陷
- How to find indexPath for tapped button in tableView Using Seque
- AIX系统修改系统时间