关于CSS reset的思考 在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; margin:0px; } span{ margin:0px; } 其实大部分CSS reset是没必要的,多写了只会增加浏览器在渲染页面是的负担,当然有同学会说CSS reset还是有其意义的,这个我也承认,但是我们可以通过了解一些标签的CSS属性的默认值来避免过度的…

因为被派去协助别的组,有机会写了一下react,发现ICE做的那一个套件用来搭建后台系统真的太给力了(插一句必入table组件其实是可以把删除添加座位基础方法加进去的).因为看了demo的代码以及对于jsx语法的不熟悉,所以一时不知所措把css写在哪里才发现react对于css的处理已经不同于原来传统对于css的定义了,参考这篇文章 react很核心的思想就是:1. 数据和ui分层:2. 组件化:第二点其实也是建立在第一点之上的,在后台系统中的运用简直太合适了,跟我当时在考拉的时候想做的是差不多…

在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; margin:0px; } span{ margin:0px; } 其实大部分CSS reset是没必要的,多写了只会增加浏览器在渲染页面是的负担,当然有同学会说CSS reset还是有其意义的,这个我也承认,但是我们可以通过了解一些标签的CSS属性的默认值来避免过度的reset 标签属性默认值 由…

为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): 第二级是组件层,项目中出现两次及以上的样式单独抽离成一个组件,如果组件小于15个,单独放到一个component.less文件中,大于15个(界限自己把握),考虑放到几个不同的less文件中.因为样有些样式依赖于一定的DOM,所以需要针对less文件写一个HTML文件一一对应后于组件对应的DOM:…

迈入前端行业已经8个多月了,从之前懵懵懂懂到现在的能根据设计图迅速成型页面,自我感觉良好.最近看到张大牛的一篇博客<说说CSS学习中的瓶颈>,突然意识到,自己不就处在快速学习和成长后的一个瓶颈期吗?每天努力工作,也去花时间学习基础知识,只是每次运用的似乎更多的是经验的积累:熟悉各个CSS属性,基本盒模型,兼容性问题如何修复熟悉等.然而,CSS的属性就那么多,如果只是了解每个CSS属性名称.属性值上来看,肯定会有一天达到饱和的.觉得似乎没有什么新的东西可学了,CSS的那点东西我都知道了,似乎工作…

flow模型:默认布局模型,元素从左向右.从上到下依次排列,块状元素独占一行.Position属性对应值static. float模型:主要效果是让本来独占一行的块状元素变成内联-块状元素,并到一排显示.可以向四个方向浮动.浮动的元素将脱离普通流,不影响普通流的占位. layer模型: 相对定位,即从初始位置“浮起来”,飘到left等参数确定的位置,显示在那儿,但占位仍是占在初始位置,因此可以视为普通流的加强版: 绝对定位,当父元素为默认(普通流)定位时,将元素定位到相对于整个文档内的偏移量:当…

在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下CSS相关的优化知识,写篇博客梳理一下,还望大家多多指教 关于CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都能实现某些效果,但并不是所有的方式效果都相同,我们看过不少关于JavaScript方面的语法优化知识,其实C…

笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是HTML高手,你将学会如何像CSS设计者那样思考. 全书共18章,五大部分600来页. 可能是出版方认为本书英文很好懂,所以就不找译者翻译了. 本来为作为一个行外人及英语渣,看这书会是很艰难的过程.但读过之后发现,相比一些拙劣的中文翻译书,居然觉得轻松了很多. 不同于一般CSS书枯燥的"选择器-盒模型…

原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下CSS相关的优化知识,写篇博客梳理一下,还望大家多多指教 关于CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都能实…

本文仅用于学习和交流,不用于商业目的.非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS工作组特邀专家,设计CSS语言的委员之一,此前曾在W3C担任开发者代言人.目前,她在麻省理工学院从事人机交互领域的研究.她还是一位博客作家,并经常在国际性的技术会议上担任讲师:她创建的多个开源项目广受开发者欢迎. **-图说-** 来自CSS一姐的个人网站(http://lea.verou.me),…

前些日子写了篇关于最近找工作的一些感受的博客 找工作的一些感悟--前端小菜的成长,没想到得到了很多园友的共鸣,得到了很多鼓励,也有园友希望我分享一些笔试.面试的经验.我觉得分享一些笔试题没太多价值,对读者帮助不大,自己总结了一些笔试.面试常用的知识点,希望可以给想找工作的同学一些借鉴. 有兴趣同学可以看看前些日子总结的一些面试中经常被问到的问题的博客,目前主要写了关于CSS和JavaScript,会持续把一些经历分享出来 容易被忽略CSS特性 常用CSS优化总结--网络性能与语法性能建议 常见标…

原文地址:http://www.360doc.com/content/10/0708/17/1277406_37692580.shtml 2010-07-08  锋子chans   阅 1116  转 13     先给前端工程师的工作下个一句话定义:运用前端技术,实现体验的良好传达.如果在前面加上 Web,那么是针对 Web 这个领域的,主要是互联网,也可以将移动通信网络和其他传媒网络(比如IPTV)包含在内,因为其理念是一致的. 现在要在未毕业的学生中找到一个符合技能条件的 Web 前端工程…

在看<常见标签的默认属性值及相互作用——关于CSS reset的思考>的时候,其中说body默认的margin是8px.但是,将body的backgound-color:red:后,看到的是 感觉是没有marging啊 于是,搜了一下,<对html与body的一些研究与理解>中提到了,实际是在“这里不是body的background起作用,而是body作为一个根结点起作用了,html标签未被激活,body但当类似于根结点的结点,其background背景色被浏览器俘获,浏览器界面背…

这个系列的前两篇,介绍了前端的优化技术,这些技术秉承了前人至高无上的智慧,我只是负责吸收和传播.然而,这些技术一般也都是某某大型网站的技术经验,我们大部分人或许只能接触到相对小规模的网站,小规模的网站由于资源限制,某种程度上更需要优化,而传统的优化经验,是否就一定适合呢?不一定! 查看本系列更多内容 | 0 评论: 魏 强, 软件工程师, 阿里巴巴 2014 年 12 月 31 日 内容 在 IBM Bluemix 云平台上开发并部署您的下一个应用. 现在就开始免费试用 引言 按照本系列上篇文章…

2.内存和硬盘: 内存:计算机硬件组成部分之一,它是一个容器,用来存储数据:处理数据速度快, 存储数据量小:断电死机数据会丢失,短暂性存储数据 硬盘:计算机硬件组成部分之一,它是一个容器,用来存储数据:处理数据速度慢, 存储数据量大,断电死机数据不会丢失,数据的持久存储 3.字节和字符 字节:计算机的存储数据的单位,底层唯一能够识别并且运算的数据 字符:人类将字节封装为另一种能直接识别的数据单位,底层还是字节 4.如何区分字节文件和字符文件 如果使用文本编辑器打开能看得懂(不会乱码)那它就是一个…

针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CSS3的一些技术来让网页布局适应移动设备. 1.思考 在编写适应移动设备的布局前有几个问题值得思考. 移动互联网浏览 限制HTTP请求:3G信号传输费用昂贵,可能的话也要限制图像显示. 不同的屏幕尺寸: 移动设备屏幕尺寸宽度一般来说从320到480不等,但是也会因为设备的不同有很大差异,所以在CSS里…

  在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]…

原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有一定难度.而我本人学识有限,加之时间仓促,所翻译内容可能有不恰当及晦涩之处.欢迎大家拍砖指正. 我最近在 codePen 上看到了这个 加载程序,一个纯CSS制作的带有渐变反射的3D旋转竖条.它的制作方法是:为每个竖条创建一个元素,然后通过复制每一个元素来制作反射倒影,最后在反射倒影上添加渐变背景来…

  今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的更深的思考.   第一次遇到这个问题是在撸Bootstrap的一个demo --Blog Template for Bootstrap,它的导航栏中用到了CSS来画三角形: 我们来看一看其中重点的那段CSS代码: .blog-nav .active:after { position: absolut…

obert C. Martin写的<Clean Code>是我读过的最好的编程书籍之一,若没有读过,推荐你将它加入书单. 注释就意味着代码无法自说明 —— Robert C. Martin Martin在文中详细讨论了代码注释,我不会完全重复他的话.简而言之,他的意思就是,这些注释是注定会过时的.程序执行时会忽视注释,所以无法保证这些说明注释会准确的描述代码作用.所以最好的方式是让代码自说明,如此,按照代码逻辑,程序员和程序获取到的信息是一致的. 思考如下代码: // Check to see…

在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用margin,width,display等属性进行居中.自适应宽度与否.块级/内联元素异或隐藏元素 float:浮动标签 块级元素与内联元素:是否整行占用 相对定位与绝对定位:在二级菜单中经常用到. 最后,还是在实践中摸索经验.欢迎交流.…

  一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了width:auto试图…

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型.IE盒模型的区别.不要漏说了IE盒模型,通过这个问题,可以筛选一部分人. (3)CSS如何设置这两种模型(即:如何设置某个盒子为其中一个模型)?如果回答了上面的第二条,还会继续…

问题的起因: 使用 bulma.css ,通过webpack打包后样式出错,查看压缩代码,发现代码从css的 long hand 属性被压缩为 short hand(PS: 什么是long hand & short hand,请查看此文:http://www.hongkiat.com/blog/css-shorthand-longhand-notations/). 解决过程: 经过一番追查判断(搜 + 思),最终发现问题出在webpack.prod.conf.js(使用vue-cli自动搭建的w…

浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示:   文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景. 浮动有哪些特征? 浮动的特征就体现在前文的那句…

前端开发现在已经从传统的后端web多页面开发模式转向前端单页SPA开发模式,而vuejs/react/angular则是开发SPA非常优秀的前端框架.组件化开发由react最早提出,vuejs后发优势,将组件化开发贯彻到了极致.虽然spa开发由于组件式开发带来的组件重用,可维护,可扩展非常好,但是css样式的管理一直是一个令前端团队头疼的问题,特别是当页面越来越复杂,并且有多个SPA页面时如何能够让样式重用,并且可维护,可扩展并没有一个特别有效和被验证过的普适方案.本文试图总结一些css模块化在…

关于display <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style media="screen"> .num1{ display: inline; } .num2{ display: inline; } </style&…

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WgdVyx/ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/c23zLuN 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/…

原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一看使用PostCSS处理的css的世界. PostCSS是什么? PostCSS 是使用 javascript 插件转换 css 的后处理器.PostCSS 本身不会对你的 css 做任何事情,你需要安装一些 plugins 才能开始工作.这不仅使其模块化,同时功能也会更强. 它的工作原理就是解析…

人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义.BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目. 重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagh…