hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

box-sizing属性怎样用【html5教程】

2019-11-26HTML搜搜PHP网61°c
A+ A-
css3中的box-sizing属性许能够特定的体式格局定义婚配某个地区的特定元素。

CSS3 box-sizing属性

作用:许可您以确实的体式格局定义顺应某个地区的具体内容。

申明:Internet Explorer、Chrome、Safari 以及 Opera 支撑 box-sizing 属性。Firefox 须要前缀 -moz-。

语法:

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

这是由 CSS2.1 划定的宽度高度行动。

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

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

border-box

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

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

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

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

CSS3 box-sizing属性的运用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:30em;
border:1em solid;
margin: 100px auto;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>

<div class="container">
<div class="box">这个 div 占有左半部份。</div>
<div class="box">这个 div 占有右半部份。</div>
</div>

</body>
</html>

效果图:

以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。更多精彩内容人人能够关注ki4网相干教程栏目!!!

以上就是box-sizing属性怎样用的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
box-sizing属性怎样用【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章