css框架 | 易学教程

使用 JS 来动态操作 css ，你知道几种方法？

阅读更多关于使用 JS 来动态操作 css ，你知道几种方法？

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 的使用一样。但这不是咱们想要的。如果哪天公司要求咱们， seo博客既要操纵 DOM 元素的样式和 CSS 类，还要像使用 HTML 一样使用 JS 创建完整的样式表，该怎么办？内联样式在咱们深入一些复杂的知识之前，先回来顾一下一些基础知识。例如，咱们可以通过修改它的 .style 属性来编辑给定的 HTMLElement 的内联样式。 const el = document.createElement('div') el.style.backgroundColor = 'red' // 或者 el.style.cssText = ' color: rgb(153,

20道HTML基础面试题（附答案）

阅读更多关于 20道HTML基础面试题（附答案）

以下是我整理的一些HTML的基础面试体，并自己整理了答案。 1 DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。 2 HTML5为什么只需要写 <!DOCTYPE HTML>？ HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。 HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型，如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3 行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素： a span img input select 块级元素： div ul ol li dl dt dd h1 p 空元素： <br> <hr> <link> <meta>

HTML与CSS学习笔记(7)

阅读更多关于 HTML与CSS学习笔记(7)

1、响应式布局利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。常见选项：媒体类型 and、not min-width、max-width: 例如 @media all and (min-width:500px) and (max-width: 700px){ .box{background: blue;} } 当分辨率大于最小宽度并小于最大宽度时，执行{}内的样式(注意and两边要空格隔开) 在all前面加not表示取反;多个响应时要注意操作顺序： @media all and (min-width:500px) { .box{background: blue;} } @media all and (min-width: 700px){ .box{background: yellow;} } 这样写width=500~700时显示蓝色，大于700时显示黄色，顺序反过来则只显示蓝色 orientation：portrait、orientation：landscape: 针对横竖屏的响应式触发，先写条件，选择器和样式写在{}内，注意and两边一定要用空格隔开： @media all and (orientation: portrait){ .box{ background: blue;} } @media all and

学习前端阶段性总结

阅读更多关于学习前端阶段性总结

明儿就进入3月份了，时间过的真快。从去年10月份开始决定做前端，转眼间也快4个月了，道路并不平坦。我是本着本科的时候做过几个页面，心里觉着前端好像很简单的样子，还觉着自己有些审美，能把页面做的很漂亮。其实，页面漂亮不漂亮设计师会给设计稿，前端就负责切图，布局，写代码就好嘛。决定做前端也并不突然，从大三开始，就觉着自己还挺喜欢做网页的，当时班里没几个学这个的，我还乐在其中的编了几个网页。当时选修课的老师是教ASP的，他有个公司，专门帮别人做网站，看我上课认真，还把我收进公司。我的一些写页面的知识还是那时候开始的，也很感谢老师。其实女孩儿编代码是有点太累了，加上本来就容易长痘的体质。我一直觉着程序员都是沉默寡言的，开始觉着好像我也不太适合，毕竟经常是喋喋不休的。可是开始学习前端以后，我发现我真的变得文静了许多许多。开始有耐心了，开始愿意自己去解决问题了。好事。知乎是个挺好的老师，15年9月份的最后一个星期，我疯狂的刷知乎，去看各种和前端有关的帖子，借鉴别人是怎么学习前端的。后来，就买了几本书，并在奇妙清单里列了我的前端学习计划： 1、入门HTML5和CSS《HeadFirst HTML&CSS》 2、熟练掌握CSS《精通CSS，高级Web》 3、入门JavaScript《JavaScript DOM编程艺术》 4、进一步学习JavaScript《JavaScript高级程序设计》

web前端学习心得

阅读更多关于 web前端学习心得

所谓行万里路，必先始于足下。刚开始学习WEB前端基础的时候，老师说，其实你们学的这个后面真正去工作的时候可能也不是很会用到，所以就有很多人会问，既然我们都用不到，那干嘛还学呀？其实，对于一个程序员来说，你不仅要有很好的后端专业能力，你还应当具备一定的前端素养，知道一些起码的前端知识。来到传智的第一个月，我们是以基础为主吧，因为大家到这里的基础都不一样，有一些本身就具备很高水准的人，也有很多像自己一样从小白开始的人，所以，对我们而言，传智开设的这种双元模式对我们是有很大用处的。我们从最基础的开始学习，在学习HTML的时候，我们还延续着很古老和古老的表格制作网站，然后到后面的CSS学习，用CSS样式去进一步完善我们制作的网址，再到着一期的难点JS课程体系，一级最后的JQ和BOOtstrap，可以说这个过程其实也是一个循序肩颈的过程，有简到难的过程。首先我们回顾一下最开始我们对HTML的学习。其实HTML的四天学习的话，重要的就是一个标记的学习，这大概是学习一门语言最基础的一部分吧。但是也不是说背一背就解决问题的，选择IT，程序员这一方面，只要多练习，多敲代码感觉就好了，所以熟练的使用这些标记其实不是很大的问题，对自己来说，比较难的是一个表格和框架，也许会有人说，表格有什么难的，就行列的问题啊，但是不知道为什么，在学习的那几天对于表格的学习和接受能力都没有别的那么好

阿里巴巴面试题

阅读更多关于阿里巴巴面试题

前端面试题目 1. div和span的区别？ div是块级标签，span是行级标签 2. 在html中，position取值有哪几种，默认值是什么？取值：static、relative、fixed、absolute 默认值：static 3. 前端页面由哪三层构成，分别是什么？作用是什么？前端页面构成：结构层、表示层、行为层结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。” 表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。 4. 如何居中一个浮动元素？方式1:设置容器的浮动方式为相对定位，然后确定容器的宽高比如宽500 高 300 的层，然后设置层的外边距。 <!DOCTYPEHTML> <html> <head> <styletype="text/css"> div{ width: 500px; height: 300px; margin:

在浏览器输入URL回车之后发生了什么？（超详细版）

阅读更多关于在浏览器输入URL回车之后发生了什么？（超详细版）

前言　　这个问题已经是老生常谈了，更是经常被作为面试的压轴题出现，网上也有很多文章，但最近闲的无聊，然后就自己做了一篇笔记，感觉比之前理解更透彻了。　　这篇笔记是我这两天看了数十篇文章总结出来的，所以相对全面一点，但由于我是做前端的，所以会比较重点分析浏览器渲染页面那一部分，至于其他部分我会罗列出关键词，感兴趣的可以自行查阅，注意：本文的步骤是建立在，请求的是一个简单的 HTTP 请求，没有 HTTPS、HTTP2、最简单的 DNS、没有代理、并且服务器没有任何问题的基础上，尽管这是不切实际的。大致流程 URL 解析 DNS 查询 TCP 连接处理请求接受响应渲染页面一、URL 解析　　地址解析：　　　　首先判断你输入的是一个合法的 URL 还是一个待搜索的关键词，并且根据你输入的内容进行自动完成、字符编码等操作。　　HSTS 　　　　由于安全隐患，会使用 HSTS 强制客户端使用 HTTPS 访问页面。详见：你所不知道的 HSTS [1] 。　　其他操作　　　　浏览器还会进行一些额外的操作，比如安全检查、访问限制（之前国产浏览器限制 996.icu）。　　检查缓存　　　　二、DNS 查询　　基本步骤　　　　　　1. 浏览器缓存　　　　浏览器会先检查是否在缓存中，没有则调用系统库函数进行查询。　　2. 操作系统缓存　　　

icon图标深入指南

阅读更多关于 icon图标深入指南

图标是网络上常用的元素。它们是通用的，可以立即识别，可以非常吸引人，引起注意，并且（如果使用正确）可以提供出色的用户体验。在网络上实现图标时，我们有很多选择： Icon Spritesheet – 图标精灵(雪碧图) Icon font – 图标字体 Inlined SVG – 内联SVG SVG as an image element – SVG作为图像元素它们中的一些如今已很常见，例如SVG元素(SVG elements)和Icon字体。在本文中，我们将深入研究在Web上实现Icon的每种方法，并看看哪种方法在性能、可访问性、样式选项和浏览器支持方面是最佳的。一、Icon Spritesheet（图标精灵）我们通过将较小的图像（icon）文件合并为一个较大的文件来创建Icon Spritesheet。我们需要使用CSS background-image ， background-size 和 background-position 来显示Spritesheet中的图像。雪碧图示例我们可以使用 SVG Spritesheet 结合 PNG Spritesheet 来确保图标在各种显示（常规和视网膜）上看起来都不错，以作为旧版浏览器的后备。我们可以使用像 Modernizr （https://modernizr.com/）这样的 JavaScript

何时在CSS中使用margin和padding [关闭]

阅读更多关于何时在CSS中使用margin和padding [关闭]

在编写CSS时，是否有一个特定的规则或指南应该用于决定何时使用 margin 以及何时使用 padding ？ #1楼 MARGIN vs PADDING ：边距用于在元素中创建该元素与页面的其他元素之间的距离。其中padding用于创建元素的内容和边框之间的距离。边距不是元素的一部分，其中填充是元素的一部分。请参阅下面从 Margin Vs Padding - CSS Properties中提取的图像 #2楼对于您的问题有更多的技术解释，但如果您正在寻找一种方法来考虑边距和填充，这将有助于您选择何时以及如何使用它们，这可能会有所帮助。将块元素与挂在墙上的图片进行比较：浏览器窗口就像墙一样。内容就像一张照片。边距就像框架图片之间的墙壁空间。填充就像照片周围的垫子一样。边框就像一个框架上的边框。在边距和填充之间进行选择时，当你将一个元素与墙上的其他东西间隔开时，使用边距是一个很好的经验法则，当你调整元素本身的外观时，使用填充。边距不会改变元素的大小，但填充通常会使元素变大 1 。 1 可以使用 box-sizing 属性更改此默认框模型。 #3楼边距位于块元素的外侧，而填充位于内部。使用margin将块与其外部的东西分开使用填充将内容移离块的边缘。 #4楼有一点需要注意的是，当自动折叠边距会让你烦恼

CSS核心内容整理

阅读更多关于 CSS核心内容整理

本文是CSS核心内容整理的第二篇,承接上一篇的内容继续对CSS的一些重要内容进行整理,推荐先看完这个系列的上一篇. 四. 页面布局布局可以说是我认为CSS中最重要的东西,CSS本身是个奇怪的东西一直以来有点游离于Coder和非Coder之间的感觉.本身没有严谨的逻辑,而且有很多奇怪的"习惯",这些在布局中都有所体现. 1. 基本布局概念在布局上高度的用处在于细节和内容,整体是由宽度决定的. 首先从多栏布局开始划分,基本上有3种实现方案:固定宽度、流动、弹性. 固定宽度: 固定宽度的含义我就不解释了,我记得我几年前上大学的时候就有很流行的960Grid布局框架,通常固定布局的大小事900到1100,常用的是960因为基本上所有显示器都满足,同时960可以被16,12,10,8,6,5,4整除,易于分栏. 流动布局: 大小会随用户调整浏览器窗口大小而变化.当页面宽度变化的时候,文本和元素间的位置都可能变化.强调一下,有些童鞋以为流动布局就是响应式设计,这是不一样的.通过CSS媒体查询,适应各种宽度的可变固定布局才叫响应式设计,这和流动布局是不一样的. 弹性布局: 估计见过的人不多,效果比较类似于浏览器的放大和缩放功能,比如当浏览器窗口变宽了,那么里面的所有元素都按照一定比例大小变化.这个由于过于复杂,所以实际应用的例子不多. 2. 宽高是完全不一样的

订阅 css框架