多列布局

1、column-count说明:
属性规定元素应该被分隔的列数
适用于:除table外的非替换块级元素, table cells, inline-block元素
2、column-gap
说明:
属性规定列之间的间隔大小

3、column-rule

说明:
设置或检索对象的列与列之间的边框。复合属性。

column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间规则的样式。

column-rule-width规定列之间规则的宽度。

4、column-fill
说明:
设置或检索对象所有列的高度是否统一auto:列高度自适应内容
balance:所有列的高度以其中最高的一列统一

5、column-span
说明:
设置或检索对象元素是否横跨所有列。

none:不跨列
all:横跨所有列
 

6、column-width
说明:
设置或检索对象每列的宽度
7、columns
说明:
设置或检索对象的列数和每列的宽度。

复合属性<' column-width '>ll <' column-count '>

注释:
Internet Explorer 10和 Opera支持多列属性。

Firefox需要前缀-moz-。
Chrome和 Safari需要前缀-webkit-。
 

媒体查询

媒体查询的概念:媒体查询只是一个工具(不是特定的属性或者属性值)

媒体查询的作用:通过检测不同的设备特性从而设置不同的css样式

媒体查询的写法:@media 设备的特性 修饰符号 (条件表达式){ css语法 }

- @media 声明媒体查询的关键字

- 设备的特性 电脑、手机、pad的屏幕

- 修饰符号 常用的是and(连接符号)

- (条件表达式) min-width/max-width

- {css语法}

注意

- 媒体查询的写法比较特殊 每个英文单词之间都需要加空格符号(不加会不解析代码)

- 媒体查询会检测特性设置css样式 建议把媒体查询代码写在css样式表的最下面

- 多个条件的时候 在第一个条件后面使用and继续书写即可

- 由于市面上的电脑厂商过多 电脑会有误差

响应式布局概念

设计特点:
面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混滑的情况