2020.4.9浮动布局,定位布局

发布于 2020-04-09  8 次阅读


1.复习内容

  • 水平换行会产生空隙

  • 设置font-size:0
  • 文字水平垂直对齐方式

    • 一行文本在当前一行中永远是垂直居中的
    • text-align:center文本center水平居中
    • line-height:60px;行高和高度保持一致,展现的就是文本垂直居中,100%计算的是和当前文字大小一致
  • 表格间的元素(盒模型不完整)都要靠表格自身调节
    • 单元格与单元格之间,用table属性才能添加连续的表格
    • tr可以调内边距,th不可以调内边距

2.灵感代办

  • 需要总结一下昨天和今天的知识点
  • overflow属性研究一下
  • 打代码的时间要手动设置,不然无法统计

3.学习内容

  • 布局方式

    • 静态流,文档流布局,流式布局

      • 根据标签和书写顺序,从上到下,从左至右依次显示。
    • 浮动布局(脱流)

      • 主要问题:
        • 浮动元素不占位,后面元素会向前移动(解决:clear可以清除兄弟元素的浮动)
        • 子元素全部浮动,父元素高度为0,影响父元素背景边框等,还会影响整体布局
      • 解决块元素水平排列问题,把元素顺序排列变为层次排列,浮起来
      • 从原始位置开始浮动(水平浮动,垂直不动),则下一个元素占据浮动元素的原有位置(文字等不被遮挡,块元素则被遮挡)
      • 按照浮动方向依次排列,如果不够,下移到可以停靠的地方
      • 浮动元素并不遮挡内容,类似文字环绕效果,间距要加在浮动元素上(文字,input等)
      • 设置位float之后就可以设宽高
      • 块元素和浮动,行内和浮动,都有效果
      • 要给块元素都添加float属性才可以并列
      • 属性:float,值left/right
    • 定位布局 position

      • 用于实现元素显示位置的调整
      • 属性position:
        • 取值:relative相对定位(想对自己定位)/absolute绝对定位/fiexed固定定位
        • 使用:元素设置position属性之后就叫已定位元素,已定位元素可以使用偏移属性来调整显示位置
        • 偏移属性:left ,top ,bottom ,right(根据参照物进行上下左右的偏移)
        • 分类:
          • 1.相对定位(relative):设置相对定位的元素会参照元素自身在文档中的原始位置偏移
            • 不会脱流(保留自身位置大小)
          • 2.绝对定位(absolute):绝对定位的元素会按照距离最近的,已经定位的祖先元素进行定位,如果没有,则按照0.0,进行定位,
            • 脱流(不占位,可以手动调整宽高)
            • 使用:父元素设置相对定位,子元素设置绝对定位。
          • 固定定位(fixed):设置固定定位的会参照浏览器的窗口进行偏移,不会跟随页面滚动而滚动
            • 脱流(不占位,可以调尺寸)
            • 常见于广告,聊天,博客的目录
      • 堆叠次序调整
        • 已定位的元素与文档中正常元元素相比,已定位元素在上(resolution)
        • 都设置了定位,就是HTML结构上,后来居上(先渲染的在底下,后渲染的在上面)
        • z-index 属性,数值大,靠前
  • 背景属性

    • 1.设置背景颜色
      • background-color
    • 2.背景图片相关
      • background-image:url(“路径”); 设置背景图像
      • background-repeat:用来设置背景图片的重复方式(默认是:图片过大裁剪,图片太小重复)
        • 取值:repeat 默认值,repeatX,repeatY,no-repeat不重复(常用)
      • background-position:x,y;设置背景图像的显示位置
        • x,y取值方式:
          • 1.像素值,(用元素坐标系)
          • 2.取方位值:
            • left/center/right
            • top/center/bottom
            • 默认值:center
          • 3.百分比取值:方位值的加强版
            • x%,y%计算背景图片的起始坐标
            • (元素尺寸-图片尺寸)*x%
            • 特殊值:
            • 0% 0% -> left top
            • 50% 50% -> center
            • 100% 100% -> right bottom
      • background-size:width height;设置背景图片的尺寸,取像素值,百分比,或者关键字
        • 像素值是直接指定宽高,只给一个值表示的是宽,高度是等比例缩放
        • 百分比是根据元素尺寸(父元素)计算背景图尺寸大小
        • cover覆盖:等比拉伸足够大,覆盖元素,超出部分不可见
        • contain包含: 等比拉伸,到父元素限制大小
      • background:color url() repeat position简写属性,背景图片尺寸要单独设置,background-size
  • 伪元素:(before,after)

    • 伪元素伴随每个元素
    • before 和 after 必备content属性
    • 伪元素是行内元素,行内元素要display才可以修改宽高
    • 可以当正常元素来使用
    • 适合用来设置clear:both
    • clear清除要生效的话,必须是块级元素
  • position:absolute;float:left/right

    • 设置了这些元素,这个元素自动变成行级块元素(inline-block)
  • 浮动流

    • 浮动流使用完了,要拿伪元素after消除一下

4.扩展延伸知识

  • 经典的两个BUG
    • margin塌陷,子和父的margin取最大的(改动子,父也被改动) bfc 改变父元素
    • margin垂直合并也可以用bfc解决,但一般都不用解决
    • 区域不能共用(两个span之间)
  • 盒子的bfc(弥补margin塌陷)
  • 开发中的一些事:
    • 一像素也不能差,产品经理像素眼
    • HTML是骨架,不能随意更改
    • 自适应太灵活,容易让布局变形,所以图片等元素要严谨一点
  • HTML三大模型
    • 盒模型,层模型,浮动模型
  • 解决浮动流的根本
    • 方法1:手动添加高度
    • 方法2:添加overflow:hidden;属性(适用于内容不确定,需要动态加载的元素)
    • 末尾加一个块元素,比如div,设置clear:both;
  • content内容不被浮动float影响
  • margin带动父元素下移解决:
  • span之间间距的解决办法

5.知识内容个人梳理

6.今天都复习了之前的什么内容


Ares个人进阶之路