用Video播放视频，视频能自适应屏幕大小，但是它的Poster（海报封面）继承了原尺寸比例，无法自动缩放或拉伸，不得技巧的话，很难处理。
Jcrop简介 Jcrop 是一个功能强大的 jQuery 图像裁剪插件，结合后端程序（例如：PHP）可以快速的实现图片裁剪的功能。 Jcrop是一款免费的软件，采用MIT License发布。
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
本文通过介绍如何利用flex和letter-spacing实现过渡动画效果，以及介绍一些实现动画的方式。同时，文章还讨论了如何利用flex实现居中效果，以及如何利用letter-spacing实现宽度改变时字母间距不变的效果。但是，文章也提到了一些缺陷，例如中文和英文的宽度不同，需要使用不同的letter-spacing值，以及动画时间不可控等问题。此外，文章还介绍了一种通过改变容器宽度来实现过渡动画的方法，但是这种方法也存在一些缺陷，例如需要使用will-change属性来减少paint范围等。总的来说，这篇文章提供了一些实现过渡动画效果的技巧，但是需要根据具体情况进行选择。"
有时候会做一些小的宽度变换, 比如居中到居左的变换, 例如上面的搜索的placeholder
盒子模型 的 背景图片尺寸 是通过 background-size 属性 设置的 , 语法如下 :
adminLte默认是全局刷新，也就是不存在frame页面，经过修改，可以很容易实现右边内容框用frame实现页面刷新，这样就不需要整个页面全局刷新，点击相应菜单时，只会刷新frame窗口，但是有一个问题就是frame默认高度只有一丁点，百度之后用了自适应也会有各种问题，比如高度只能拉伸不会缩短，在解决的道路上真的是没有一个完美的解决方案，经过自己研究，发现一个非常简单的方法，那就是用js获取window的innerHeight，代码实现window.innerHeight，然后出去顶部的状态栏，以及空白部分，经过测试，窗口高度减去90是最合适的，也可以根据你自己的情况加减，最后调至一个最完美高度，发现任何分辨率都不会有问题！
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。
要在仿真器下才能看到效果，比如chrome的里边（或者用手机浏览器查看，但测试发现有些浏览器有问题，目前手机猎豹是没问题的）
记住哈，核心来了，兄弟们，四个角那里是不会有效果，算是border-image的盲点把 而黄色部分是有效果的哈，边框将border-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中间的内容区域，，
所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始：
前端的工作是上承设计师，下接后端工程师的。其工作主要有三个方面——html\css\javascript(下简称为JS)；
一、什么是内滚动布局？ 所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始： 传统的页面滚动，基本上是相对于整个浏览器窗体，例如，QQ视频首页： 二、为什么会有内滚动布局？ 随着显示器设备越大越宽越密，以及现代web技术的发展。web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。比方说，QQ音乐的首页目前是这样子的： 以后可能就会变成这样子： “纳尼，这不就是现在的QQ音乐软件界面截图？”
一、什么是内滚动布局？ 所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始： 传统的页面滚动，基本上是相对于整个浏览
来源：子慕大诗人 http://www.cnblogs.com/1wen/p/6839779.html 今天我讲的主题是css，具体聊一下我大概的css学习历史，分享一些干货，希望这次分享对大家有所启发和帮助。 个人的css历史 说说自己的css学习的历史，12年，当时是老师手把手1对1教我div+float的固定布局，所有元素全部用float，做了学生会网站的全部前端页面，因为有段时间学PS比较多，也是自己做的UI，很丑，老师说第一次做成这样很不错了，那时老师就觉得我有做前端的天赋，我就是从这个时候开始接
有些文档写的很难懂，今天硬生生的试验效果试验出来了，用注释总结了下各个样式的效果，因为可以设置方向，所以这里用主轴和侧轴的术语描述，没有使用横向和纵向或者行和列的术语，仅使用换行中行的概念，注意如果主轴是列方向，则换行是横向排列的；还需要注意stretch拉伸元素受行的高度限制，如果盒子中有一行则，高度最大是盒子的高度，如果盒子两行，则stretch 元素高度是所在行其他元素最高的高度：
transition语法格式：transition: property duration timing-function delay;
小包在学习阮一峰大佬的《ES6入门教程》时，对文章顶部的阅读进度功能产生了浓厚的兴趣。小包当时猜想应该是使用 JavaScript 实现的，但最近爱上了浩如烟海的 CSS ，于是小包有个大胆的想法，单纯的 CSS 能实现阅读进度功能吗？
jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高开发效率
1、图片不够大，又background属性不能拉伸图片； 2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用 3、body的background属性去掉，要不然会被遮住
在 flex 弹性布局容器 中 , 通过设置 justify-content 属性 , 可以实现主轴方向上水平居中的效果 ;
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
文/小魔女 本文简介 前端开发系列的第二篇文章 基础知识就像是一把宝剑，能让你驰骋在前端领域的战场 知识亦有温度，让我们对新知识永远保持热度吧 分享小魔女的音乐 html渲染、css解析 在面试中，这部分基础知识，非常常见。 将以最简洁的文字，让读者掌握。 浏览器从开始解析HTML到渲染结束都经历了什么？ 解析HTML文件，创建DOM树 解析CSS，形成CSS对象模型 将CSS与DOM合并，构建渲染树（rendering tree） 布局和绘制 浏览器解析CSS是从左开始还是从右？为什么？
此功能是一个客户定制的，主要是需要在地图上动态显示GPS的运动轨迹，有个应用场景就是一个带有监控的车子，实时在运动中，后台可以接收到经纬度信息，需要绘制对应的轨迹，相当于这些摄像机点位是动态移动的，这样就可以观测到摄像机的实时位置信息，双击摄像机还可以弹出画面实时预览，很直观。
一、在此之前 在之前的文章中，我想大家已经对WebGL有了一个大体的了解，不过为了凑字数，我在这篇文章的开头再稍微回顾一下，如果我们需要使用WebGL来绘制图像需要走完以下这五步： 1、从canvas
这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里（当做背景图）。
添加 padding-bottom后，如上图所示，此时的父元素的高度就是高度最大的子元素的高度，即上面第一个子元素的高度
描述: 好久没更新此《#前端学习之路》专栏文章了，不知道学习前端看友们想不想我，所以这一段时间又开始整理更新了。通过前面几章的学习，相信大家已经对CSS有了一个简单的了解吧，现在我们又回到使用频率较高的 文本 text、图像 images、媒体 media、表单 table 等元素CSS样式的设置，此章节主要讲解针对图像的相关CSS属性以其使用的示例演示。
DDL数据定义语言 TPL事务处理语言 DCL数据控制语言 DML数据操作语言
登录界面其实在大三的时候就有做过，但是当时做的界面超级low，主要区别在于有无css，由于公司的设计要求，对于该界面的很多细节处理实在不容易。所以，还是想要写点东西记录一下。
为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常
这是一个面向编程新手、热爱编程、对开源社区感兴趣 人群的月刊，月刊的内容包括：各种编程语言的项目、让生活变得更美好的工具、书籍、学习笔记、教程等，这些开源项目大多都是非常容易上手，而且非常 Cool。主要是希望大家能动手用起来，加入到开源社区中。
前端爱好者的聚集地 为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点CSS技巧就可以达到这个目的，不需要使用JS。 在正常态时，每个导航的默认样式为： nav li{ opacity: 0.5; } 当前页面的导航透明度为1. 为了实现这个目的： 首先通过bo
CSS3中新出现的多列布局 (multi-column) 是传统 HTML 网页中块状布局模式的有力扩充。
伸缩容器是display的计算值为flex或inline-flex的元素，其流内孩子就是伸缩项（flex item）
随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。
理解 Flexbox 最好的方式是什么？学好基础，再大量练习。这正是我们要在这篇文章中做的事情。
Bootstrap 是由 Twitter 公司开发维护的简洁、直观、强悍的前端开发 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果，让web开发更迅速、简单。
一、最最基本的 CSS顶部, JS底部 YUI compressor/Gzip CDN 有 必要的CSS Sprite Ajax可缓存 以上没什么好说的。 二、CSS渲染、页面重绘以及回流 尽量避免类似.a.b{}.list a{}以及其他一些复杂选择器，以提高整站整体CSS渲染。 避免某些expression表达式，避免IE6的AlphaImageLoader png透明滤镜，可以试试使用fireworks生成png8 alpha透明（目前photoshop只有png8 索引透明）。 适当定高，例如如果d
正常文档流模式下，后面的dom元素覆盖前面的，如果将前面的元素设置了relative将提升它自身的层级
align-self 子项目属性样式 , 可以 设置 某个子项目元素 与 其它子项目 排列方式不同 ;
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> ＜meta name="author" content"郭菊锋,702004176@qq.com"＞ <title>border-radius的兼容写法大全</title> <style> .image{ -webkit-border-image: url(images/news.png) 20/50px
grid-auto-flow属性指定在网格中被自动布局的元素怎样排列。默认值是row，即先行后列。
一旦一个框按照常规流或者是浮动得到定位，它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响： B2在定位时，就好象B1没有发生偏移一样。 B1偏移
前端日常图形借助div 等标签组装 + css 样式就满足日常工作需要，对于动画css 和 一些第三方js 库 提供的案例也可以完成。那么为什么要学canvas ？
例：box-shadow：10px 10px 5px 5px red inset;
在 PC 网站首页，banner 图作为网页中最大的一张图片，在传达网页的的主要信息的同时，也吸引着浏览者的所有注意力，所以 banner 图的展示方式直接影响着用户的体验，今天我们就来聊聊 banner 图如何在不同尺寸的视口中居中显示
EasyNVR是基于RTSP/Onvif协议的视频接入、处理及分发的安防视频云平台，可提供丰富且灵活的视频能力，包括：设备接入、实时视频直播、录像、云存储、录像回放与检索、告警、级联等。平台部署轻快、功能强大，在安防视频监控领域有着广泛的应用场景。
前言 📷 随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。 特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta: 简单事情简单做-宽度自适应 所谓宽度自适应严格来说是一种
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
