### 盒子模型概念 - 块级元素 独占一行，宽高可以设置 （div） display:inline 将块级元素转化为内联元素 - 行内元素/内联元素 和其他元素在一行 宽高不可设置 宽高有内容决定 （span a ul em） - 行内块级元素 和其他元素在一行且宽高可以设置 （img input） ### **盒子边框 border** - 语法 ``` border:width || style || color; border:50px solid red;//盒子边框50px 实线 红色 ``` ### **盒子内边距 padding** - 语法 ``` padding:10px; //距离边框 上右下左距离 为10px 同 padding:10px 10px 10px 10px; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px; ``` ### **盒子外边距 margin** - 语法 同padding 关键字 margin ``` margin:10px; //距离边框 上右下左距离 为10px 同 padding:10px 10px 10px 10px; ```  ### **盒子类型 box-sizing**  ### 定位 position * absolute 绝对定位 ；脱离文档流布局，遗留下来的空间由后面的元素填充，定位的起始位置是 父元素 （且父元素 position 不为static）否则为body的文档本身 * relative 相对定位 ； 不脱离文档流，在文档流原先的位置遗留空白区域 。定位起始位置为自身位置。 * fixed 固定定位 ； 类似于absolute 不随着滚动位置而改变。 * sticky 类似 relative 和 fixed的结合体