盒子模型常用属性

• 盒⼦的位置和⼤⼩

  • 尺寸

    宽度 width: ⻓度|百分⽐|auto
    ⾼度 height
    边界 margin padding 上右下左|上下左右
    

  • padding与margin

    padding:10px 10px 10px 10px //上左下右
    padding:5px 10px 		//上下边距5px、左右边距10px
    padding:5px 10px 20px  //上边距 左右边距 下边距
    padding:10px				//上下左右边距10px
    
    margin:10px 10px 10px 10%  //上左下右
    margin:5px 10px 	//上下边距5px、左右边距10px
    margin:10px				//上下左右边距10px
    

  • border

    border-left:3px solid #000  //左边距10px dotted dashed
    border-top:3px solid #000	//上边距10px
    border-right:3px solid #000	//右边距10px
    border-bottom:3px solid #000	//下边距10%，相对于父级元素的width
    
    border:3px solid #000 //等同于上面四行
    
    

  • 布局

    浮动：float
    定位：position
    弹性布局：flex
    盒⼦内容超出部分：overflow：hidden | scroll | auto
    

• 外观，⻛格

  background-color
  background-image
  background-repeat
  background-size
  background-position
  简写
  background:red url('') no-repeat bottom
  

  • ⽂字属性

    字体⼤⼩ font-size    //最小12px
    是否加粗 font-weight  //600 加粗  400正常
    是不是斜体 font-style //normal（正常）、italic（斜体）或oblique（倾斜）;
    字体是什么 font-family
    
    简写
    font:italic 600 16px '楷体'