TyrionJ的博客

背景 在前端页面开发中，UI会提供@2x，@3x等二倍三倍不同尺寸的图，对于刚刚接触前端或者移动端开发的前端er可能会有些不是太明白。在实际开发中可能还会遇到以下情况：ui提供的网页设计图中一个input框是80px（尺寸为举例），前端er在代码中按照80px高度还原在网页上发现输入框的尺寸太高，这些问题的产生式因为UI和前端er在“像素”这个问题上不同的理解而造成的，下面就详细说说“像素

在学习css模块化时看到了BEM概念，谷歌简单了解了下BEM. BEM是block,element,modifier三个单词的缩写，这里的block和css块级元素block概念完全不同。 BEM为大型项目中CSS开发和维护提供了方便，在多人开发的项目中，采用BEM规范书写css能增加代码的阅读性和可维护性。

前面就介绍了使用CSS3的transition属性实现一些属性过渡的动画效果。虽然tranition在一定的时间内可以实现元素的初始状态在指定的事件范围内过渡到最终状态，模拟一种过渡动画效果，但功能有限，通过CSS3animation属性可以像flash制作动画一样，通过关键帧控制动画的每一步，实现更为复杂的动画效果。1.动画简介1.1 步骤通过关键帧来声明一个动画在animation属性中调用

CSS3 过渡使前端开发人员通过CSS和JHTML来实现动画效果，而不需要借助Flash或者JavaScript。可以通过：hover，：focus，：active，：checkded，或者JavaScript触发一个元素，使用过渡会使样式的变化更加细腻，而不会突兀，用户体验更好。1.CSS3过渡简介 CSS3的transition允许CSS属性值在一定的时间区间内平滑过渡。这种效果可以再鼠标点击

WEB设计师借助CSS3可以轻松实现倾斜，缩放，移动及翻转元素1.变形简介CSS3变形时一些效果的集合，比如平移、旋转以及缩放效果，每个效果都称为变形函数（Transform Function），在CSS没有变形之前，这些效果需要依赖图片、Flash或JavaScript才能实现。而使用纯CSS来完成这些变形无须加载这些额外的文件，再一次提升了开发效率，提高了页面执行效率。CSS变形属性及函数CSS

1.网页中的色彩特性1.1 在web网页上，显示器中看到的色彩会随着显示器环境变化而变化，特别是在web页面这个特殊环境之下。1.1.1 网页色彩的表现原理 web安全颜色有256种，具体指8位颜色的表现能力，随着科技的发展，颜色有了16位，32位。如果用两台品牌型号都一样的显示器，分别调16位和32位颜色，就能看出在网页上颜色区别。在web页面的设计中，颜色主要用16进制表示法。

在项目中前端er会遇到这种需求，页脚固定，这个固定指的是当内容较少时，页脚固定在浏览器底部（这种情况我们会考虑position:fixed），当内容足够多，浏览器视口高度小于内容高度时,页脚固定资页面内容页面的底部（这时会发现position:fixed满足不了需求）。content内容较少//html<header> I am header</header><div class="conten

宽高相等的图片在需求中是常见的，比如外卖网站食物详情页食品详情的照片一般都是宽高相等的图片，那么如何达到这种效果呢（即使图片原本不是宽高相等的）。一段css代码解决需求。html<div class="wrapper"> <img src="XXX.jpg"></div>CSS.wrapper { position: relative; width: 100%;

CSS浮动会对原本的布局产生破坏，所以我们会考虑清除浮动产生的影响，本文不谈浮动以及各种清除浮动的方法，只讨论clearfix类和clear清除浮动。 在网页设计中，很常见的一种情况是给内容一个div作为包裹容器，而这个包裹容器不设置高度，而是让里面的内容撑开包裹容器的高度。<div　class="wrapper" > <div class="content"> </div></

项目中用到可下拉选择可输入框，于是自然想到element-ui的select组件。当select组件的下拉选项不满足要求时用户可以输入自己需要的选项。那么问题来了。在某种特殊的情况下，输入的文本过长，而select组件的宽度是固定的（从页面美观的角度基本不允许文本框宽度自适应），这样输入的文本会溢出select组件。 接下来我们分两步来解决这个问题。1）CSS控制宽度,给输入项一个固定的宽度...