box-sizing 属性、min-width属性、max-width属性

时间:2021-04-05 20:48:44

1.box-sizing 

这个属性是CSS3新增的属性。IE8开始兼容。box-sizing: border-box; border-box,就是边框的这个小盒。这个属性命令,width数值指的是border这个小盒的宽度,此时,padding 表现为一种“内减”,而不是原来的“外扩”。后面再任意设置边框border大小都只会 内减,而不会外扩,当页面屏幕缩小时div模块就不会掉下去。
box-sizing 属性的值还可以是:padding-box, content-box(默认),这个属性在流式布局中特别常用!

(1)没加代码之前:

box-sizing 属性、min-width属性、max-width属性box-sizing 属性、min-width属性、max-width属性

padding值是往外扩大

box-sizing 属性、min-width属性、max-width属性box-sizing 属性、min-width属性、max-width属性box-sizing 属性、min-width属性、max-width属性

(2)加入box-sizing:border-box;后,实际上是往里缩小,数值内减。

box-sizing 属性、min-width属性、max-width属性box-sizing 属性、min-width属性、max-width属性box-sizing 属性、min-width属性、max-width属性

2.min-width、max-width属性
当盒子的宽度是百分比来指定的话,很多时候要设置最
小的宽度和最大的宽度。min-width、max-width两个属性,IE7开始兼容的。

盒子的宽度是浏览器宽度的80%,但是,最大不会超过600px,最小不会小于400px,代码如下:

;box-sizing 属性、min-width属性、max-width属性