HTML5|CSS3 第2页

基础知识HTML5、CSS3以及在PC和H5页面的适配和兼容

JS和CSS使用的一些小技巧和问题

2

前端学堂 发布于 2018-10-12

定制间隔线 需要上面这样一条虚线,怎么搞? 方法一: border-top: 1px dashed #eee; 方法二: //基于渐变 .dash { height: 1px; background-image: linear-gradient(90deg, #eee 0%, #...

阅读(857)赞 (2)

HTML元素嵌套约束

3

前端学堂 发布于 2018-09-08

块级元素特点: ①总是在新行上开始,占据一整行(很霸道); ②高度,行高以及外边距和内边距都可控制; ③宽带始终是与浏览器宽度一样,与内容无关; ④它可以容纳 内联元素 和其他块元素。 行内元素的特点: ①和其他元素都在一行上; ②高,行高及外边距和内边距部分可改变; ③宽度只与...

阅读(479)赞 (0)

css基线与行高关系

18

前端学堂 发布于 2018-04-09

一、基本概念 1、基线、底线、顶线、中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 2、内容区 内容区是指底线和顶线包裹的区域(行内元素display:inline;可以通过background-color属性显示出来),实际中不一定看...

阅读(758)赞 (1)

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

6

前端学堂 发布于 2018-04-02

rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃...

阅读(693)赞 (0)

每日一击:z-index与translateZ

1

前端学堂 发布于 2018-01-03

我们在写样式的时候,经常会用到 transform: translate3d(0px, 0px, 0px),据说这个还能开启浏览器动画硬件加速。但是你知道吗,这里面包含了一个坑,那就是translate3d(0px, 0px, 0px) 实际上包含了translateZ: 0px...

阅读(891)赞 (0)

H5页面秒开-套路1

前端学堂 发布于 2017-12-12

随着移动设备性能不断增强,web 页面的性能体验逐渐变得可以接受,又因为 web 开发模式的诸多好处(跨平台,动态更新,减体积,无限扩展),APP 客户端里出现越来越多内嵌 web 页面(为了配上当前流行的说法,以下把所有网页都称为 H5 页面,虽然可能跟 H5 没关系),很多 ...

阅读(748)赞 (2)

CSS 变量(CSS Variable)

1

前端学堂 发布于 2017-10-16

这是一个令人激动的革新。 CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量。 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量。 一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能...

阅读(825)赞 (1)

伪类与伪元素的用法

4

前端学堂 发布于 2017-10-16

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。   1. 伪类与伪元素 先说一说为什么css要引入伪元素和...

阅读(825)赞 (1)

H5兼容性问题总结

3

前端学堂 发布于 2017-09-06

文字问题 1.文字顶部被截掉,这个很坑,常见于android手机     机型:android手机,红米note4x, 小米6 原因: 文字大小和行高一样的时候,会出现这个问题 字体的font-size不等于最终显示的大小,取决于字体设计师的定义,以Catam...

阅读(1127)赞 (3)

学习和使用flexbox布局以及变态android文字垂直居中

4

前端学堂 发布于 2017-09-04

是时候好好学习flex布局了,之前的开发经验主要集中在web pc端开发,现在主要集中在H5页面的开发,既然H5基本都支持flex布局,为什么不熟练使用呢?这里借用下阮老师的图,我也自己谢谢学到的flex布局的知识,作为补充。 知识运用: 垂直居中: 记得上次我写个垂直居中,由于...

阅读(755)赞 (1)

SVG的视窗与宽高比控制

14

前端学堂 发布于 2017-08-29

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

阅读(1427)赞 (1)

SVG的牛B之处,你造吗

2

前端学堂 发布于 2017-08-29

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

阅读(901)赞 (2)