css3 box-sizing 盒模型学习手记

最新推荐文章于 2023-07-22 16:14:33 发布

hellcoldby

最新推荐文章于 2023-07-22 16:14:33 发布

阅读量723

点赞数

分类专栏： css3 文章标签： css3 box-sizing 盒模型

本文链接：https://blog.csdn.net/coldbao/article/details/52004134

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

盒模型 box-sizing

使用可以再保持页面布局不变的情况下改变内容的宽度

用法：box-sizing ： content-box || border-box || inherit(继承父元素的box-sizing)

        -moz-box-sizing:       border-box;
   -webkit-box-sizing:       border-box;
    box-sizing:        border-box;

截图：

注意： box-sizing 支持 IE8 以上浏览器。而且要加上前缀

代码：

<style>
.wrap{
	width:600px;
	height:100px;
	border:2px dashed blue;
	position:relative;
	margin:0 auto;
}

div{
	margin-right:15px;
	float:left;
}
.box{
	width:100px;
	height:100px;
	background-color: yellow;
}


.box1{
	background-color: red;
	width:100px;
	height:100px;
	padding:10px;
	color:#fff;
	border:5px solid #c03;
}
.contentSizing{
	background-color: red;
	width:100px;
	height:100px;
	padding:10px;
	color:#fff;
	border:5px solid #c03;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	box-sizing:content-box;
}
.boxSizing1{
	background-color: #069;
	width:100px;
	height:100px;
	padding:10px;
	color:#ffa;
	border:5px solid #4ABE01;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	font-size:12px;
}
fieldset{
	width:600px;
}
</style>

<fieldset>
    <legend>盒模型测试</legend>
    
        <div class="wrap">
            <div class="box">没有任何附加效果100px</div>
            <div class="box1">再加入boreder5px和padding10px</div>
            <div class="contentSizing">content-sizing所有效果不变</div>
            <div class="boxSizing1">box-sizing所有效果存在,宽高变成100px</div>
        </div>

</fieldset>