第二讲、盒子模型（01）

一、盒子模型的大小

1.width和height

width          盒子模型的宽度

height          盒子模型的高度

注意：width和height 只定义盒子的大小，不包含边框和边距

        如果内容太多，超过了width和height，则默认情况下将忽略width和height的设置

二、盒子模型的边框

1.边框的三大方面

border-width	border-color	border-style
边框的宽度	边框的颜色	边框的样式

边框的样式;

1> solid实线

2>double 双实线

3>dotted 点状线

4> dashed 虚线

案例：

缩写

border：border-width 值 border-style 值 border-color 值；缩写时没有先后顺序；

border-top 上边框

border-bottom 下边框

border-right 右边框

border-left 左边框

案例：

 上面是右边框的缩写格式，如果是只有border则是所有边框的样式设置。

2.内容区域

width 宽度        height 高度

内容溢出处理：

overflow        默认x、y轴的内容处理

overflow-x        x轴内容溢出处理

overflow-y        y轴内容溢出处理

内容溢出处理的4个值：

• visible        默认值
• hidden       溢出部分隐藏
• scroll          显示滚动条
• auto           浏览器自动处理

案例：

 3.内边距

语法：padding：；

内边距的四个值：

• padding-top        上内边距
• padding-bottom   下内边距
• padding-left         左边距
• padding-right       右内边距

内边距的简写：

padding：值；        表示四个边得内边距都一样

padding：值1 值2；        值1表示上、下内边距

                                        值2表示左、右内边距

padding：值1 值2 值3；值1表示上内边距

                                        值2表示左、右内边距

                                        值3表示下内边距

padding：值1 值2 值3 值4；        值1表示上内边距

                                                        值2表示右内边距

                                                        值3表示下内边距

                                                        值4表示左内边距

注意：当padding的值右4个时，其顺序是上、左、下、右，顺时针方向

4.外边距

语法：margin：；

外边距和内边距一样有四个值，其分别是：

• margin-top        上外边距
• margin-bottom   下外边距
• margin-left         左外边距
• margin-right       右外边距

margin：值；        表示四个边得外边距都一样

margin：值1 值2；        值1表示上、下外边距

                                        值2表示左、右外边距

margin：值1 值2 值3；值1表示上外边距

                                        值2表示左、右外边距

                                        值3表示下外边距

margin：值1 值2 值3 值4；        值1表示上外边距

                                                        值2表示右外边距

                                                        值3表示下外边距

                                                        值4表示左外边距