-
浅谈团队开发中css的BEM命名风格
前端在项目开发中经常遇到的问题团队开发中css的命名冲突为css的命名而绞尽脑汁css的命名五花八门开发时如何规范css的书写什么是BEMBEM是一种前端命名方法论，主要是针对CSS，意思是块（Block）、元素（Element）、修饰符（Modifier）的缩写。它Yandex团队提出，这种命名方法让CSS便于统一团队开发规范和方便维护，提高c...
-
HTML元素分三大类
一、块元素网页框架基本结构：html body frameset frame noframe iframe表单结构:form fieldset legend布局结构:div段落块:p标题结构h1~h6列表:ul ol dl dt ddme...
-
你不曾察觉的隐患：危险的 target="_blank" 与 “opener”
在网页中使用链接时，如果想要让浏览器自动在新的标签页打开指定的地址，通常的做法就是在a标签上添加target等于"_blank"属性。然而，就是这个属性，为钓鱼攻击者带来了可乘之机。起源parent与opener在说opener之前，可以先聊聊<iframe>中的parent。我们知道，在<iframe>中提供了一个用于父...
-
CSS3 transition 实现抛物线动画
<!DOCTYPEhtml><html><head><title>CSS3水平抛物线动画</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width"><style&...
-
前端用到的那些单位
单位，在各个领域都是很常见的。那么在前端领域用到了哪些单位呢，这篇文章让我们细细了解一下！下面我讲列举：pt、px、em、rem、vh、vw、vmax、vmin、rpx、ch等单位的定义、用法及注意点。首先，来了解pt、px、em、rem这四个单位。pt单位名称为点（Point），绝对长度单位。1pt＝1/72英寸，常用于印刷当中，在AI、PS等...
-
移动端兼容问题（一）
【UC浏览器】video标签脱离文档流场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。测试环境：UC浏览器8.7/8.6+Android2.3/4.0。Demo：http://t.cn/zj3xiyu解决方案：不使用transform属性。translate用top...
-
使用CSS完成元素居中的七种方法
在网页上使HTML元素居中看似一件很简单的事情.至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知,在CSS中至少有六种实现居中的方法。...
-
浏览器兼容问题与解决方法汇总
浏览器兼容问题是指，不同厂商开发的浏览器针对同一段代码的不同解析，造成页面展示效果出现差异的情况，很多时候为了追求显示效果的一直，前端开发人员就要针对不同兼容问题应用相应的方法处理，达到效果一致的目的。下面这些是平时开发过程中遇到的，做个汇总，方便查阅。1、<!DOCTYPEHTML>文档类型的声明产生条件：IE6浏览器，当我们没有书...
-
CSS选择器集合
序号选择器例子例子描述CSS版本1.class（类名选择器）.table选择class='table'的所有元素。12#id#tabs选择id='firstname'的元素，具有唯一性13**通配符，选择所有元素24elementdiv选择所有div15element,elementdiv,p选择所有<div>元素和所有<p&g...