CSS之盒模型，浮动布局，定位布局

---

前言

盒模型，布局以及动画的学习笔记

---

一、CSS盒模型

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）以及content（内容）。margin、padding和border用来控制盒子的边距边框。content就是描述HTML元素的内容，通过width/height属性设置content的宽度和高度。

内容盒子(W3C盒子)

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。

• 盒子的宽

​ width+paddingLeft+paddingRight+borderLeft+borderRight

• 盒子的高

​ height+paddingTop+paddingBottom+borderTop+borderBottom

• 所占屏幕空间的宽

​ width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

• 所占屏幕空间的高

height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

边框盒子(IE盒子模型)

IE盒子使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。

• 内容区的宽

​ width-paddingLeft-paddingRight-borderLeft-borderRight

• 内容区的高

​ height-paddingTop-paddingBottom-borderTop-borderBottom

• 盒子的宽

​ width

• 盒子的高

​ height

• 所占屏幕空间的宽

​ width+marginLeft+marginRight

• 所占屏幕空间的高

​ height+marginTop+marginBottom

二、CSS布局

1.浮动布局

• 1、浮动布局用来解决块元素在x轴上排列的问题
• 2、浮动布局通常出现在 div>div 这种父子结构中，为子元素添加浮动特性
• 3、一个元素如果成为浮动元素，那么这个元素就会脱离文档流：宽度如果 没有指定则由内容决定；不再占据屏幕空间；同一级别的浮动元素会在一行排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素支撑；
• 4.如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通 流)，使用float来使元素浮 动，从而脱离标准流(文档流/普通流)
• 可选值：
  none，默认值，元素默认在标准流(文档流/普通流)中排列
  left，元素会立即 脱离标准流(文档流/普通流)，向页面的左侧浮动 right，元素会立即脱离 标准流(文档流/普通流)，向页面的右侧浮动

2.定位布局

2.1.静态定位

静态定位就是将一个元素定位在默认文档流中。

​ position: static;

2.2.相对定位

相对定位就是相对于自己以前在标准流中的位置来移动
position: relative;
使用top,right,bottom,left来控制

​ ​ ​ ​ ​ -注意点

• 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
• 在相对定位中同一个方向上的定位属性只能使用一个
• 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
• 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin / padding等属性的时会影响到标准流的布局

2.3.绝对定位

绝对定位就是相对于body来定位
​ position: absolute;

​ ​ ​ ​ ​ -注意点

• 绝对定位的元素是脱离标准流的
• 绝对定位的元素是不区分块级元素/行内元素/行内块级元素
• 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
• 一个绝对定位的元素会忽略祖先元素的padding

2.4.固定定位

固定定位就是可以让某个盒子不随着滚动条的滚动而滚动。
position: fixed;
​ ​ ​ ​ ​
​ ​ ​ ​ ​ -注意点:

• 固定定位的元素是脱离标准流的, 不会占用标准流中的空间
• 固定定位和绝对定位一样不区分行内/块级/行内块级

2.5.粘滞定位

position: sticky;
粘滞定位就是当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

​ ​ ​ ​ ​ -注意点

• 父元素不能overflow:hidden或者overflow:auto属性。

• 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

• 父元素的高度不能低于sticky元素的高度

• sticky元素仅在其父元素内生效

2.6.z-index

z-index属性的作用是专门用于控制定位流元素的覆盖关系的。

​ ​ ​ ​ ​ -注意点

• 如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
• 如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。

---