目录
- 1. CSS盒模型
- 1.1 元素的尺寸
- 1.2. 元素内边距 padding
- 1.3. 元素外边距 margin
- 1.4. 处理溢出overflow
- 1.5. 元素的可见性Visibility
- 2. CSS元素的盒类型
- 2.1. 块级元素(区块)
- 2.2. 行内元素
- 2.3. 行内-块元素
- 2.4. 盒类型元素转换dispaly
- 3. CSS盒元素的浮动float
1. CSS盒模型
元素的尺寸
1.1 元素的尺寸
| 属性 | 值 | 说明 |
|---|---|---|
| width | auto、长度值或百分比 | 元素的宽度 |
| height | auto、长度值或百分比 | 元素的高度 |
| min-width | auto、长度值或百分比 | 元素的最小宽度 |
| min-height | auto、长度值或百分比 | 元素的最小高度 |
| max-width | auto、长度值或百分比 | 元素的最大宽度 |
| max-height | auto、长度值或百分比 | 元素的最大高度 |
用于可能动态产生元素尺寸变大变小的问题，来限制最大最小值
div{ ?background: silver; ?width: 200px; ?height: 200px; ???min-width: 100px; ?min-height: 100px;}<div>HTML5</dive>1.2. 元素内边距 padding
div{ ?padding-top: 10px; ?padding-bottom: 10px; ?padding-right: 10px; ?/*上下各空出10,20px*/ ?padding: 10px 20px; ?/*上,右，下，左*/ ?padding: 10px, 20px,10px,10px;}1.3. 元素外边距 margin
1.4. 处理溢出overflow
溢出的参数值
| 值 | 说明 |
|---|---|
| auto | 浏览器自动处理溢出内容，用滚动条 |
| hidden | 有溢出，直接剪掉 |
| scroll | 不管是否溢出，都有滚动条 |
| visible | 默认值，不管是否溢出，都显示 |
div{ ?overflow-y: auto;}1.5. 元素的可见性Visibility
| 属性值 | 说明 |
|---|---|
| visible | 默认值，元素在页面上可见 |
| hidden | 元素不可见，但会占据空间 |
| collapse | 元素不可见，隐藏表格的行列。如果不是表格，则和hidden一样 |
div{ ?background: silver; ?width: 200px; ?height: 200px; ?visibility: visible;}2. CSS元素的盒类型
CSS盒模型中的display属性，可以更改元素本身盒类型，那么有哪些盒类型呢？
2.1. 块级元素(区块)
- 能够设置元素尺寸，隔离其他元素功能（有换行功能）的元素
<div>, <p>
2.2. 行内元素
- 不能设置元素尺寸，它只能自适应内容、无法隔离其他元素，其他元素会紧跟其后:
<span>, <d>
2.3. 行内-块元素
- 可以设置元素尺寸，但是无法隔离其他元素
<img>
2.4. 盒类型元素转换dispaly
| 值 | 说明 |
|---|---|
| block | 盒为块级元素 |
| inline | 盒为行内元素 |
| inline-block | 盒为行内-块元素 |
| none | 盒子不可见，不占位 |
div{ ?background: silver; ?width: 200px; ?height: 200px; ?/*转成了行内元素*/ ?display: inline; ?/*转成了行内-块元素*/ ?display: inline-block}3. CSS盒元素的浮动float
| 值 | 说明 |
|---|---|
| left | 浮动元素靠左 |
| right | 浮动元素靠右 |
| none | 禁止浮动 |
#a{ ?background: maroon; ?float: left;}#b{ ?background: green; ?float: right;}#c{ ?background: blue; ?float: left;}HTML和CSS前端教程05-CSS盒模型
原文地址：https://www.cnblogs.com/haochen273/p/10306653.html