css

CSS像素(css piel)及像素单位 例如p pt em

小序最近在做pc端、微信端、移动端app,公司的每个项目分别都有这三者,在pc端调试页面,像素显示都和预期效果的一样,可是,微信页面和手机页面却天差地别,在goole里调试得好好的,结果,真机看效果,用同事们的手机有不同的显示效果,于是,对于像素单位有了兴趣,近来,根据自己查到的资料,做一个总结。像素(pixel)概念一般而言,pixel(像素)是图像的基本采样单位。详细解

CSS行高(line-height)及文本垂直居中原理

在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: Document div { width: 300px; height: 200px; border: 1px solid red; } sp

阐述在Yii2上实现跳转提示页

序言为了让用户有更加良好的体验,在操作成功或者失败后,来个提示并跳转页面,我就在Yii2上实现了这一个效果。在写这个跳转提示页的时候,找资料我发现网上关于这方面的中文资料真的很少,大家也都共享下吧!需求分析1、用户在操作成功或者失败后,来个提示并跳转页面。2、使用这种方式$this->success(),$this->error()调用(仿造Yii2自带 $this->re

解决你的前端面试

Github 专栏原文地址:这里有时候前端的技术性面试还是很麻烦的,毕竟知识点那么多,框架迭代那么快。你不仅仅要对计算机科学基础有一个坚实的底子,还需要理解啥Web性能、构建系统以及CSS引擎等等。现在确实也有不少的相关面试的资源,(译者推荐Front-end-Developer-Interview-Questions:H5BP出品的一系列的前端问题,不过感觉有点杂而老),

css 不规整元素的宽高等比例

不规整元素的宽高等比例在不同屏幕情况中不同宽高的元素都以相同等比例、等宽和等高方式展示。需求设计师希望页面的图片区域,以宽高为2:1比例且所有图片的等宽和等高的方式展示。小加同学觉得设计师这需求太容易,分分钟搞定,拿到图片后便开始刷刷的撸代码。原型设计稿大致如下:初版思路每个图片区域宽度为父元素宽度的25%,图片的宽度设置100%,其高度根据宽度等比例自动缩放(小加以为图片

想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC

视觉格式化模型页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子。哪些因素控制了这些布局盒的尺寸和类型定位体系 Positioning Scheme (常规流,浮动和绝对定位)文档树中元素之间的关系外部信息(如:视口大小,图片的固有尺寸等)下文讲针对性的解释这些影

Thinking in Frontend Conventions

前端规范在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。JavascriptJavascript规范直接参考airbnb:ES6 JavaScript Style GuideES5 JavaScript Style GuideReact/JSX Style GuideCSSBEMBlock Element Mo

前端开发小技巧(来自知乎)

1.You Might Not Need jQuery不用jQuery,原生js如何实现,可以参考这里:You Might Not Need jQuery 。原生js越来越好了,如果是简单的页面,没必要引入一个庞大的jQuery,尤其在手机端,对速度流量敏感的地方,另外最好自己简单封装一些常用的函数,比如toggleClass等。。。2.Firefox查看源代码功能检查页面

css 迷惑的position

迷惑的position小加发现实际开发中position使用频率很高,但很多人却对position不是很了解,导致开发中出现各种问题,现在让我门一起来看看这个迷惑的position吧~static元素未定位,默认出现在普通流中,即元素从左到右,从上到下的方式布局~HTMLStatic - 普通流 header box left box right box

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。那就没意思了。[br]有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了。这次写的详细一点,把各个部位都拆出来分析。GitHub传送门:https://github.com/lancer07/css3Ul