一、响应式布局1.媒体查询media1.1媒体类型media all检测所有设备media screen检测电子屏幕media print检测打印机剩余大多已废弃完整列表参考https://developer.mozilla.org/zh-CN/docs/Wed/CSS/media1.2媒体特性media(width):检测视口宽度media(max-width)检测视口最大宽度media(min-width)检测视口最小宽度media(height)检测视口高度media(max-height):检测视口最大高度media(min-height)检测视口最小高度media(device-width)检测设备屏幕的宽度media(max-device-width)检测屏幕最大宽度media(min-device-width)检测屏幕最小宽度media(orientation)检测视口的旋转方向(是否横屏)portrait视口处于纵向高度大于等于宽度landscape视口处于横向宽度大于高度、注完整列表参考上面的链接1.3运算符and并且.或or或not否定only肯定1.4常用阈值超小屏幕≤768px768px≤中等屏幕≤992px992px≤大屏幕≤1200px1200px≤超大屏幕1.5结合外部样式的用法用法一link relstylesheet media具体的媒体查询 hrefmystylesheet.css用法二media screen and (max-width:768px) {/* CSS-Code; */}media screen and (max-width:768px) and (max-width:1200px) {/* CSS-Code; */}二、BFC1.什么是BFC定义1浮动、绝对定位元素、不是块盒子的块容器以及overflow属性值除visible以外的块盒将为其内容建立新的块格式化上下文。定义2块格式化上下文是Web页面1的可视CSS渲染的一部分是块盒子的布局过程发生的区域也是浮动元素与其他元素交互的区域。简单描述BFC可以理解成一个元素的特异功能在默认情况下关闭元素满足某些条件后被激活。2.BFC作用(1)开启了BFC的元素的子元素不再产生margin塌陷问题(2))开启了BFC的元素不会被其他浮动元素覆盖(3))开启了BFC的元素就是子元素浮动元素自身高度也不会塌陷3.如何开启BFC根元素浮动元素绝对定位、固定定位的元素表格单元格table、thead、tbody、tfoot、th、td、tr、captionoverflow值不是visible的元素伸缩容器多列容器column-span为all的元素(即使该元素没有包裹在多列容器里)display的值是flow-root