box-sizing属性怎么用

2024-01-17 14:09 小编

CSS3box-sizing属性

作用:允许您以确切的方式定义适应某个区域的具体内容。

说明:InternetExplorer、Chrome、Safari以及Opera支持box-sizing属性。Firefox需要前缀-moz-。

语法:

box-sizing:content-box|border-box|inherit;

描述

content-box

这是由CSS2.1规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承box-sizing属性的值。

CSS3box-sizing属性的使用示例

<!DOCTYPEhtml>

<html>

<head>

<style>

div.container

{

width:30em;

border:1emsolid;

margin:100pxauto;

}

div.box

{

box-sizing:border-box;

-moz-box-sizing:border-box;/*Firefox*/

-webkit-box-sizing:border-box;/*Safari*/

width:50%;

border:1emsolidred;

float:left;

}

</style>

</head>

<body>

<divclass="container">

<divclass="box">这个div占据左半部分。</div>

<divclass="box">这个div占据右半部分。</div>

</div>

</body>

</html>


1705471741006.png



Tag: 怎么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码