css布局-浮动布局+盒子模型+display

浮动

1. 什么是浮动：就是让块级标签不独占一行，目的（使用场景）：把块级标签可以排在一行上。

• float属性定义的元素在哪个方向浮动，在css中所有元素都可以浮动，浮动元素会生成一个块级框，不论他本身是何种元素。
• 如果浮动非替换元素，则要指定一个明确的宽度，否则，他会尽可能的窄。

2. 浮动的原理：
   就是让元素脱离文档流（文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。)，不占用标准流
3. float的值：

• left(元素向左浮动)
• right(元素向右浮动)
• none（默认，元素不浮动，会显示出其在文本中出现的位置0）
• inherit（从父元素中继承，不推荐使用）

4. 浮动后，后面的元素不管是块级元素还是行级元素，不会显示在下一行
5. 清除浮动：我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响（用了浮动就要清除浮动，让元素浮动起来，父元素也不会坍塌）
   目的：让后面的元素自动掉到下一行
   方法：
   1. 添加空标签，并设置样式：clear：both；
   clear：right；清除左浮动
   clear：left； 清除右浮动
   clear：both； 清除左右浮动
   clear：none； 左右浮动都不清除

<div class="worpper">
	<div class="box1">box1</div>这里的div是块级标签，会独占一行
	<div class="box2">box2</div>
	方法一：添加空标签，清除浮动
	<div class="clear"></div>
	添加box3，但是没有给他添加浮动，此时会出现box3在12底层不显示的问题
	<div class="box3">box3</div>
</div>	

.box1{
	background-color: #5F9EA0;
	float: right;
}
			
.clear{
	clear: both;/* 清除浮动方法一 */
}
.box2{
	background-color: #FF6600;
	float: left;
}
/* 没有添加浮动的box3 */
.box3{
	background-color: #FFFF00;
}

2. 再要清除浮动的父级添加样式：overflow：hidden；
   overflow：hidden；超出部分隐藏，也可以用来实现清除浮动。

.worpper{
	width: 600px;
	margin: 0 auto;
	border: 1px solid #000000;
	/* overflow: hidden; *//* 清除浮动方法二 */
}

3. 再要清除浮动的父级添加伪元素，并设定样式
   父元素：after{
   content：“”；
   display：block；
   clear：both；
   }
   注意：在实际项目开发中，我们一般首选第二种方案，因为一需要加空标签，三需要写样式，复杂，都不推荐

盒子模型

1. 每一个元素都是一个盒子，盒子由margin（外边距），border（边框线），padding（内边距）和content（内容）组成。
   

区别：外边距和内边距是以边框为参照。
系统默认外边距为8px
外边距（margin）：指的是元素边框线之外的距离

• margin-left：左外边距
• margin-right：右外边距
• margin-top：上外边距
• margin-bottom：下外边距
• margin：可以用来设置任意一个边的边距，可以带1-4个参数。
  1个（apx）：表示上下左右都有这样的一个外边距apx
  2个（apx bpx）：表示上下外边距为apx，左右为bpx
  3个（apx bpx cpx）：表示上外边距为apx，下外边距为cpx，左右外边距为bpx
  4个（apx bpx cpx dpx）：表示上外边距为apx，右外边距为bpx，下外边距为cpx，左外边距为dpx。
  内边距（padding）：指的是文本内容和边框之间的距离
• padding-left：左内边距
• paddingpadding-right：右内边距
• padding-top：上内边距
• padding-bottom：下内边距
• padding：可以用来设置任意一个边的边距，可以带1-4个参数。
  1个（apx）：表示上下左右都有这样的一个内边距apx
  2个（apx bpx）：表示上下内边距为apx，左右为bpx
  3个（apx bpx cpx）：表示上内边距为apx，下内边距为cpx，左右内边距为bpx
  4个（apx bpx cpx dpx）：表示上内边距为apx，右内边距为bpx，下内边距为cpx，左内边距为dpx。
  边框(border)
• border-width:边框线宽度
• border-style:边框线样式
• border-color:边框线颜色
  复合写法（简写）：
  border:border-width border-style border-color;
  注意：border-width border-style border-color这三个参数没有位置之分。

2. 盒子的真实尺寸
   盒子宽度 = width + padding左右 + border左右
   盒子高度 = height + padding上下 + border上下

display

1. display属性：用来设置元素的显示方式。
2. 属性值：

• none:不显示元素
• block:块显示，在元素前后设置换行符。目的：将行级标签转换为块级标签（因为行级标签不识别宽高， 而块级标签识别，转换后，行级标签也可以设置宽高了）
• inline:行内显示，将块级标签转换为行级标签。
• inline-block;将块级或行级标签转换为行内块级标签。