HTML+CSS初学日常知识点-十

一.分栏

• column-count：数值（列数）
  随浏览器大小，列数保持固定数值，宽度自适应
• column-width: 数值+单位 （列宽）
  随浏览器大小，宽度保持固定数值，列数自适应
• columns ：列宽 列数
  （浏览器大小 >= 列宽 * 列数） 按列数算，随浏览器大小，列数保持固定数值，宽度自适应
  （浏览器大小 < 列宽 * 列数 ） 按宽度算，随浏览器大小，宽度保持固定数值，列数自适应
• column-gap：数值+单位（列间距）（gap：沟）
• column-rule: 样式
  1px solid red
• 缩写时先写宽度，再写列数，宽度和列数之间用空格隔开

二.媒体查询

（最大值）@media screen and (max-width:500px){
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        }
（最小值）@media screen and (min-width:200px) {
            .box{
                width: 150px;
                height: 150px;
                background-color: pink;
            }
        }

（最大值max-width),要从大往小写；

（最小值min-width)则要从小往大写。

四、 meta元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
height：和 width 相对应，指定高度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放，值为"yes"或"no"
 

六、盒子模型

怪异盒子模型

盒子的大小就是设定的大小

box-sizing: border-box;

七.布局

响应式布局：

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

自适应布局：

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

区别：

1、自适应布局：是通过检测视口分辨率来判断当前访问的设备屏幕大小，从而请求服务层返回不同的页面。
响应式布局：是通过检测视口分辨率针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了
3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素，而响应式布局是一套页面全部适应。
4、自适应布局如果屏幕太小会发生内容过于拥挤，响应式布局可以自动识别屏幕宽度并作出相应的调整页面设计
 

八.em和rem的区别

em  受当前字号大小的影响

rem 受根html标签里字号大小的影响