盒模型、常用单位及媒体查询

盒模型与计算方式

• 基本所有的站点都是用盒子组合而成，主要属性常见为
  |width|height|border|padding|marging|
  |—-|—-|—-|—-|—-|
  |宽度|高度|边框|内边距|外边距|
  | box-sizing: content-box默认内容区大小| box-sizing: border-box;包装盒子占据的空间不变|可设置宽度及样式|透明|透明|

  .box {
        width: 500px;
        height: 400px;
       border: 5px solid; 
        background-color: blue；
  padding:10px；
      }
  /* 注意 BOX相对BODY的STYLE来说 是一个【“文本”】 例如body style="color: burlywood" 就是会“覆盖”到BOX的颜色，除非BOX有单独设置。*/

• box 关键属性的几个设置点
  padding 【 四值: 上, 右,下, 左 】注意就是顺时针方向（12点开始顺时针）
  如果 【三值 上 左右 下】如两值 【上下 ，左右】因此，关键记忆点，就是第二个产生都是标识左右。 单值为 上下左右都一样。
• box-sizing的2个很关键的属性：

  box-sizing:content-box；
  /*代表 默认的 盒子大小就是等于内容大小*/
  .box{
  width:200px;
  height:200px;
  padding:10px;
  margin:10px;
  box-sizing:content-box;
  }
  /*代表 这个BOX可以输入的文本框就是200*200 跟其他padding margin等 边距无关 */
  box-sizing:border-box；
  /*代表 这个BOX可以输入的文本框就是200*200===>(200-10-10)*(200-10-10) 跟其他padding margin等 边距有关 */

  常用单位

• px 绝对单位 1英寸=96px
  先对单位：em rem（根元素:root中） 跟字号大小有关系 font-size相互绑定
  vh vw 跟可视窗口大小有关系，视窗看成100份（当前页面）

  媒体查询

  ```css
  / 移动优先，则小屏幕开始写起 /
  @media (min-width: 480px) {
  html {
  font-size: 12px;

                      }

  @media (min-width: 640px) {
  html {
  font-size: 14px;

                      }                          
                      @media (min-width: 720px) {

  html {
  font-size: 16px;

                      }

/ PC优先，则大屏幕开始写起 /
@media (max-width: 720px) {
html {
font-size: 16px;
}
/ 得注意 最大的值要配合 min-with组合 / @media (min-width: 720px) {
html {
font-size: 16px;
}

                      ```