HTML和CSS前端教程05-CSS盒模型
目录
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;
}
