CSS知识点4

一.分栏

1.column-width 栏宽 列宽

2.column-count 栏数 列数

3.columns:栏宽 栏数

4.column-gap 列间距 栏间距

5.column-rule 宽度、样式、颜色

6.columns  缩写

二.布局

1.什么是响应式布局

响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

2.什么是自适应式布局：

自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

3.：响应式布局与自适应布局的区别是什么

1.自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

2.自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。

3.自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

4.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

总之，响应式布局还是要比自适应布局要好一点，但是自适应布局更加贴切实际，因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点，我们要根据项目的需求来选择适合的布局方式。

三.媒体查询

        Media Query媒体查询(也称为媒介查询)用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。

语法格式如下：@media 媒体类型 逻辑运算符 （媒体特征）{css样式}

媒体类型有四种，all代表所有的媒体设备；print 用于打印机；screen 用于电脑屏幕、平板、手机等（这也是我们通常选择的媒体类型）；speech 用于屏幕阅读器。

逻辑运算符：这个我们应该不陌生。分为三种：and、or、not。

媒体特征:书写格式与css样式类似，都是属性名：属性值（例如min-width：200px）。

示例：

 四.单位

1.px 页面中的px是Pixel的缩写，也就是像素，在表示图片或者图形的最小单位，将像素进行组合，可以在计算机中，显示完整的图像和视频。

2.em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

3.rem 全部的长度都是相对于根元素（html）的。通常给根元素(html) 设置一个font-size，然后其他元素的长度单位是 rem。