摘要：
一、概念 ①em大小是基于父元素的字体大小 ②rem是相对单位，r是root的意思，在html页面上就是html标签，所以rem的大小是基于html元素的字体大小 二、rem适配 ①使用flex的伸缩布局、使用百分比的流式布局、使用媒体查询的响应式布局，共同点就是元素只能做宽度的适配（图片除外) ② 阅读全文
摘要：
一、思路 ①less无法在浏览器中直接使用，浏览器不能识别 ②通过less解析插件less.js（JavaScript插件）可以把less文件解析成css代码（下载地址） 二、具体应用 ①less.js 插件的原理是使用Ajax，所以需要以HTTP协议打开文件，而不是使用文件协议 file://（这 阅读全文
摘要：
一、注释 ①工具：利用VS code的插件easyless，实时预览 ②行注释不会编译，块注释可以编译 ③最好在文件的开头加上@charset 'UTF-8'; 防止出现编码问题 二、变量 ①LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单 ②定义变量必须使用@ 阅读全文
摘要：
一、less环境安装 ①首先需要在电脑上安装nodejs，一般会内置npm，利用以下命令可以检测： ②利用npm在线安装less，运行 npm install –g less ③查看是否安装成功，Lessc –v 查看版本 二、less简介 ①CSS（层叠样式表）是一门历史悠久的标记性语言，同 HT 阅读全文
摘要：
一、轮播图组件模板（官方文档） 二、分析轮播图组件结构 ①carousel 轮播图的模块， slide是否加上滑动效果，data-ride="carousel" 初始化轮播图属性 ②data-target="#carousel-example-generic" 控制目标轮播图，data-slide- 阅读全文
摘要：
一、导航条模板（官方文档） 二、分析导航条模板结构 ①navbar导航模块 ，类navbar-default 表示默认样式(灰白)，还可以是navbar-inverse（反色，黑白），两种主题 ②container-fluid 表示的是导航的内容容器是流式布局，如果设置成container就是响应式 阅读全文
摘要：
一、概念： ①Bootstrap包括了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动扩展到最多12列 ②栅格系统其实就是行和列的布局，网格状布局，通过一系列的行（row）与列（column）创建页面布局，你的内容就可以放入创建好的布局中。 二、行 阅读全文
摘要：
一、概述 ①当下最流行的前端UI框架（有预制界面组件），组件简洁大方，代码规范精简，界面自定义性强，可以有效提高web开发效率 ②有自己的生态圈，不断的更新迭代。提供了一套简洁、直观、强悍的组件。标准化的html+css编码规范。让开发更简单，提高了开发的效率。 ③虽然界面组件样式已经定义好了，但是 阅读全文
摘要：
一、响应式开发 ①在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。 ②通常的做法是针对移动端单独做一套特定的版本，但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及） ③这时候就出现了响应式开发，简而言之，就是一个网站能够兼容多个终端 ④现在的移 阅读全文
摘要：
一、文字环绕效果：使用浮动 二、两栏自适应 ①上面的例子里，如果把文字放进另外一个div盒子里，效果不变 ②然后对右边的div盒子加上overflow：hidden属性，出现了变化（触发了bfc） ③把右边盒子的文字去掉，加上一些样式 ④这样就可以做出移动端的一个两栏自适应的布局：左栏固定不变，右栏 阅读全文