CSS笔记-盒子模型

#前端/css

在CSS中，所有元素都被一个个盒子包围着，一般使用两种盒子：块级盒子（block box）和 内联盒子（inline box）。

盒子模型的内容

盒子模型的各个部分

1. 内容（content）： 盒子里面装的东西，大小可通过设置width和height
2. 内边距（padding）： 盒子边缘和里面的东西之间的间距, 通过设置padding
3. 边框（border）： 盒子边框，边缘部分，通过设置border
4. 外边距（margin）： 盒子和其他盒子的间距，通过设置margin

两种盒子模型：

• 标准盒子模型
  1. 通过设置width和height设置content
  2. 盒子大小 = width/height + padding + border
  3. margin 不计入实际大小(不影响盒子所在模型，影响盒子的外部空间)
  4. box-sizing： 设置content-box 来转换为标准盒子模型
• 替代盒子模型
  1. 通过设置width和height设置盒子大小
  2. 盒子大小= width/height
  3. 内容大小 = width/height-padding-border
  4. box-sizing： 设置border-box 来转换为替代盒子模型

块级盒子和内联盒子

盒子类型/行为	换行	width/height	垂直方向	水平方向
块级盒子	每个盒子都会换行	可以发挥作用	将其他元素从当前盒子周围推开	占据父容器在该方向的可用空间（和父容器等宽）
内联盒子	盒子不会换行	不起作用	不会把其他处于 inline状态的盒子推开	不会把其他处于 inline状态的盒子推开

• 块级盒子（block box）在页面的行为表现

  1. 每个盒子都会换行
  2. width 和height 属性可以发挥作用
  3. 在内联方向扩展并占据父容器在该方向的可用空间（绝大数情况下意味着盒子和父容器一样宽）
  4. 内边距, 外边距和 边框会将其他元素从当前盒子周围推开

• 内联盒子（inline box）在页面的行为表现

  1. 盒子不会换行
  2. width 和 height 属性不起作用
  3. 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline状态的盒子推开
  4. 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline状态的盒子推开

外边距 margin

外边距属性

.wrapper {
	margin-top:100px; // 上外边距 
	margin-right:50px; // 右外边距 
	margin-bottom:100px; // 下外边距 
	margin-left:50px; // 下外边距 
	margin:50px; // 缩写属性
}

上下margin传递

传递情况：

1. margin-top传递（常用）：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
2. margin-bottom传递（少见）：如果块级元素的底部线和父元素的底部线重叠并且父元素的高度为auto，那么这个块级元素的margin-bottom值会传递给父元素

防止传递的解决方案：

• 给父元素添加padding-top/margin-bottom
• 给父元素设置border
• 触发BFC（block format context）：设置overflow为非visible

上下margin折叠

这对出现的情况：

1. 垂直方向上两个相邻的margin有可能会合并成一个margin，这个叫折叠
2. 规则：两个值进行比较，取较大的值

防止折叠的解决方案：

• 只给其中一个元素设置margin

内边距

内边距属性

.wrapper {
	padding-top:25px;// 上内边距 
	padding-right:50px; // 右内边距 
	padding-bottom:25px;// 下内边距  
	padding-left:50px; // 左内边距
	padding: 50px;  // 缩写属性 
}

边框

边框宽度

border-width 属性为边框指定宽度

p.one {    
	border-style:solid;    
	border-width:5px; // 缩写属性   
	border-top-width：5px;// 上边框宽度    
	border-right-width：5px;// 右边框宽度    
	border-bottom-width：5px;// 下边框宽度    
	border-left-width：5px;// 左边框宽度
}

边框颜色

border-color 属性用于设置边框的颜色

p.one {    
	border-style:solid;    
	border-color:red; // 缩写属性    
	border-top-color:red; // 上边框颜色   
	border-right-color:red; // 右边框颜色    
	border-bottom-color:red; // 下边框颜色    
	border-left-color:red; // 左边框颜色
}

边框样式

border-style 属性用来定义边框的样式。样式取值：最常用—> solid & dashed

p.one {    
	border-width:5px;    
	border-style:solid; // 缩写属性    
	border-top-style:solid; // 上边框样式   
	border-right-style:solid; // 右边框样式    
	border-bottom-style:solid; // 下边框样式    
	border-left-style:solid; // 左边框样式
}

border简写属性

不区分顺序 推荐： 宽度 样式 颜色

.wrapper {
	border:5px solid red;
}

缩写属性

• top、right、bottom、left的顺时针
• 三个值的时候： 上右下， 左边跟随右边的值
• 两个值的时候： 上下，下边跟随上边的值，左边跟随右边的值
• 一个值的时候：所有使用同一个值