欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-23 23:00:55
盒子模型 边框:border 左边框:border left 右边框:border right 上边框:border top 下边框:border bottom 复合样式:border 边框颜色:border color 边框宽度:border width 边框样式:border style 实线: ......

盒子模型

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 : 数字