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