HTML/CSS – 千里之行始于足下，学习前端从html开始-唯品秀前端博客

24 2019-01

移动端rem小于12px文字-webkit-text-size-adjust-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
移动端rem小于12px文字-webkit-text-size-adjust

昨天做项目，遇到一个神奇的css问题，也是我做前端为止遇到的最花我时间的一个问题，整整找了一下午这个bug，先说说问题。大家在做移动端开发H5页面时候，设计图通常是750px宽，然后通过rem转换我们在...

阅读全文

2019年01月24日 11:50:11 周四 2019-01-24 周四 8828 5 2

19 2019-01

【mac safari浏览器】设置border-radius但overflow:hidden失效问题-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
【mac safari浏览器】设置border-radius但overflow:hidden失效问题

正常来讲，如果我们设置父亲元素圆角，并且设置超出部分隐藏，那么子元素也应该限制在这个父亲带有圆角的区域内，但事与愿违，如下图：在之前帮别人做的一个案例中也有同样的问题，因为子元素设置了t...

阅读全文

2019年01月19日 09:48:18 周六 2019-01-19 周六 8449 1 5

18 2019-01

css3弹性盒子display:flex常见属性总结-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
css3弹性盒子display:flex常见属性总结

一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏...

阅读全文

2019年01月18日 20:10:44 周五 2019-01-18 周五 16584 0 28

16 2019-01

教你使用css3绘制任意角度扇形，简直就是碉堡了-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
教你使用css3绘制任意角度扇形，简直就是碉堡了

核心技术两点，一、旋转rotate，二、倾斜skewY，直接上代码： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869...

阅读全文

2019年01月16日 16:45:39 周三 2019-01-16 周三 12510 1 13

15 2018-11

CSS3神奇的css高亮 – filter(滤镜)-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
CSS3神奇的css高亮 – filter(滤镜)

效果展示现在请用鼠标轻轻抚摸下咱们景甜小姐姐的小胸脯，初看到这个效果，是否想到的是改变两张图片的透明度，查看之后发现是用filter实现的，很简洁有没有。实现方式、隐藏显示，也可以用图片定位...

阅读全文

2018年11月15日 11:58:37 周四 2018-11-15 周四 8413 0 6

13 2018-11

前端针对某个特殊浏览器做兼容（Hack）-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
前端针对某个特殊浏览器做兼容（Hack）

此处的“hack”并非是网络中很神秘的组织“黑客”，而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多，比如说在您的代码中应不应该使用hack？甚至延伸到使用“hack”...

阅读全文

2018年11月13日 11:16:44 周二 2018-11-13 周二 5752 0 3

29 2018-09

深入了解line-height文字垂直居中-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
深入了解line-height文字垂直居中

先思考下面这个问题：默认空div高度是 0，但是一旦里面写上几个文字，div高度就有了，请问这个高度由何而来，或者说是由哪个 CSS 属性决定的？如果仅仅通过表象来确认，估计不少人会认为div高度是由里...

阅读全文

2018年09月29日 10:45:04 周六 2018-09-29 周六 7175 1 7

17 2018-08

使用less自动进行移动端rem适配计算-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
使用less自动进行移动端rem适配计算

在做移动端的时候，最主要的问题就是要做适配，通过我们都是通过rem，但是，rem和px需要我们去转换，在一个项目中前端尺寸每次都需要计算的时候，那就应该交给插件工具们，当然，如果你的项目是工程化...

阅读全文

2018年08月17日 15:25:21 周五 2018-08-17 周五 13348 0 11

20 2018-07

页面不满一屏footer固定在底部-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
页面不满一屏footer固定在底部

很多时候比如登录和注册页面，又或者是列表页面数据很少的情况下，我们是不希望底部footer跑到屏幕上方去的，而是希望固定在底部，但是当内容足够一屏幕时候，底部继续随着信息流往下走，当前案例代码...

阅读全文

2018年07月20日 10:09:33 周五 2018-07-20 周五 8691 0 17

22 2018-04

双击视频/图片全屏功能（解决全屏后双击无法退出）-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
双击视频/图片全屏功能（解决全屏后双击无法退出）

首先：实现全屏功能并不麻烦，两个api就能搞定，全屏：element.requestFullscreen();退出全屏：document.exitFullscreen();但实际运用中发现，全屏后是无法再双击退出全屏，本文重点就是解决这个问题，...

阅读全文

2018年04月22日 12:46:13 周日 2018-04-22 周日 10964 2 5

30 2018-01

CSS3中伪类的content和attr的用法-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
CSS3中伪类的content和attr的用法

说起css的content，很多人都知道那就是用来在标签头尾插入内容的，但如果你说css里面的attr和content有啥关系，我想还是蛮多人不知道的吧，attr做前端的应该见名思义是用来操作html属性的，确实，在这...

阅读全文

2018年01月30日 14:09:35 周二 2018-01-30 周二 7821 0 8

30 2018-01

HTML5摇一摇，如何判断设备摇动 - H5陀螺仪-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
HTML5摇一摇，如何判断设备摇动 – H5陀螺仪

好奇宝宝花点时间看了看这玩意儿，感觉还蛮好玩的样子，实际用处似乎不大，不过如果你是经常做移动端活动页面，那很可能用得上哦，不多说，直接贴代码和demo，有案例 12345678910111213141516171819202...

阅读全文

2018年01月30日 11:12:59 周二 2018-01-30 周二 10595 0 8

28 2018-01

在 iOS Safari中假装自动播放 HTML5 audio(音乐) 的正确方式-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
在 iOS Safari中假装自动播放 HTML5 audio(音乐) 的正确方式

做过移动端音乐播放器的同学可能都会发现，在安卓上页面刷新后可以做到自动播放的播放器在苹果手机上就不行，其实这是因为苹果系统的机制限制，那么我们应该怎么解决呢？核心原理: 通过一个用户交互事...

阅读全文

2018年01月28日 16:03:03 周日 2018-01-28 周日 17448 0 3

13 2017-10

$【YQN】CSS \ Less \ Sass 编码规范-企业开发项目流程-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站$

HTML/CSS
【YQN】CSS \ Less \ Sass 编码规范-企业开发项目流程

$【YQN】CSS \ Less \ Sass 编码规范-企业开发项目流程-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站$

1 引言 1.1 说明本文档以 Airbnb CSS Style Guide 为基础，编写符合自己团队的编码规范；统一了命名和注释两大痛点，就统一了80%的风格，所以我们重点拓展这两部分内容，主体部分请参考基础。 1.2 基...

阅读全文

2017年10月13日 14:51:52 周五 2017-10-13 周五 5215 0 5

13 2017-09

苹果手机Safari浏览器iOS 2.0+长按图片储存-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
苹果手机Safari浏览器iOS 2.0+长按图片储存

在所有移动设备默认是正常的，即：长按图片img元素会弹出底部菜单，可以保存当前图片，但有些时候我们会发现并没有反应？ -webkit-touch-callout 一个不规范的属性（unsupported WebKit property），...

阅读全文

2017年09月13日 15:12:43 周三 2017-09-13 周三 10865 0 4

23 2017-08

前端CSS笔记_半小时带你快速入门网页布局-唯品秀前端博客 - 关注最前沿的web前端开发技术个人博客网站

HTML/CSS
前端CSS笔记_半小时带你快速入门网页布局

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配...

阅读全文

2017年08月23日 15:08:09 周三 2017-08-23 周三 6047 0 6

HTML/CSS
移动端rem小于12px文字-webkit-text-size-adjust

昨天做项目，遇到一个神奇的css问题，也是我做前端为止遇到的最花我时间的一个问题，整整找了一下午这个bug，先说说问题。大家在做移动端开发H5页面时候，设计图通常是750px宽，然后通过rem转换我们在...

HTML/CSS
【mac safari浏览器】设置border-radius但overflow:hidden失效问题

正常来讲，如果我们设置父亲元素圆角，并且设置超出部分隐藏，那么子元素也应该限制在这个父亲带有圆角的区域内，但事与愿违，如下图：在之前帮别人做的一个案例中也有同样的问题，因为子元素设置了t...

HTML/CSS
css3弹性盒子display:flex常见属性总结

一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏...

HTML/CSS
教你使用css3绘制任意角度扇形，简直就是碉堡了

核心技术两点，一、旋转rotate，二、倾斜skewY，直接上代码： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869...

HTML/CSS
CSS3神奇的css高亮 – filter(滤镜)

效果展示现在请用鼠标轻轻抚摸下咱们景甜小姐姐的小胸脯，初看到这个效果，是否想到的是改变两张图片的透明度，查看之后发现是用filter实现的，很简洁有没有。实现方式、隐藏显示，也可以用图片定位...

HTML/CSS
前端针对某个特殊浏览器做兼容（Hack）

此处的“hack”并非是网络中很神秘的组织“黑客”，而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多，比如说在您的代码中应不应该使用hack？甚至延伸到使用“hack”...

HTML/CSS
深入了解line-height文字垂直居中

先思考下面这个问题：默认空div高度是 0，但是一旦里面写上几个文字，div高度就有了，请问这个高度由何而来，或者说是由哪个 CSS 属性决定的？如果仅仅通过表象来确认，估计不少人会认为div高度是由里...

HTML/CSS
使用less自动进行移动端rem适配计算

在做移动端的时候，最主要的问题就是要做适配，通过我们都是通过rem，但是，rem和px需要我们去转换，在一个项目中前端尺寸每次都需要计算的时候，那就应该交给插件工具们，当然，如果你的项目是工程化...

HTML/CSS
页面不满一屏footer固定在底部

很多时候比如登录和注册页面，又或者是列表页面数据很少的情况下，我们是不希望底部footer跑到屏幕上方去的，而是希望固定在底部，但是当内容足够一屏幕时候，底部继续随着信息流往下走，当前案例代码...

HTML/CSS
双击视频/图片全屏功能（解决全屏后双击无法退出）

首先：实现全屏功能并不麻烦，两个api就能搞定，全屏：element.requestFullscreen();退出全屏：document.exitFullscreen();但实际运用中发现，全屏后是无法再双击退出全屏，本文重点就是解决这个问题，...

HTML/CSS
CSS3中伪类的content和attr的用法

说起css的content，很多人都知道那就是用来在标签头尾插入内容的，但如果你说css里面的attr和content有啥关系，我想还是蛮多人不知道的吧，attr做前端的应该见名思义是用来操作html属性的，确实，在这...

HTML/CSS
HTML5摇一摇，如何判断设备摇动 – H5陀螺仪

好奇宝宝花点时间看了看这玩意儿，感觉还蛮好玩的样子，实际用处似乎不大，不过如果你是经常做移动端活动页面，那很可能用得上哦，不多说，直接贴代码和demo，有案例 12345678910111213141516171819202...

HTML/CSS
在 iOS Safari中假装自动播放 HTML5 audio(音乐) 的正确方式

做过移动端音乐播放器的同学可能都会发现，在安卓上页面刷新后可以做到自动播放的播放器在苹果手机上就不行，其实这是因为苹果系统的机制限制，那么我们应该怎么解决呢？核心原理: 通过一个用户交互事...

HTML/CSS
【YQN】CSS \ Less \ Sass 编码规范-企业开发项目流程

1 引言 1.1 说明本文档以 Airbnb CSS Style Guide 为基础，编写符合自己团队的编码规范；统一了命名和注释两大痛点，就统一了80%的风格，所以我们重点拓展这两部分内容，主体部分请参考基础。 1.2 基...

HTML/CSS
苹果手机Safari浏览器iOS 2.0+长按图片储存

在所有移动设备默认是正常的，即：长按图片img元素会弹出底部菜单，可以保存当前图片，但有些时候我们会发现并没有反应？ -webkit-touch-callout 一个不规范的属性（unsupported WebKit property），...

HTML/CSS
前端CSS笔记_半小时带你快速入门网页布局

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配...

博客简介

最近更新

随机文章

热门标签

精彩评论

站点统计

昨天做项目，遇到一个神奇的css问题，也是我做前端为止遇到的最花我时间的一个问题，整整找了一下午这个bug，先说说问题。大家在做移动端开发H5页面时候，设计图通常是750px宽，然后通过rem转换我们在...

正常来讲，如果我们设置父亲元素圆角，并且设置超出部分隐藏，那么子元素也应该限制在这个父亲带有圆角的区域内，但事与愿违，如下图： 在之前帮别人做的一个案例中也有同样的问题，因为子元素设置了t...

一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏...

核心技术两点，一、旋转rotate，二、倾斜skewY，直接上代码： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869...

效果展示 现在请用鼠标轻轻抚摸下咱们景甜小姐姐的小胸脯，初看到这个效果，是否想到的是改变两张图片的透明度，查看之后发现是用filter实现的，很简洁有没有。实现方式、隐藏显示，也可以用图片定位...

此处的“hack”并非是网络中很神秘的组织“黑客”，而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多，比如说在您的代码中应不应该使用hack？甚至延伸到使用“hack”...

先思考下面这个问题：默认空div高度是 0，但是一旦里面写上几个文字，div高度就有了，请问这个高度由何而来，或者说是由哪个 CSS 属性决定的？ 如果仅仅通过表象来确认，估计不少人会认为div高度是由里...

在做移动端的时候，最主要的问题就是要做适配，通过我们都是通过rem，但是，rem和px需要我们去转换，在一个项目中前端尺寸每次都需要计算的时候，那就应该交给插件工具们，当然，如果你的项目是工程化...

很多时候比如登录和注册页面，又或者是列表页面数据很少的情况下，我们是不希望底部footer跑到屏幕上方去的，而是希望固定在底部，但是当内容足够一屏幕时候，底部继续随着信息流往下走，当前案例代码...

首先：实现全屏功能并不麻烦，两个api就能搞定，全屏：element.requestFullscreen();退出全屏：document.exitFullscreen();但实际运用中发现，全屏后是无法再双击退出全屏，本文重点就是解决这个问题，...

说起css的content，很多人都知道那就是用来在标签头尾插入内容的，但如果你说css里面的attr和content有啥关系，我想还是蛮多人不知道的吧，attr做前端的应该见名思义是用来操作html属性的，确实，在这...

好奇宝宝花点时间看了看这玩意儿，感觉还蛮好玩的样子，实际用处似乎不大，不过如果你是经常做移动端活动页面，那很可能用得上哦，不多说，直接贴代码和demo，有案例 12345678910111213141516171819202...

做过移动端音乐播放器的同学可能都会发现，在安卓上页面刷新后可以做到自动播放的播放器在苹果手机上就不行，其实这是因为苹果系统的机制限制，那么我们应该怎么解决呢？核心原理: 通过一个用户交互事...

1 引言 1.1 说明 本文档以 Airbnb CSS Style Guide 为基础，编写符合自己团队的编码规范；统一了命名和注释两大痛点，就统一了80%的风格，所以我们重点拓展这两部分内容，主体部分请参考基础。 1.2 基...

在所有移动设备默认是正常的，即：长按图片img元素会弹出底部菜单，可以保存当前图片，但有些时候我们会发现并没有反应？ -webkit-touch-callout 一个 不规范的属性（unsupported WebKit property），...

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配...

博客简介

正常来讲，如果我们设置父亲元素圆角，并且设置超出部分隐藏，那么子元素也应该限制在这个父亲带有圆角的区域内，但事与愿违，如下图：在之前帮别人做的一个案例中也有同样的问题，因为子元素设置了t...

效果展示现在请用鼠标轻轻抚摸下咱们景甜小姐姐的小胸脯，初看到这个效果，是否想到的是改变两张图片的透明度，查看之后发现是用filter实现的，很简洁有没有。实现方式、隐藏显示，也可以用图片定位...

先思考下面这个问题：默认空div高度是 0，但是一旦里面写上几个文字，div高度就有了，请问这个高度由何而来，或者说是由哪个 CSS 属性决定的？如果仅仅通过表象来确认，估计不少人会认为div高度是由里...

1 引言 1.1 说明本文档以 Airbnb CSS Style Guide 为基础，编写符合自己团队的编码规范；统一了命名和注释两大痛点，就统一了80%的风格，所以我们重点拓展这两部分内容，主体部分请参考基础。 1.2 基...

在所有移动设备默认是正常的，即：长按图片img元素会弹出底部菜单，可以保存当前图片，但有些时候我们会发现并没有反应？ -webkit-touch-callout 一个不规范的属性（unsupported WebKit property），...