CSS盒子模型、RestCSS、浮动、定位

盒子模型

CSS盒子模型、RestCSS、浮动、定位

  • 边框:border
    • 左边框:border-left
    • 右边框:border-right
    • 上边框:border-top
    • 下边框:border-bottom
    • 复合样式:border
    • 边框颜色:border-color
    • 边框宽度:border-width
    • 边框样式:border-style
      • 实线:solid 虚线:dashed 点线:dotted 双线:double
  • 内边距:padding
    • 上内边距:padding-top
    • 下内边距:padding-bottom
    • 左内边距:padding-left
    • 右内边距:padding-right
    • 复合样式:padding
  • 外边距:margin
    • 上外边距:margin-top
    • 下外边距:margin-bottom
    • 左外边距:margin-left
    • 右外边距:margin-right
    • 复合样式:margin
  • 内外边距
    • A:margin调整内部div外边距
    • B:padding调整外部div内边距,它调整的是自身大小,所以如果不希望破坏外观,则尽量使用margin布局
      (padding有可能撑大外盒子,但如果是margin过大,则盒子内容会被挤出,但不会改变盒子本身大小);
    • C:border内部div和外部div定位时需要找到边界,外部div如没有设置border,则内部div的margin设置时会一直往上找,直到找到边界位置。
    • D:内部相邻div间的margin,取值为两个div各自设置margin的最大值,而不是相加值。

RestCSS

  • 为什么需要Reset CSS
    • 浏览器在解析某些标签的时候,本身就自带了一些样式,导致我们写样式的时候就会效果不一致
  • 通用的ResetCSS https://meyerweb.com/eric/tools/css/reset/
  • “*”表示通配符
*{
    margin: 0;
    padding: 0;
}

浮动

  • float: left / right
  • 解决高度塌陷
/*父元素设置*/
.clear{
        border:blue 2px solid;
        overflow: hidden;
    }

/*使用伪元素*/
.clearfix::after{
    display: block;
    clear: both;
    content: "";
}

定位

  • position
    • 默认值:static
      • 静态定位,默认值,不会发生任何变化
    • 相对定位:relative
      • 相对定位,不会脱离文档流,以自身元素为参考
      • 可以给 top、right、bottom、left
    • 绝对定位:absolute
      • 绝对定位,脱离文档流
      • 默认以整个文档为参考,有定位父级,则父级参考
      • 可以给top、right、bottom、left
    • 固定定位:fixed
      • 固定定位,脱离文档流
      • 默认以窗口为参考,窗口滚动,依然不会变
      • 可以给top、right、bottom、left
  • z-index
    • 定位涉及到 z-index 属性
    • 可以简单理解为谁在上面,谁在下面
    • z-index : 数字

相关推荐