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> <!-- 隐藏元素 -->

效果

inline
block

盒子大小

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>

效果

1.
2.
3.

溢出处理

当内容大于容器,在 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; -->

效果

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex