零基础Vue的小白学习路——CSS基础（四）浮动、定位

• 浮动：早期用来实现文字环绕图片效果，现在是主流的页面布局方式之一。
  • 元素浮动的特点：
    • 1、脱离文档流
    • 2、浮动后默认宽高都由内容撑开，而且可以设置宽高
    • 3、不会独占一行
    • 4、不会margin合并，也不会margin塌陷
    • 5、不会像行内块一样被当作文本处理（没有行内块的空白问题）
  • 浮动后的影响：
    • 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
    • 对父元素的影响：不能撑起父元素的高度，导致父元素的高度塌陷；但父元素的宽度依然束缚浮动的元素。
  • 解决浮动后的影响：
    • 父元素高度塌陷问题：
      • 1、给父元素设置高度
      • 2、父元素浮动
      • 3、overflow：hidden
      • 4、clear
      • 5、::after{content:'' ； display:block； clear:both}
  • 浮动进行页面布局：
    • 1、大区域划分，不同区域间同行呈现需采用浮动，跨行直接视为兄弟元素。
    • 2、大区域内的元素同行采用浮动，跨行视为兄弟元素。
• 定位：
  • 1、相对定位：相对自己原来的位置调整元素位置。
    • position：relative top/bottom/left/right： ...px
    • 特点：不脱离文档流；元素位置变化不会对其他元素产生任何影响；定位元素的显示层级比普通元素高，可能会盖在普通元素之上；left和right，top和bottom不能一起设置。
  • 2、绝对定位：参考它的包含块（子绝父相）（没有脱离文档流的元素，包含块是父元素；脱离文档流的元素，第一个有定位属性的祖先元素是包含块）
    • position：absolute top/bottm/left/right：...px
    • 特点：脱离文档流；元素位置变化会对其他元素位置产生影响；定位元素的层级比普通层级高，可能会盖在普通元素之上；绝对定位和浮动不能同时设置；无论是什么元素，设置为绝对定位后，都变成了定位元素（默认宽高被内容所撑开，且能自由设置宽高）。
  • 3、固定定位：参考视口位置。
    • position：fixed top/bottm/left/right：...px
    • 特点：脱离文档流；元素位置变化会对其他元素位置产生影响；定位元素的层级比普通层级高，可能会盖在普通元素之上；固定定位和浮动不能同时设置，浮动会失效；无论是什么元素，设置为绝对定位后，都变成了定位元素（默认宽高被内容所撑开，且能自由设置宽高）。
  • 4、粘性定位 ：离它最近的一个拥有“滚动机制”的祖先元素。
    • position：sticky top/bottm/left/right：...px
    • 特点：不脱离文档流，专门用于窗口滚动时的新的定位方式；最常用的值是top值；粘性定位和浮动可以同时设置，但不推荐。
  • 5、定位层级： z-index
    • 定位元素显示层级比普通元素高
    • 所有定位的显示层级最开始都是一样的，默认后来居上
    • 可以通过z-index调整元素的显示层级
  • 6、定位的特殊应用：
    • 定位元素宽高充满包含块：同时设置left，right，top，bottom=0可以让定位元素铺满包含块。
    • 定位元素在包含块中居中：同时设置left，right，top，bottom=0以及margin：auto。
  • 7、版心：在PC端网页中，一般有一个固定宽度且水平居中的盒子，来显示网页的主要内容。
    • 宽度：960-1200px之间
    • 版心可以一个，也可以是多个
  • 8、常见布局名词：
    • topbar：顶部导航条
    • header\page-header：页头
    • nav\navigator\navbar：导航
    • search\search-box：搜索框
    • banner：横幅、广告、宣传图
    • c ontent、main：主要内容
    • aside\sidebar：侧边栏
    • footer\page-footer：页脚
  • 9、重置默认样式：
    • reset.css：经过reset后的网页，好似一张白纸。开发人员可以根据设计稿，精细的去添加具体样式。
    • Normalize.css：在清楚默认样式的基础上，保留了一些有价值的默认样式