CSS3 box-sizing 盒子布局
2024-09-08 03:41:01
在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸,而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型,但对于表单form中的部分元素还是基于IE的怪异盒模型,如input里的radio、checkbox、button等元素,如果给其设置border和padding它们也只会往元素盒内延伸。
在W3C的标准模型下,宽度和高度仅仅包含了内容宽度,除去了边框和内边距两个区域,这样为web设计师处理效果带来了不少麻烦。为了解决这个问题,CSS3新增了一个盒模型属性box-sizing,能够事先定义盒模型的尺寸解析方式。
一般盒子的模式有两种:
1. content-box:仅包括content.即设置的width属性值仅为content的值。(box-sizing的默认值)
2. border-box:包括content+padding+border.设置的width的值是content+padding+border的值。
使用场景:
当一个容器宽度定义为 width:100%; 之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的
如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用,
特别是 input 和 textarea 等 现在设置 100% 再直接增加内边距和边框也不用再进行复杂的计算和适配了
最新文章
- 06-图1 列出连通集 (25分)(C语言邻接表实现)
- maven 打包
- 一步步实现Nagios监控linux主机及飞信报警
- java GUI之基本图形
- Linux基础知识-文件管理
- linux下登入mysql和加压zip文件
- ffmpeg中ff_scale_image()内存泄露
- SpriteBuilder中的碰撞分类(Categories)和掩码(Masks)
- FLASK简单入门
- 【STM32H7教程】第10章 STM32H7的FLASH,RAM和栈使用情况(map和htm文件)
- 影响CSS的margin合并的几个属性
- 洛谷 K短路(魔法猪学院)
- 从RDS中获取binlog
- sqlserver 并行度
- [转]MySQL中timestamp数据类型的特点
- 2.3.3 Button(按钮)与ImageButton(图像按钮)
- jQuery回溯
- oracle 远程登录sqlplus TNS:无监听
- ubuntu12.04安装KDevelop
- 【转】bind简单示例