web前端基础-06 CSS盒模型

一、盒模型介绍

1.1 盒模型概念

CSS对HTML文件生成了一个描述该元素在HTML文档布局中所占的矩形空间的矩形元素框，我们可以形象的将其看做一个盒子。

注：盒模型并不是官方给出的定义而是后期针对块元素提出的。

1.2 盒模型组成

盒模型由margin（外边距）、边框（boder）、内边距（padding）、内容（content）组成。

二、盒模型详解

2.1 border边框注意事项

1.border-width 边框宽度
2.border-color 边框颜色
3.border-style 边框样式
边框样式的值可以为: solid(实线)、dashed(虚线)、dotted(点划线)、double(双线)

可以单独使用：
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框

注意事项
1.border会改变原有盒子的大小，在实际操作当中，我们添加了border，就要相应的增减盒子的width,height属性
2.增减宽高时注意我们如果添加了上下左右方向上的border,则增减都是双倍的

2.2 padding使用方法

padding是border与content之间的间隔。
padding:10px; 是指上下左右四个方向的padding值均为10px;

单独使用:
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距

注意事项：

1. 添加padding也会增大该盒子的大小，在实际操作当中，我们添加了padding，就要相应的增减盒子的width,height属性
2. 增减宽高时注意我们如果添加了上下左右方向上的padding,则增减都是双倍的
3. 背景颜色与背景图片填充会覆盖content加padding区域

2.3 margin使用方法

margin是盒子与盒子之间的距离

margin:10px; 是指上下左右四个方向的margin值均为10px;

单独使用:
margin-top 上内边距
margin-bottom 下内边距
margin-left 左内边距
margin-right 右内边距

注意事项：

1. 系统会为某些元素设置默认的margin值或padding值。对我们计算有影响，所以一般先清除掉所有元素自带的margin和padding值。

                          *{margin:0;padding:0;}
   

2. 相邻兄弟元素在垂直方向相遇则取最大值；

3. 当父级子级元素都设置了margin时，子级的margin值会出现融合的情况，融合后会取两个元素里较大的值作为融合后的值。
   解决：父元素{overflow:hidden}

三、文本溢出

overflow属性：定义溢出元素内容区的内容会如何处理

语法：

               {overflow:visible/hidden/scroll/auto/inherit;}

visible:默认值，内容不会被修剪，会出现在元素框之外；
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪，但是浏览器显示滚动条
auto:如果内容超出，则会显示滚动条，不超出->不显示
inherit:规定应该从父元素继承overflow属性的值