css盒模型
学习要点：
1.元素尺寸
2.元素内边距
3.元素外边距
4.处理溢出
本章主要探讨HTML5中CSS盒模型，学习怎样了解元素的外观配置以及文档的整体布局。
一．元素尺寸
CSS盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下：
属性 值 说明 CSS版本
width auto、长度值或百分比 设置元素的宽度 1
height auto、长度值或百分比 设置元素的高度 1
min-width auto、长度值或百分比 设置元素最小宽度 2
min-height auto、长度值或百分比 设置元素最小高度 2
max-width auto、长度值或百分比 设置元素最大宽度 2
max-height auto、长度值或百分比 设置元素最大高度 2
width，height设置元素尺寸，元素的宽度和高度
值 说明
auto 自适应
像素px 设置元素尺寸
百分比 设置元素百分比尺寸，相对于父元素来衡定的
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
<div>
<p>你好</p>
</div>
min-width,min-height设置元素最小宽度和最小高度
值 说明
auto 自适应
像素px 设置元素尺寸
百分比 设置元素百分比尺寸，相对于父元素来衡定的
div{
background-color: #ff1c19;
min-width: 400px;
min-height: 200px;
width: 200px;
height: 100px;
}
<div>
<p>你好</p>
</div>
max-width，max-height设置元素最大宽度和最大高度
值 说明
auto 自适应
像素px 设置元素尺寸
百分比 设置元素百分比尺寸，相对于父元素来衡定的
div{
background-color: #ff1c19;
max-width: 200px;
max-height: 100px;
width: 400px;
height: 200px;
}
<div>
<p>你好</p>
</div>
二．元素内边距
CSS盒模型中可以设置元素内部边缘填充空白的大小，我们成为内边距。样式表如下：
属性 值 说明 CSS版本
padding-top 长度值或百分比 设置顶部内边距 1
padding-bottom 长度值或百分比 设置底部内边距 1
padding-left 长度值或百分比 设置左边内边距 1
padding-right 长度值或百分比 设置右边内边距 1
padding 1~ 4个长度值或百分比 简写属性 1
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
padding-top: 20px;
padding-bottom: 40px;
padding-left: 60px;
}
<div>
<p>你好</p>
</div>
内边距简写格式，上右下左
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
padding: 10px 20px 10px 20px;
}
<div>
<p>你好</p>
</div>
三．元素外边距
CSS盒模型中可以设置元素外部边缘填充空白的大小，我们成为外边距。样式表如下：
属性 值 说明 SS版本
margin-top 长度值或百分比 设置顶部内边距 1
margin-bottom 长度值或百分比 设置底部内边距 1
margin-left 长度值或百分比 设置左边内边距 1
margin-right 长度值或百分比 设置右边内边距 1
margin 1 ~ 4长度值或百分比 简写属性 1
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
width: 200px;
height: 100px;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 30px;
}
<div>
<p>你好</p>
</div>
外边距简写格式，上右下左
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
width: 200px;
height: 100px;
margin: 10px 20px 30px 40px;
}
<div>
<p>你好</p>
</div>
四．处理溢出
当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过overflow系列样式来控制它。
属性 值 说明 CSS版本
overflow-x 溢出值 设置水平方向的溢出 3
overflow-y 溢出值 设置垂直方向的溢出 3
overflow 溢出值 简写属性 2
以上溢出处理主要有四种处理值：
值 说明
auto 浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否则就不显示滚动条。
hidden 如果有溢出的内容，直接剪掉。
scroll 不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式不同。
visible 默认值，不管是否溢出，都显示内容。
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
width: 200px;
height: 100px;
overflow-y: hidden;
}
<div>
<p>简介：当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候，他的父亲，也是酒店董事长的梁泽，以及总经理梁宇青，正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行，就这样被压回了酒店准备亮相。但宇方仍不甘示弱，仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱，向天微义不容辞同行来帮忙，两人仓皇找着</p>
</div>