盒子模型常用属性

盒⼦的位置和⼤⼩

• 尺寸

  宽度 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 '楷体'