8.28
1.布局模式
1.1.媒体查询-响应式布局
简单来说响应式布局就是内容随着浏览器窗口的大小变化而呈现出不同的布局
写法如下
@media screen and (max-width: 960px){
body{
background: #000;
}
}释义
当页面小于960px的时候执行它下面的CSS.。
注意事项：
注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768和后面覆盖前面的情况，那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
1.2.流式布局（百分比布局）
流式布局，就是百分比布局，也称非固定像素布局，是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度。
简单来说就是在横向的布局中尽量不用固定单位写死，使用百分比等其他方式来时使页面达到自适应的效果。
1.3.圣杯布局（左右固定中间自适应）
在页面布局中让两端内进行固定，而中间的内容随着浏览器窗口横向的变化而变化，一般有三种实现方式分别是：
1.使用弹性盒子进行实现
2.使用浮动进行实现
3.使用定位进行实现
注意：
使用浮动进行布局时要注意html的书写顺序、去浮动等的操作
