HTML&CSS精华知识点——常规流、浮动、定位

HTML&CSS精华知识点——第七节

一、常规流
视觉格式化模型（布局规则）：页面中的多个盒子排列规则，大体上将页面中盒子的排列分为三种：常规流、浮动、定位
常规流：所有元素，默认情况下，默认都属于常规流布局
1、布局的总体规则：块盒独占一行，行盒水平依次排列
【扩展】包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域，绝大部分情况下，盒子的包含块，为其父元素的内容盒
1）、块盒

• 每个块盒总宽度，必须刚好等于包含块的宽度，宽度的默认值是auto，auto：将剩余空间吸收掉，若宽度边框内边距计算后仍然有剩余空间，该剩余空间被margin-right吸收
• 在常规流中，块盒在其包含快中居中可以定宽margin：0 auto
  • 百分比取值
• padding、margin、可以取值为百分比，相对于包含块的宽度
• 高度的百分比：包含块的高度是否取决于子元素的高度，设置百分比无效，包含块高度不取决于子元素高度，百分比相对于父元素的高度
• 上下外边距合并，上下边距相邻、会进行合并，两个值取最大值
  二、浮动 float：这个属性可以让元素排队
  1、应用场景：文字环绕、横向排列
  2、修改float属性值为
  -left：元素靠上靠左排列
  -right：元素靠上靠右排列
  -none：默认值，常规流
  3、浮动的基本特点：当一个元素浮动后，一定是块盒、浮动元素的包含块，和常规流一样，为父元素内容盒
  4、浮动元素盒子尺寸
  • 宽度为auto时，适应内容宽度
  • height为auto，与常规流一致，适应内容高度
  • margin为auto，为0
  • 边框、内边距、百分比设置与常规流一样
  5、盒子排列
  左浮动的盒子靠上靠左排列、右浮动的盒子考上靠右排列、浮动盒子在包含块中排列时，会避开常规流快盒、’常规流块盒在排列时，无视浮动盒子、行盒在排列时，会避开浮动盒子、外边距盒子不会发生外边距合并
  【扩展】如果文字没有在行盒中，浏览器会自动生成行盒包裹文字
  6、高度坍塌
  根源：常规流盒子自动高度，在计算时，不会考虑浮动盒子，只考虑常规流盒子
  7、清除浮动，
  1）、设计css属性：clear
  -默认值 none
  -left清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
  -right清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
  -both清楚两侧浮动，该元素必须出现在浮动元素的下方
  2）、伪元素清除法
  .clearfix::after{
  content:””;
  display :block;
  clear:both;
  }
  三、层模型（定位）
  1）绝对定位： position： absolute； top：（填数字） px； left:（填数字） px； 当你希望某一元素出现在特定位置的时候，可以使用绝对定位，然后配合着 top、 left、right、 bottom 一起用（距离某一方向多少像素，但是 left 和 right 不能同时出现，并且 left 是左边线距离浏览器多少像素， right 是右边线距离浏览器多少像素， top是上边线距离浏览器多少像素，一般不用 bottom），但是， 他会脱离原来的位置进行定位（会向上一层，底下的位置会空出来，其他的元素顶上去），它是相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。
  2） 相对定位： position： relative； top：（填数字） px； left:（填数字） px； 当你希望某一元素出现在特定位置的时候，可以使用相对定位，然后配合着 top、 left、
  right、 bottom 一起用，但是， 他会保留原来的位置进行定位（原来的位置还占着，但是没东西），它是相对于自己原来的位置进行定位。
  3）定位原则： 用 relative 作为参照物（保留原来位置进行定位，如果不设置 top和 left， 对后续元素都没有影响），用absolute 定位（可以任意调换自己的参照物，定位更灵活），这种原则被称为子绝父相。
  4）固定定位： position： fixed； top：（填数字） px； left:（填数字） px； 当你希望某一元素不随着滚动条的拖曳而改变的时候，可以使用固定定位，然后配合着 top、left、 right、 bottom 一起用
  5）堆叠上下文，设置z-index，只有定位元素设置此属性值有效，z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖，z-index： 1；： 提高层级，值越大越往上。
  四、补充
• 绝对定位、固定定位元素一定是块盒
• 绝对定位、固定定位元素一定不是浮动
• 没有外边距合并