css框架

前端工程师面试题汇总 本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 HTML • Doctype作用？严格模式与混杂模式如何区分？它们有何意义? 1、声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。 2、严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。 如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。 1)、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式） 2)、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） 3)、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式） 4)、HTML5 没有 DTD，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法

原文: 用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是js写的没有任何框架而言，css同样也是如此，导致项目如果要升级或者说有新的变更维护起来就特别困难。 最近领导决定花大时间整理一下css样式，用他的一句话来说就是为后来者造福。 首先我们在整理样式之前，必须得有一个自己团队的规范。 思考真的很重要，所谓的磨刀不误砍柴工，事实上也就是说你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再动手，否则就可能做到一半发现这样不对，然后前面的工夫全白费了，这样启不是。。。 前面说了一堆费话，下面就简单点来介绍一下我整理的图标（全部用css来实现的）。 css没有继承、多态等，所以为了write less ,do more就不得不想尽各种方法（我们自己规定凡是公共的、组件级别的样式全部以u-开头）。 我这里因为写所有标签的样式名都是以u-icon开头，所以写了如下样式，这样的话所有的以u-icon开头的全部都应用了如下三个样式，你想如果你有100个u-icon的样式那就省去了你300行代码呀！ [class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; } 手机上的切换标签 css样式代码： /*手机上的切换标签*/ .u-icon

个人专栏 ES6 深入浅出已上线，深入ES6 ，通过案例学习掌握 ES6 中新特性一些使用技巧及原理，持续更新中，←点击可订阅。 点赞再看，养成习惯 本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 JavaScript 可以说是交互之王，它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集，更加丰富界面交互的可操作性。这类 API 的例子包括 WebGL API 、 Canvas API 、 DOM API ，还有一组不太为人所知的 CSS API 。 由于 JSX 和无数 JS框架 的出现，使通过 JS API 与 DOM 交互的想法真正流行起来，但是在 CSS 中使用类似技术似乎并没有很多。 当然，存在像 CSS-in-JS 这类解决方案，但是最流行的解决方案还是基于 转译 (transpilation)，无需额外运行即可生成 CSS。 这肯定对性能有好处，因为 CSS API 的使用可能导致额外的重绘，这与 DOM API 的使用一样。 但这不是咱们想要的。 如果哪天公司要求咱们，既要操纵 DOM 元素的样式和 CSS 类，还要像使用 HTML 一样使用 JS 创建完整的样式表，该怎么办？

开源项目 一款很轻量的无所不能的工具集合 公司内部搭建一个工具网兼博客平台，没有广告用着爽，同事还膜拜 几乎每个前端开发都会用的Chrome插件，功能太全了 100%原生的JavaScript多线程和并行执行库——Hamsters.js 这个库收集 Web开发的各种 JavaScript 小工具，超过 300 个模块 阿里跨终端的H5游戏开发解决方案——Hilo 程序员的个人知识管理神器 JavaScript开发者的27个神奇VSCode工具 教你10秒快速克隆网站，学习、私活，不用愁 终于集齐的VUE中的UI组件，不看后悔奥 前端猿应该知道的十大最流行的前端UI框架 Vue独立组件——11个最佳Vue.js日期选择器组件 尤娜-基于Spring Boot 2.0构建的极简博客系统现已经开源 nodejs + docker + github pages 定制自己的今日头条 在树莓派上搭建web服务器——基于Apache ddBuy 高仿移动端开源电商项目(Vue+VantUI) 推荐 11 个好用的 JS 动画库 一个标星近 10k 的现代化的个人独立博客系统，程序员值得拥有 阿里巴巴开源的超轻量的跨平台图形渲染引擎——GCanvas 基于Spring Boot 2.x的前后端分离开发平台X-Boot 前台 10个最佳Vue.js开源项目 我的第一个 60k+ Star开源项目

HTML学习笔记 第一天 1.HTML中不区分大小写 2.注释不能嵌套 3.标签必须结构完整 4.XML 更加严谨 5.浏览器尽最大努力正确加些页面，自动修正，但有些情况会错误修正 6.HTML标签可以嵌套，但是不能交叉嵌套 7.使用内联框架***iframe***可以引入一个外部的页面 使用iftrame来创建一个内联框架 现实开发中不推荐使用内联框架，内联框架中的内容不会被搜索引擎所检索 8.超链接：从一个页面跳转到另一个见面 用标签 来创建一个超链接 属性： href：指向链接跳转的目标地址， 相对路径or完整地址 a标签中的target属性可以用来指定打开链接的位置 _self：默认值 在当前窗口打开 _blank:在一个新的窗口中打开链接 可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开 用#代表空链接 默认为页面的顶部 HTML中有一个属性作为标签的唯一标识：id 9.center标签中的内容会默认在页面中居显示 10.发送电子邮件的超链接，自动打开计算机中默认的邮件客户端 联系我们 <!-- SRC属性: 相对路径： 返回路径：../ 返回上一级目录 --> <!-- 图片格式 JPEG：多颜色，可以压缩，但是不支持透明 一般用来保存照片 GIF： 支持的颜色较少，只支持简单透明，支持动态图 PNG：支持的颜色多，支持复杂透明 图片使用原则： --

当我们发布一个开源项目的时候，最重要的事情之一就是要创建项目文档。对使用项目的用户来说，文档是非常有必要的，通常我们可以使用下面这些方式来创建文档： GitHub Wiki ：在 Github 上我们可以为每个项目都创建一个 wiki。Wiki 是由一系列的 Markdown 文件组成，所以我们可以用 wiki 来做项目文档。但这种方案也有一些缺点：wiki 的贡献者不会出现在项目贡献者列表中；文档的结构和布局都是有限制的，只能是 Github Wikis 的样式；文档存储在第三方平台上。 README：我们可以为项目创建一个 README.md 文件，它会直接展示在 Github（或 Gitlab、Coding 等 git 仓库）的项目页面。如果文档非常少，这中方案是非常适合的。但如果文档非常多，这个 README.md 文件就会非常大了。而且通常来说，README.md 是用来介绍项目，而不是展示文档。 自建网站：当然，我们也可以创建一个文档网站，然后放在自己的服务器上。这样我们就可以随意编辑文档。但这种方案的缺点是不便于追踪文档的变化、开发网站和文档维护相比前两种方案麻烦非常多、而且还需要自建主机。 Github Pages ：Github 也提供了一个托管项目中静态文件的功能。我们可以为项目创建一个 gh-pages 分支，Github 就会将分支中的内容当做静态站点

方法一 body { margin-right: -15px; margin-bottom: -15px; } 原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象； 优点：在视觉上解决了这个问题，垂直滚动根据内容自适应； 缺点：由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域。 注意： DIV默认是没有滚动条的，如果加了滚动条样式，去掉后滚动条自然就会消失。如果是框架iframe出现的滚动条，如果要想X横向隐藏滚动条，只需要设置overflow-x:visible或overflow-x:hidden；如果想iframe出现Y纵向滚动条隐藏可以设置CSS样式overflow-y:visible或overflow-y:hidden即可隐藏滚动条。 方法2 那就是自定义滚动条的伪对象选择器::-webkit-scrollbar chrome 和Safari .element::-webkit-scrollbar { width: 0 !important } IE 10+ .element { -ms-overflow-style: none; } Firefox .element { overflow: -moz-scrollbars-none; } http://caibaojian

CSS Reset 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化) normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。 你值得拥有。。 ​ - 保护有用的浏览器默认样式而不是完全去掉它们 ​ - 一般化的样式：为大部分HTML元素提供 ​ - 修复浏览器自身的bug并保证各浏览器的一致性 ​ - 优化CSS可用性：用一些小技巧 ​ - 解释代码：用注释和详细的文档来 地址： http://necolas.github.io/normalize.css/ npm install normalize.css 来源： CSDN 作者： 快乐de馒头 链接： https://blog.csdn.net/chunxiaqiudong5/article/details/104048976

前端是什么？ 在回答这个问题之前，我想到了一道面试题： 当我们在浏览器中输入网址并按回车之后，接下来会发生什么？ 我们来简单地看一看 “网页展现” 的整个过程。 比如这里有一个用户，它需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。 有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。 当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。 一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css ，它就会去请求这个资源。 HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js ，此时浏览器同样会向服务器请求这个资源。 当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。 我们看一看这张流程图，可以在中间画一道竖线，把它分成左右两个部分。 我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”；右侧的事情发生在服务器端，称为 “后端”。（“前端” 之所以叫 “前端”

为了消除各浏览器对css默认的设置，保持网页在各浏览器中的外观保持一致，初始化css就显得非常必要了！很多时候出现的样式不兼容问题，都可以通过css初始化代码来解决。 1.最耗资源的，最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例（综合） body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button form,fieldset,input,textarea,p,blockquote,th,td { 　　padding: 0; 　　margin: 0; } /* 酌情修改 */ body { background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow"; } /* 短引用的内容可取值：''或"" */ q:before,q:after {content:”;} /* 缩写，图片等无边框 */ fieldset,img,abbr,acronym {border: 0 none;} abbr,acronym {font-variant: normal;} legend {color:#000;} /*