介绍 box-sizing:内容框/border-box/继承; & lt; !DOCTYPE html> & lt; html> & lt; head> & lt;元charset=皍tf-8"/比;
& lt; title> css3 box-sizing属性笔记& lt;/title> & lt;风格类型=拔谋?css"比;
身体{background - color: # aaa;} div.container{宽度:30 em;边界:1 em固体;}
.box {box-sizing: border-box; -moz-box-sizing: border-box;/* Firefox */-webkit-box-sizing: border-box;/* Safari */宽度:50%;边界:1 em固体红色;浮动:左;}
& lt;/style> & lt;/head> & lt; body> & lt; div类=癱ontainer"比;
& lt; div类=癰ox"在这个div占据左半部分。;/div> & lt; div类=癰ox"在这个div占据右半部分。;/div>
& lt;/div> & lt;/body> & lt;/html>
了解css中box-sizing属性的使用方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
<强> box-sizing属性定义及用法
box-sizing属性是css3中新增的属性,允许你以某种方式定义某些元素,以适应指定区域(假如您需要并排放置两个带边框的框,可通过将box-sizing属性设置为“border-box",这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中),
Internet Explorer,歌剧和Chrome浏览器支持box-sizing属性,Firefox还不支持该属性,但支持-moz-box-sizing属性替代box-sizing属性;
<强> box-sizing属性语法格式
<强>参数说明
内容框:这是由CSS2.1规定的宽度高度行为,宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框;
border-box:为元素设定的宽度和高度决定了元素的边框盒,就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度;
继承:规定应从父元素继承box-sizing属性的值;
<强>实例:
运行结果:
感谢各位的阅读!看完上述内容,你们对css中box-sizing属性的使用方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
