7、盒子模型.md

盒子模型

  • 什么是盒子模型?
    可以把页面上的每一个元素看成一个盒子,这是一个抽象的概念
    
  • 盒子模型的组成
      盒子模型由内容,内边距,边框和外边距组成
    
  • 盒子属性

      border:边框大小 线类型 颜色;( 复合属性)
      border-style:边框样式  (虚线dotted,实线solid)
      border-top-style:顶部边框类型
      border-right-style   右
      border-bottom-style  下
      border-left-style    左
      
      border-color:边框颜色;
      border-top-color:上边框颜色;.....
    
  • 盒子边距、大小

      padding  内边距,边框与内容之间的距离(margin外边距)
      一个值的时候: 代表四个方向值一样 上右下左(顺时针)
      二个值的时候: 上下  右左
      三个值的时候: 上 右左 下
      四个值的时候: 上  右  下 左
      
      注意: 行内元素-上下无效果,右左有效果
      
      margin:auto;	水平方向快速居中,垂直方向不存在
      margin垂直方向间距合并,水平方向正常
      盒子大小=样式宽+内边距+边框 
    

浮动

  • 什么是浮动?
    浮动,其实就是让元素脱离正常的文档流,漂浮起来。
    
  • ######为什么需要浮动?
    当正常文档布局不能解决的时候,则需要脱离正常文档流
  • 浮动带来的问题
      高度塌陷
    
        float:left          左浮动
        float:right         右浮动
        overflow:hidden;	解决坍塌问题

盒子定位

    position:
           static       默认定位。  静态定位,默认值不会发生任何变化
          relative      相对定位    相对定位,不会脱离文档流以自身元素为参考,可以给 top/right/bottom/left
          absolute      绝对定位  绝对定位,脱离文档流,默认以窗口为参考.有定位父级则父级参考可以给top/right/bottom/left
          fixed         固定定位  固定定位,脱离文档流默认以窗口为参考,可以给top/right/bottom/left窗口滚动,依然不会变.

   fixed    固定定位,相对于浏览器窗口进行定位
        方向词
            left
            right
            top
            bottom
        z-index 规定定位的层级(默认0)
        值:number 值越大层级越高

你可能感兴趣的:(HTML基础)