css3整理--box-sizing
box-sizing语法:
box-sizing : content-box || border-box || inherit
参数取值:
content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+content width/height。
border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。这里的content width/height包含了元素的border,padding,内容的width/height。即此处的内容宽度/高度=width /height-border-padding。
在实际应用中,该属性有个非常有用的地方,即根据百分比为元素设置宽度时。此时,如果元素有padding或者border,将box-sizing设置为border-box会非常有用。
例如:
<ul>
<li style="box-sizing:border-box; padding:0 10px; width:25%; float:left;"></li>
<li style="box-sizing:border-box; padding:0 10px; width:25%; float:left;"></li>
<li style="box-sizing:border-box; padding:0 10px; width:25%; float:left;"></li>
<li style="box-sizing:border-box; padding:0 10px; width:25%; float:left;"></li>
</ul>
该例子中,默认情况下,li一定不能保持在同一行内。但是设置了box-sizing:border-box之后,就可以保证li在同一行内。(IE8+和高级浏览器支持)
最新文章
- luogg_java学习_13_GUI
- 每瓶啤酒2元,2个空酒瓶或4个瓶盖可换1瓶啤酒。10元最多可喝多少瓶啤酒? php
- sqoop将关系型的数据库得数据导入到hbase中
- html5+css3第一屏滚屏动画效果
- C++默认参数不能是一个引用
- 学习Swift -- 可选链
- springMVC整合jedis+redis
- Sass和Compass入门
- Django学习-15-Cookie
- Iconfont 在HTML中的使用
- 【C#复习总结】 Async 和 Await 的异步编程
- 关于oracle设置主键自增的问题
- 使用phpstorm进行PHP断点调试
- Windows 10 执行pip list报错 UnicodeDecodeError: &#39;gbk&#39; codec can&#39;t decode
- RNN的深入理解
- springboot aop+@interface实现日志记录
- 转载:Java、C#双语版配套AES加解密示例
- 明星伙伴第一至八季/全集Entourage迅雷下载
- Windows Pre-commit hook for comment length Subversion
- contiki bsp
热门文章
- 3、Python的应用
- 使用three.js写全景图,使用sprite类canvas,结合射线,点击跳转指定全景图【转】
- Java通过JNI调用C++程序
- virtualbox centos安装增强工具和Centos与VirtualBox共享文件夹设置
- xcode 编译或者打包的时候 找不到图片的错误
- [Aaronyang] 写给自己的WPF4.5 笔记8[复杂数据处理三步曲,数据视图精讲1/3]
- GIT无法自动忽略YellowRV1.1.uvgui.Administrator文件的解决方法
- 转: 如何使用jstack分析线程状态
- 项目通过tomcat部署到服务器,请求数据中文乱码问题
- Linux给普通用户增加ssh权限