CSS中的border-sizing

html-css021

CSS中的border-sizing,第1张

一、box-sizing: content-box|border-box|inherit

1.content-box:宽和高只是内容部分,不包含padding和border

2.border-box:box的宽和高包含padding和border

3.inherit:继承自父级

二、demo

<style type="text/css">

.box1,.box2{

width: 100px

height: 100px

border:20px solid red

padding:20px

float: left

margin-right: 50px

}

.box1{

box-sizing: content-box

}

.box2{box-sizing: border-box}

</style>

<body>

<div class="box1">box1</div>

<div class="box2">box2</div>

效果图:

![RCT223]26@56_K91HECU_0D.png]( https://upload-images.jianshu.io/upload_images/6955119-520e1f66f0c68568.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )

2个层都有浮动应该不是IE63px问题...是不是里头的元素的原因呢~如果你布局要求不是很严格的话~你就把middle的宽度设大点点吧~~

你要实现的布局可以这样写~

<div id="middle">

<div id="main"></div>

<div id="sidebar1"></div>

</div>

<div id="sidebar2"></div>

将它们都float:left就可以了~

主要要清理浮动~以免影响布局