css盒子模型

css盒子

• 所有元素都可以看成一个盒子
  
• 从上面可以看出，盒子的组成成分有4个：

1.content 内容，可以是文本或图片
2.padding 内边距，用于定义内容与边框之间的距离
3.margin 外边距，用于定义当前元素与其他元素之间的距离
4.border 边框，用于定义元素边框

内容区

• 内容区是css盒子模型的中心，它有三个属性:width、height、overflow，width和height两个属性是针对内容区content而言的，不包括padding部分，当内容过多，超出width和height时，可以用overflow属性指定溢出处理方式。

宽高：width、height

div,span {width: 100px;height:50px;}
(行内元素设置的width和height无法生效，他们的宽高只能靠内容区撑起来)

行内元素，块元素，行内块元素：

常见行内元素有:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>（最典型）等，也可以将行内元素称为内联元素。
默认宽度就是它本身内容的宽度
注意：
1.行内元素只能容纳文本或其他行内元素

常见块元素有:<h1>~<h6>、<p>、<div>（最典型）、<ul>、<ol>、<li>等。高度、宽度、外边距以及内边距都可以控制。
注意：
1.文字类的元素内不能使用块级元素
2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

常见行内块元素:<img>、<input>、<td>同时具有块元素和行内元素特点，称为行内块元素
注意：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2.默认宽度就是它本身内容的宽度（行内元素特点）

内边界

• 内边界指的是内容区和边框之间的空间，可以看着内容区的背景区域，它有五种属性:padding-top、padding-bottom、padding-left、padding-right、padding

div { display: inline-block; 将快元素转化为行内块元素
padding-top:20px；
padding-bottom:40px；
padding-left:60px；
padding-right:80px；
border: 2px solid red;
background-color:black;
}

padding简写形式：
1.padding:像素值; 代表四个方向都是一样像素值
2.padding:像素值1;像素值2; 代表上下为1，左右为2
3.padding:像素值1;像素值2;像素值3;像素值4; 上右下左顺时针表示1234

外边距

• 外边距指的是两个盒子之间的距离可以是子元素和父元素的距离，也可以是兄弟元素之间的距离。外边距的属性有5种:margin-top、margin-bottom、margin-left、margin-right、margin

div { display: inline-block; 将快元素转化为行内块元素
margin-top:20px；
margin-bottom:40px；
margin-left:60px；
margin-right:80px；
border: 2px solid red;
background-color:black;
}
注意：
1.当只有父元素没有兄弟元素时：margin值相对于父元素
2.既有父元素又有兄弟元素时：该元素会先看四个方向有没有兄弟元素，如果有则margin值相对于兄弟元素，如果没有magin值则相对于父元素
3.margin的简写形式与padding相似

边框

边框就是之前学过的

div { border:2px solid red;}