day21 浮动效果

• 标准文档流：在没有给标签通过css布局时，标签在浏览器中有一套默认的布局规律

  • 布局规则：块级标签(一个占一行，设置宽高有效，默认宽度是父标签的宽度，默认高度是内容的高度)、行内标签(一行内可以由多个，默认大小就是内容大小，设置宽高无效)、行内块标签(一行可以显示多个，默认大小是内容大小，设置宽高有效，例如button、input、img)

• display属性：block：块级，inline：行内，inline-block：行内块，none：隐藏

• 脱标：脱离标准文档流。只要标签脱标，标准流的规则全部失效；不管什么样的标签在脱离标准流的情况下，都是按照以下规则进行布局：一行可以显示多个，默认大小是内容的大小，设置宽高有效

  • 浮动和定位都可以让标签脱标
  • float属性：left(左浮动)、right(右浮动)
  • 浮动的原理：
  • 浮动内容环绕现象：被环绕标签浮动，环绕的内容的容器标签不浮动
  • 清除浮动：清除因为浮动产生的高度塌陷。当父标签不浮动且不设置高度，子标签浮动就会产生高度塌陷的问题。
  • 清除浮动的方法：
    • 空盒子法：在高度塌陷的div最后添加一个空div，设置属性为clear: both
    • overflow：在会高度塌陷的标签设置style属性overflow为hidden
    • 挖能清除法(伪元素清除法)：选择器:after{display: block;clear: both;content: "";visibility: }

• 定位：

  • position：选择定位参考对象标签；属性值为initial或者static时代表不定位，为默认值；absolute，相对于第一个position属性不是initial/static的父标签进行定位，由内向外查找；realtive：相对原标签在标准流中的位置进行定位；fixed，相对于浏览器定位；sticky：定位保持网页中最后一个块在最后面(网页滚动的时候在浏览的最下面，网页不超过一屏在内容最下面)
  • left/right/top/bottom：设置当前标签的左右上下到参考对象的距离，注意：在不给position属性赋值时，直接设置这几个属性无效
• • 盒子模型：包含content、padding、border、margin，html中每个可见的标签都是一个盒子模型；设置标签宽高其实是设置盒子content部分大小，添加子标签时添加在content部分上，设置背景颜色和背景图都会作用于content以及padding部分；padding是内容外面可见部分，默认没有，有四个方向，设置padding会让标签变大；border，边框，有四个方向，可以单独控制每个方向的大小颜色、样式，赋值：border:边框宽度 边框样式 边框颜色，设置边框的大小也会影响标签的大小；margin，外边距，有四个方向，不可见