CSS三大核心——盒模型、浮动和定位

网页布局过程：

• 准备好相关网页元素，本质都是盒子；
• 利用CSS设置好盒子样式，摆放到相应位置；
• 往盒子中添加内容。

一、盒模型

1、盒子模型

• 盒子模型：把HTML页面的布局元素看做一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距和实际内容。

2、边框的属性

border: border-width || border-style || border-color;

• 表格细边框实例

table,
td,
th {
   border: 1px solid #000;
   border-collapse: collapse;
   text-align: center;
}

• 边框宽度会影响盒子大小
  • 实际开发中，可以不量边框
  • 也可以量边框，而宽度减去相应宽度
  • box-sizing: border-box;

3、内边距-padding

• padding 会影响盒子的大小
  • 解决方案：如果需要保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
• padding不会撑开盒子的情况：
  • 不指定width或height

4、外边距-margin

• 使用margin来设置盒子的外边距

• 外边距的典型应用:盒子的水平居中的两个条件：
  • 盒子必须指定宽度；
  • margin的左右设置为auto

• 行内元素与行内块元素的水平居中:给其父元素设置text-align: center;

外边距合并问题–相邻块级元素垂直外边距合并

• 上个块级元素与下个块级元素都有外边距时，以大的那个为准；
• 解决方案：尽量只给一个盒子margin值。
  
• 外边距合并-嵌套块元素塌陷问题
  • 对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上边距，此时父元素会塌陷（向下移动）较大的外边距值。
  • 解决方案：
    • 可以为父元素定义上边框
    • 可以为父元素定义上内边距
    • 可以为父元素添加overflow：hidden
    • 还有其它方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题
      
• 行内元素一般为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以。

二、浮动

1、常见网页布局的三种方式

• 普通流（标准流）：标签按照规定好的默认方式进行排列。标准流是最基本的布局方式。一个网页基本都包含了三种布局方式。
• 浮动：
• 定位：

2、浮动

• 为什么要使用浮动? 为了让div可以水平排列或分别左右排列等。
• 浮动的典型应用? 可以让多个块级元素在一行内排列。
• 网页布局的准则: 块级元素纵向排列使用标准流，横向排列使用浮动
• 什么是浮动? 用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一浮动框的边缘。
• 浮动的特性? 1、浮动的元素会脱离标准流（脱标）；2、浮动的元素会一行内显示并且元素顶部对齐；3、任何元素都可以设置浮动，浮动的元素具有行内块元素的特性。
  • 1、脱离标准流的控制（浮）移动到指定位置（动），（俗称脱标）；
  • 2、浮动的盒子不再保留原先的位置；
  • 3、如果行内元素有了浮动，他们之间是没有缝隙的，是紧挨着的；
  • 4、块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定。
    

浮动注意事项：

• 一个元素浮动了，理论上其余元素也要浮动，浮动的盒子只会影响后面的标准流，不会影响前面的标准流
  

3、清除浮动

• 为什么要清除浮动? 有些浮动盒子的父级元素不适合设置固定的高度，若不清楚，会影响后续的标准流。
• 清除浮动的本质是什么? 清除浮动给后续标准流带来的影响。
• 清除浮动的策略是什么? 闭合父级元素。
• 清除浮动的方法? 额外标签法、overflow法、after伪元素和双伪元素。

<!-- 1、额外标签法  -->
<!-- 添加额外的块级标签，并使用clear:both; -->
<div style="clearboth"></div>

<!-- 2、overflow法 - 作用于父元素 -->
<!-- 在浮动元素的父元素使用overflow：hidden | auto | scroll; -->
<style>
	.father {
		overflow: hidden;
	}
	.father div {
		float: left;
	}
</style>
<div class="father">
	<div></div>
</div>

<!-- 3、after伪元素法 - 作用于父元素-->
<!-- 优点：没有增加额外的标签，结构更简单，但是需要照顾低版本浏览器 -->
<style>
	.clearfix:after {
		content: "";
		overflow: hidden;
		height: 0;
		clear：both;
		visibility: hidden;
	}
	.clearfix {
	/* IE6、7专有 */
		*zoom: 1;
	}
	.clearfix div {
		float: left;
	}
</style>
<div class="clearfix">
	<div></div>
</div>

<!-- 4、双伪元素法 - 作用于父元素-->
<!-- 优点：代码更简洁 -->
<style>
	.clearfix:before,
	.clearfix:after {
		content: "";
		display:table;
	}
	.clearfix:after {
		clear: both;
	}
	.clearfix {
	/* IE6、7专有 */
		*zoom: 1;
	}
	.clearfix div {
		float: left;
	}
</style>
<div class="clearfix">
	<div></div>
</div>

三、定位

定位：将盒子定在某一位置。
定位 = 定位模式 + 边偏移

• 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
• 定位模式：static | relative | absolute | fixed

1、静态定位static

静态定位是元素的默认定位方式，无定位的意思
选择器 {position: static}

• 特点：
  • 静态定位相当于标准流
  • 没有边偏移

2、相对定位relative

• 相对定位根据自身的位置进行定位
• 不脱标，位置保留

3、绝对定位absolute

• 绝对定位的特点：
  • 如果没有父元素或者父元素没有定位，则以浏览器为准
  • 如果父元素有定位（相对、绝对、固定），则以父元素为准
  • 绝对定位不再占用原来的位置，即脱标
• 口诀:子绝父相

4、固定定位

• 固定定位的特点：
  • 以浏览器的可视窗口为参照点移动元素
  • 与父元素没有任何关系
  • 不随滚动条滚动
  • 不占用原来的位置

# 固定定位技巧-固定在版心右侧的位置
小算法

5、粘性定位

• 粘性定位可以被认为是相对定位和固定定位的混合。
• 语法：{position:sticky;top:10px;}
• 特点：
  • 1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
  • 2.占有原先的位置
  • 3.必须指定top、bottom、left、right
• 缺点：兼容性差，IE不支持

6、定位叠放次序 z-index

选择器 {z-index: 1;}

• 数值可以是正整数、负整数或0，默认auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

7、绝对定位的盒子居中算法

• 1.走父容器的50%
• 2.margin 负值 自己盒子的一半
• 3.走父容器高度的一半
• 4.margin-top:-盒子高度的一半

8、定位的特殊性

• 绝对定位、固定定位和浮动定位类似。
  • 行内元素添加绝对或固定定位，可以直接设置高度和宽度
• 块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小
• 设置定位的盒子不会脱标
• 绝对定位会完全压住盒子。浮动元素不同，只会压住下面标准流的盒子，不会压住标准流盒子里面的文字