[CSS3] 盒模型 & overflow & resize & outline

盒模型是css中非常的重要

百度 tencent 美团 等等等等等等 校招面试都问过的问题

(1) W3C & IE 两种盒模型

<div>
<p class="p1"> Citic Securities </p>
</div>
/*在p外面 定义一个div 为了方便看清楚*/
div{
display: inline-block;
border:1px solid red;
}
p{
width:100px;
height:100px;
background:orange;
border:5px dashed green;
padding:10px;
margin:20px;
}

W3C标准模式：

width=content padding border margin根据设定看定

定义的width和height是内容的长度和宽度
padding 和 margin border再次定义的话, 会自动扩展

firefox,chrome, safari, opera, IE6+ 都是W3C标准的浏览器

IE模式(IE5 测试)：

width= content+ border+ padding

设定的width= content+ border+ padding
height一样
如果 border=10px padding=10px width=100
那么留给content为100-10*2-10*2=60

Test:

Chrome:



IE8



IE5

(2) box-sizing 解决问题

主要解决盒模型的解析模式

但是IE7以下的浏览器不支持box-sizing 所有使用有限

box-sizing: content-box(W3C 模式)

box-sizing: border-box (IE6-7 或 IE6以下)

【1】 Chrome 测试 两种不同





【2】 Examples

(3) overflow

定义了盒子的大小, 容纳的内容就受限了, 如果内容超过了定义的盒子大小

p{
width:136px;
height:136px;
background:orange;
margin:20px;
display: inline-block;
}
.p1{
overflow: visible;
}
.p2{
overflow: hidden;
}
.p3{
overflow: auto;
}
.p4{
overflow: scroll;
}

(4) resize 自由缩放

resize: horizontal
vertial
both
none

resize:both;
overflow: auto;

(5) outline

outline 和 border 效果相似

outline不占用布局空间， 属于动态样式, 只要元素获取焦点或者激活时呈现

p{
width:200px;
height:136px;
background:orange;
outline:20px solid #333;
margin: 40px;
}

outline 和 border 不同的点是：

不会影响盒模型, 同时不会影响文档流