企业官网建设流程全解析

一、响应式布局

1.媒体查询@media

1.1媒体类型

@media all：检测所有设备

@media screen：检测电子屏幕

@media print：检测打印机

剩余大多已废弃，完整列表参考：https://developer.mozilla.org/zh-CN/docs/Wed/CSS/@media

1.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常用阈值
超小屏幕：≤768px

768px≤中等屏幕≤992px

992px≤大屏幕≤1200px

1200px≤超大屏幕

1.5结合外部样式的用法

用法一：

<link rel="stylesheet'' media=''具体的媒体查询'' href=''mystylesheet.css''>

用法二：

@media screen and (max-width:768px) {
/* CSS-Code; */

}

@media screen and (max-width:768px) and (max-width:1200px) {
/* CSS-Code; */

}

二、BFC

1.什么是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、caption
overflow值不是visible的元素
伸缩容器
多列容器
column-span为all的元素(即使该元素没有包裹在多列容器里)
display的值是flow-root