我来了……

HTML5|CSS3

HTML元素嵌套约束

3

chalecao 发布于 2018-09-08

块级元素特点: ①总是在新行上开始,占据一整行(很霸道); ②高度,行高以及外边距和内边距都可控制; ③宽带始终是与浏览器宽度一样,与内容无关; ④它可以容纳内联元素和其他块元素。 行内元素的特点: ①和其他元素都在一行上; ②高,行高及外边距和内边距部分可改变; ③宽度只与内容有关; ④行内元素只能容纳文本或者其他行内元素。 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用, 只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用 内联元素(行内元素)内联元素(inline element) * a – 锚点 * abbr – 缩写 * acronym &...

阅读(29)

奇技淫巧

2

chalecao 发布于 2018-04-12

定制间隔线 需要上面这样一条虚线,怎么搞? 方法一: border-top: 1px dashed #eee; 方法二: //基于渐变 .dash { height: 1px; background-image: linear-gradient(90deg, #eee 0%, #eee 50%, transparent 50%, transparent 100%); background-size: 15px 1px; margin: 9px 0; } PS: 看过一篇文章,一位大牛用css渐变写了超级玛丽:链接 append与appendChild 这里说的append是dom的方法,目前处于草案,虽然有很多浏览器支持,但是在开发h5页面时,偶尔还是会有报错,有些极个别...

阅读(488)

css基线与行高关系

18

chalecao 发布于 2018-04-09

一、基本概念 1、基线、底线、顶线、中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 2、内容区 内容区是指底线和顶线包裹的区域(行内元素display:inline;可以通过background-color属性显示出来),实际中不一定看得到,但确实存在。内容区的大小依据font-size的值和字数进行变化。 3、行距、行高 行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行高。一般情况下,也可以认为是相邻文本行基线间的距离。 行距:指相邻文本间上一个文本行基线和下一个文本行顶线之间的距离。当然,我更愿意认为是(上文本行行高-内容区高度)/2+(下文本行行高-内容区高度)/2。 4、行内框 ...

阅读(391)

基于rem方案实现自适应布局

6

chalecao 发布于 2018-04-03

rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素...

阅读(389)

H5页面秒开-套路1

chalecao 发布于 2017-12-13

随着移动设备性能不断增强,web 页面的性能体验逐渐变得可以接受,又因为 web 开发模式的诸多好处(跨平台,动态更新,减体积,无限扩展),APP 客户端里出现越来越多内嵌 web 页面(为了配上当前流行的说法,以下把所有网页都称为 H5 页面,虽然可能跟 H5 没关系),很多 APP 把一些功能模块改成用 H5 实现。 虽然说 H5 页面性能变好了,但如果没针对性地做一些优化,体验还是很糟糕的,主要两部分体验: 页面启动白屏时间:打开一个 H5 页面需要做一系列处理,会有一段白屏时间,体验糟糕。 响应流畅度:由于 webkit 的渲染机制,单线程,历史包袱等原因,页面刷新/交互的性能体验不如原生。 本文先不讨论第二点,只讨论第一点,怎样减少白屏时间。对 APP 里的一些...

阅读(513)

CSS 变量(CSS Variable)

1

chalecao 发布于 2017-10-16

这是一个令人激动的革新。 CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量。 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量。 一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器。 但是新的草案发布之后,直接在 CSS 中定义和使用变量已经不再是幻想了,像下面这样,看个简单的例子: 1 2 3 4 // 声明一个变量: :root{   --bgColor:#000; } 这里我们借助了上篇文章 结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。 定...

阅读(568)

伪类与伪元素的用法

4

chalecao 发布于 2017-10-16

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。   1. 伪类与伪元素 先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述: CSS introduces the concepts of pseudo-elements and pseudo-classes  to permit formatting based on information that lies outside the document tree. 直译过来就是:css引入伪类和伪元...

阅读(534)

H5兼容性问题总结

3

chalecao 发布于 2017-09-06

文字问题 1.文字顶部被截掉,这个很坑,常见于android手机     机型:android手机,红米note4x, 小米6 原因: 文字大小和行高一样的时候,会出现这个问题 字体的font-size不等于最终显示的大小,取决于字体设计师的定义,以Catamaran字体为例,当我们设置100px的字号时,大写字母的高度(Capital Height)是68px,小写字母的高度(X-Hegiht)是49px,整体的高度是164px(Ascender 1100 + Descender 540),要了解任意字体的相关属性可以使用(fontforge)[https://fontforge.github.io/en-US/] 我们日常使用的CSS单位em对应f...

阅读(868)

学习和使用flexbox布局

1

chalecao 发布于 2017-09-04

是时候好好学习flex布局了,之前的开发经验主要集中在web pc端开发,现在主要集中在H5页面的开发,既然H5基本都支持flex布局,为什么不熟练使用呢?这里借用下阮老师的图,我也自己谢谢学到的flex布局的知识,作为补充。 知识运用:   垂直居中: 记得上次我写个垂直居中,由于图标的形状看起来偏下一些,所以用了margin/top+relative的方式来写,结果H5下面出了一堆兼容的问题,后来还是改成vertical-align的方式来写。同一父元素下所有子元素如果都是inline-block,那么采用vertical-align是比较好的垂直居中方式,当然vertical-align的值需要都是middle即可。   参考文献: Flex 布...

阅读(541)

SVG的视窗与宽高比控制

14

chalecao 发布于 2017-08-29

SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性:viewport, viewBox, 和 preserveAspectRatio。

阅读(1143)

SVG的牛B之处,你造吗

2

chalecao 发布于 2017-08-29

SVG能干啥,想干啥就干啥。可以用来做贴图,做纹理,做动画,甚至做背景图片,你想要的都可以,关键是操作灵活,和别是和canvas又可以相互转化使用,简直是居家旅行必备神器,作为前端工程师,你学会了吗?不会,就抓紧开始吧。

阅读(646)

浏览器兼容性经验笔记

1

chalecao 发布于 2017-08-29

遇到好多坑,一路走来,发现竟是坑。调IE7,泪流满面;调微信浏览器,汗流浃背,沐浴泪光。哎,记录一下,有些坑人的地方,还是比较有趣的,值得注意。

阅读(589)

SCSS/SASS编译

1

chalecao 发布于 2017-08-29

SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。

阅读(573)

WebStorge使用

1

chalecao 发布于 2017-08-29

互联网的未来,是移动互联网;移动互联网网页的未来是WEB App。对于Web APP或者许多的富客户端网页来说,Web Storage是很重要的一部分。对于提升用户体验和网页页面优化有很重要的价值。使用者需要对网页或app的数据结构分层整合,区分出可以用于web storage和不能storage的数据,对于需要存储的数据,再格式化成key/value形式。

阅读(480)

伪类使用技巧

2

chalecao 发布于 2017-08-29

关于伪类,大家最早接触的肯定是a:hover了,但是不止如此,还有很多其他的伪类。另外,伪类与伪元素也是不同的。伪元素最近用的比较多,做一些效果还是挺不错的,可以有效避免增加DOM元素。这里主要总结一下伪类与伪元素的用法。

阅读(554)

手机网页开发问题集锦

2

chalecao 发布于 2017-08-29

接到一个小活,开发手机网页。对方给了一个psd设计图,让我做个手机网页,设计图很长,要求上拉动态加载。我想了想,本以为自己切个图处理一下就好,后来发现不行,许多问题。这里特地记录一下,有些还没解决,只是给了一下自己的想法。

阅读(461)

Canvas图像处理和滤镜特效

1

chalecao 发布于 2017-08-29

这段时间做了一个手机WebRTC拍照加特效的应用,主要用到canvas标签获取图像矩阵(这个在上一篇博客中已经详细介绍过:),然后做图像处理,例如滤镜特效(马赛克,浮雕,衬底,反色等),这里我们详细介绍相关的知识。其实从原理上讲,大部分的图像处理都是对图像像素矩阵和某个特效矩阵做卷积,得到新的像素矩阵,就是处理后的效果。关于这个大学课程《数字信息处理》里面有详细介绍。

阅读(782)

WebRTC相关的canvas与video

1

chalecao 发布于 2017-08-29

这两天公司有个项目,我打算用HTML5做个演示版本,只要是音视频方面的,所以打算采用HTML5协议规范中的WebRTC来研究,考虑到目前国产浏览器大部分‘高速模式’都是用的webkit核心的浏览器引擎,所以除了Chrome和Firefox浏览器之外,国产的浏览器像是sougou支持的都还不错。这里主要是通过WebRTC获取音频和视频流,然后通过video元素转换,经过canvas绘制成图片或者视频录制。这里主要介绍一下关于拍摄照片和美化处理的一些相关知识。其他部分,关于音频和视频的录制,后期在追加。

阅读(1388)

使元素不可见的旁门左道

1

chalecao 发布于 2017-08-29

最近有人问我如何使一个元素不可见,css中有哪些方法。当时我就随口说了7-8种常用的方法,其实还有很多,可以说是应该几十种方法吧。这里索性就总结一下,权当是对于知识点的总结与回顾。突然间发现这种学习知识的方法也很好,穿插交替。

阅读(492)

前端技能总结

6

chalecao 发布于 2017-08-29

如果让你作为前端负责人,你认为前端必备技能有哪些呢? 学习编码规范,最好就是先阅读一下现有的规范。前端编码规范 然后可以指定自己团队的编码规范,制定完之后可以通过配置eslint来检验你的编码是否符合规范。

阅读(472)

文本均匀分布两端对齐等

1

chalecao 发布于 2017-08-29

还有很多不知道的细节,慢慢积累。这里把遇到的问题记录一下,比如文本两端对齐,比如利用a标签的download属性,比如ie8下img标签的宽高问题,比如overflow默认属性值等等。

阅读(560)

SVG压缩与字体图标新思路

1

chalecao 发布于 2017-08-29

已经很晚了,程序员,程序狗,爱学习不爱加班的我,还是在加班,在学习。为了涨工资,ping了。本节安利一个压缩SVG的工具:svgo(https://github.com/chalecao/svgo)。我们做前端的同学肯定都用过字体图标,有些特殊的字体图标需要视觉做个svg的矢量图,或者你也可以自己做个矢量图,需要学学adobe illustrator,绘制个矢量图,然后保存成svg格式就可以了。然后用记事本打开保存的svg文件,你会发现有许多没有用的svg标签,这时候你需要一个svg压缩工具,可以帮你做这些事情。

阅读(904)

关于 CSS 选择器性能

1

chalecao 发布于 2017-08-29

CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则: 1#header > a {font-weight:blod;}

阅读(423)

HTML发展历史

2

chalecao 发布于 2017-08-29

HTML是Web统一语言,这些容纳在尖括号里的简单标签,构成了如今的Web,1991年,Tim Berners-Lee编写了一份叫做“HTML标签”的文档,里面包含了大约20个用来标记网页的HTML标签。他直接借用SGML的标记格式,也就是后来我们看到的HTML标记的格式。

阅读(623)