CSS3 盒子模型

元素性质

元素的性质分为两类 块元素 和 行元素。

<div style="background: #ffd96a;"> 块元素 </div>

<span style="background: #f34949;"> 行元素 </span>

效果

行元素

块元素 是我们在 HTML 篇中列举过的 盒子，它们通常作为其他元素的容器。跟 行元素 的区域在于，块元素可以设置 宽高 并且初始的宽高值是 auto。

display

修改元素性质。

<div style="display: inline; background: #d0efb5;"> inline </div> <!-- 把元素设置成 “行元素” -->

<span style="display: block; background: #f3e595;"> block </span> <!-- 把元素设置成 “块元素” -->

<div style="display: none"> none </div> <!-- 隐藏元素 -->

效果

盒子大小

width & height

<!-- 设置宽高 -->

<div style="width: 100px; height: 100px; background: #2f89fc;"></div>

效果

min & max

<!-- “最小” 和 “最大” 限制，一般用于 “响应式” 类型的网址，自动伸缩到一定程度做大小限制 -->

<div style="min-width: 200; min-height: 200px;"> 宽高不能小于 200px </div> 

<div style="max-width: 200; max-height: 200px;"> 宽高不能大于 200px </div> 

auto

<!-- 宽高除了可以是任意 “CSS单位” 之外，还有一个特殊单位 “auto”，这也是盒子的默认值 -->

<!-- width: auto 与父容器等宽 | 等同于 width: 100% -->
<!-- height: auto 与容器里面的内容等宽 -->

<div style="width: 100px; height: 100px; background: #ff5e3a;"> 
 <div style="width: auto; height: auto; background: #f2f2f0; "> 1. <br> 2. <br> 3. </div>
</div>

效果

溢出处理

当内容大于容器，在 CSS 中有两种处理方式可以选择 隐藏多余 或者 显示滚动条。

visible

<!-- 默认值，不做溢出处理 -->

<p style="width: 100px; background: #fee9d7; white-space: nowrap;"> 佛系，放弃治疗 ～ </p>

效果

佛系，放弃治疗 ～

hidden

<!-- hidden 隐藏溢出内容 -->

<p style="width: 50px; background: #4bbb8b; white-space: nowrap; overflow: hidden;"> 逃避可耻但有用 ～ </p>

效果

逃避可耻但有用 ～

auto

<!-- auto 当内容溢出时，显示滚动条 -->

<p style="width: 50px; background: #fdadc7; white-space: nowrap; overflow: auto;"> 神说要有光，于是就有了光 ～ </p>

<!-- overflow-y: auto; 只显示上下滚动条 | overflow-x: auto; 只显示左右滚动条 -->

效果

神说要有光，于是就有了光 ～

scroll

<!-- scroll 无论是否溢出，都显示滚动条 -->

<p style="width: 50px; background: #e4eddb; white-space: nowrap; overflow: scroll;"> 你爱或者不爱，爱就在那里，不增不减 ～ </p>

效果

你爱或者不爱，爱就在那里，不增不减 ～

占位

visibility

<!-- visibility: hidden 跟 display: hidden 的区别在于，visibility 隐藏了元素内容，但空间仍然保持 -->

<div style="visibility: hidden; width: 20px; height: 20px; ">占位</div>
<div style="width: 20px; height: 20px;  background: #1a3c40;"> </div>

效果

box-sizing

border-box

<!-- 固定大小 | 不受 “边框” “边距” 等属性影响 | 默认值 -->

<div style="width: 100px; height: 100px; box-sizing: border-box; background: #fa9856; padding: 20px;"></div>

效果

content-box

<!-- 动态大小 -->

<div style="width: 100px; height: 100px; box-sizing: content-box; background: #22559c; padding: 20px;"></div>

<!-- 设置了 padding: 20px;  盒子的大小就涨到了 120px; -->

效果