css3盒子模型微课_CSS3 盒子模型

元素性质

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

块元素

行元素

效果

块元素

行元素

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

display

修改元素性质。

inline

block

none

效果

inline

block

盒子大小

width & height

效果

min & max

宽高不能小于 200px

宽高不能大于 200px

auto

1.
2.
3.

效果

1.

2.

3.

溢出处理

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

visible

佛系，放弃治疗 ～

效果

佛系，放弃治疗 ～

hidden

逃避可耻但有用 ～

效果

逃避可耻但有用 ～

auto

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

效果

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

scroll

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

效果

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

占位

visibility

占位

效果

占位

box-sizing

border-box

效果

content-box

效果