CSS盒子模型——边框&内外边距&默认样式

日期：2020-10-03

作者：19届WY

标签：CSS盒子模型，边框设置，内外边距设置

一、盒子模型

1、盒子的大小

• 使用width来设置盒子内容区的宽度
• 使用height来设置盒子内容区的高度
• width和height只是设置盒子内容区的大小，而不是盒子整个的大小
• 盒子可见框的大小由内容区，内边距和边框共同决定

.box1{
    
    
	 width:100px;
	 height:100px;
	 /*设置背景颜色*/
	 background-color: #bfa;
}

2、为元素设置边框

• 要为一个元素设置边框必须指定三个样式

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

1⃣️边框的宽度

 /*设置边框的宽度*/
	border-width:100px;

• 使用border-width可以分别指定四个边框的宽度

• 如果在border-width指定了四个值。
  则四个值会分别设置给上右下左，按照顺时针的方向设置的

• 如果指定三个值：

  则三个值分别设置给 上 左右 下

• 如果指定两个值：
  则两个值会分别设置给 上下 左右

• 如果指定一个值：
  则四边全是该值
  除了border-width，CSS还提供了border-xxx-width

• xxx的值可能是top right bottom left
  专门用来设置指定边的宽度

	border-width:10px 20px 30px 40px;
	border-width:10px 20px 40px;
	border-width:10px 20px;
	border-width:10px;

2⃣️边框的颜色

• 设置边框的颜色

• 和宽度一样，color也提供四个方向的样式，可以分别指定颜色

• border-xxx-color

border-color:red;
border-color:red yellow orange green;
border-color:red yellow orange;

3⃣️边框的样式

• 设置边框的样式

  可选值：
   none，默认值，没有边框
   solid，实线
   dotted，点状边框
   dashed，虚线
   double，双线
  

• style也可以分别指定四个边的边框样式，规则和width一致

• 同时它也提供border-xxx-style四个样式，来分别设置四个边

 border-style:dotted solid double dashed;

4⃣️设置边框——border

• 大部分浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none

border-width:10px;
border-color:red;
border-style:dotted;

• border：
  - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
  - 而且没有任何的顺序要求
  - border一指定就是同时指定四个边，不能分别指定

border:red solid 10px;
border-right:none;/*把不想要的那条边的样式去掉*/

• border-top border-right border-bottom border-left
  可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

二、内边距

• 内边距，指的是盒子的内容区与盒子边框之间的距离
• 一共有四个方向的内边距，可以通过
  padding-top
  padding-right
  padding-bottom
  padding-left
  来设置四个方向的内边距
• 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
• 盒子的大小由内容区、内边距、边框共同决定
• 盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width;
• 可见框的高度 = border-top-width + padding-top + height + padding-bottom +border-bottom-width;

/*设置上内边距*/
padding-top:100px;
/*设置右内边距*/
padding-right:100px;

• 使用padding可以同时设置四个边框的样式，规则和border-width一致

padding:100px 200px 300px 400px;

三、外边距

1⃣️一般操作

• 外边距指的是当前盒子与其他盒子之间的距离，它不会影响可见框的大小，而是会影响到盒子的位置
• 盒子有四个方向的外边距：
  margin-top
  margin-right
  margin-bottom
  margin-left
• 由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左边距时，会导致盒子自身的位置发生改变

/*设置box1的上外边距，盒子上边框和其他的盒子的距离*/
margin-top: 100px;
/*左外边距*/
margin-left: 100px;
/*设置右和下外边距*/
margin-right: 100px;

2⃣️设置负值

• 边距也可以设置为一个负值
  如果外边距设置的是负值，则元素会往反方向移动

margin-left: -100px;
margin-top: -100px;

3⃣️设置auto

• margin还可以设置为auto，auto一般只设置给水平方向的margin
• 如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
• 垂直方向如果设置为auto，则外边距默认就是0
• 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中

margin-left: auto;
margin-right: auto;

4⃣️简写属性

• 外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距,，规则和padding一样

margin:10px 20px 30px 40px;
margin: 0 auto;

5⃣️垂直外边距的重叠

• 垂直外边距的重叠：
  - 在网页中相邻的垂直方向的外边距会发生外边距的重叠
  - 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
  注意相邻和垂直方向两个前提

<style type="text/css">
	.box1{
    
    
		width:100px;
		height:100px;
		background-color:red;
/*为上边的元素设置一个下外边距*/
		margin-bottom:100px;
}
	.box2{
    
    
		width:100px;
		height:100px;
		background-color: yellow;
/*为下边的元素设置一个上外边距*/
		margin-top:100px;
}
</style>
/*这两个兄弟元素相邻垂直外边距是100px，不是200px*/

• 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

.box3{
    
    
	width:200px;
	height:200px;
	background-color: green;			
}
.box4{
    
    
	width:100px;
	height:100px;
	background-color:yellowgreen;
/*为下边的元素设置一个上外边距,使子元素的位置下移*/
	margin-top:100px;
}
/*4是3的子元素时，4的外边距也会给3*/

四、默认样式

• 浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果
• 所以为很多的元素设置了一些默认的margin和padding
• 而它的这些默认样式，正常情况下我们都是不需要使用的
• 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统去掉

/*清楚浏览器的默认样式*/
*{
    
    
	margin:0;
	padding:0;
}