首页 期权学习期权知识正文

CSS3 box-sizing 属性

xiaojiucai 期权知识 2020-08-18 468 0

今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助。

  box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题。CSS中的盒模型(Box model)分为两派,一派是W3C的标准模型,一派是IE的传统模型。那它们之间有什么不同的呢?首先需要明确它们都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系;而不同的地方就在于两者的计算方法不一至:(下面引用一些公式向大家展示一下两者的不同之处)

box-sizing属性可以为三个值之一:

content-box(default),border-box,padding-box。

content-box,border和padding不计算入width之内

padding-box,padding计算入width内

border-box,border和padding计算入width之内,其实就是怪异模式了~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
        color: white;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;  
        color: white;              
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
</style>
	</head>
	<body>
		<div class="content-box">content-box</div>
		<div class="padding-box">padding-box</div>
		<div class="border-box">border-box</div>
	</body>
</html>

我是在火狐浏览器下运行的,所以加了-moz-;-moz-代表firefox浏览器私有属性

原文链接:https://www.qiquanji.com/post/6966.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论