CSS响应式布局

CSS布局：

  1.响应式布局：可以根据页面窗口的宽度变化而发生布局变化。针对不同的设备会有不同的布局

  2.Div基础

    （1）Div：本质只是一个HTML标签。但它是CSS布局的核心标签

    （2）特性

                   ①没有常规的Height，width试属性

                   ②可以用CSS设置样式

                   ③里面的内容默认在左上角

                   ④一个div独占一行

                   ⑤Div默认宽度是100%，100%是针对父HTML标签，如果父标签是Body的话，宽度就是页面的宽度

  3.浮动

  （1）定义：指的是一个CSS属性：float的使用

  （2）作用：能肉让设置了float属性的HTML标签显示在同一行，并且会随父标签的宽度变化而发生布局变化

  4.CSS盒模型

   （1）定义：CSS会把页面上的每一个HTML标签当成一个“"盒子‘看待，CSS会利用5个CSS属性来确定盒子的尺寸以及盒子与盒子之间的距离

   （2）5个CSS属性

             ①width

             ②height

             ③border

             ④padding

                 1）定义：处理盒子内容跟border之间的距离

                 2）注意：

                         a.padding可以队上下左右单独设置 padding-left、padding-right、padding-top、padding-bottom

                         b.padding是额外算的，所以盒子的总宽度高要加上padding

                         c.padding组合属性：

                              a) padding：上 右 下 左;如:paading 20px 30px 30px 20px 

                              b)padding统一设置；如:padding:40px

                              c)padding：上下 左右；如：padding 20px 30px

             ⑤margin

   （3）盒子总宽度 width+border+padding

                 1）定义：处理盒子与盒子之间的距离

                 2）注意：

                         a.margin可以单独给每条边设置 margin-left、margin-right、margin-top、margin-bottom