absolute

在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息，用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具。但是有一个应用领域是目前的CSS无能为力的。 如果我们想随着时间的变化而不断改变某个元素的样式,则只能用JavaScript。JavaScript能够按照预定的时间间隔重复的调用一个函数,而意味着我们可以随着时间的推移而不断改变某个元素的样式。 动画是样式随着时间变化的完美例子之一。简单的说，动画就是让元素的位置随着时间而不断的发生变化。下面来说下使用JavaScript动画,必须要掌握的几个HTML的基本知识: 一、位置 网页元素在浏览器窗口中的位置是一种表示性的信息。因此,位置信息通常使用CSS负责设置的。下面这段CSS代码对某个元素在网页上的位置做了预定: element{ position:absolute; top:50px; left:100px; } position属性的合法值有static、absolute、relative、fixed四种。 1、static是position属性的默认值，意思是有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里。 2、relative的含义与static相似， 区别是postion属性为relative的元素还可以(通过应用float属性

　　最终效果如图一，gif图片稍微有点卡顿，事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单，分别是border-radius、伪元素、css3关键帧以及animation动画。 　　首先整理一下大概的思路：整个圆分为AB两部分，左右都是半圆，上面盖了一个背景色为白色的小圆，如右图，简单布局如下： 　　 <style> .loading{margin:100px auto; width: 8em; height: 8em; position: relative;} .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center; } .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;} .left{ border-radius: 8em 0 0 8em;} .right{ border-radius: 0 8em 8em 0;} .left:after,.right:after

优点 简单，不需要工程，不用puppeteer生成骨架dom，也不需要二次开发维护 定制程度高，想怎么搞就怎么搞 不臃肿，只给你想要的 缺点 自动化程度低，需要在骨架dom上手动添加类 协同要求高，不像工程化能通过工程去约束 思路 通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换 实现 css部分(scss写法) 通过 after 伪元素生成骨架样式，并通过 absolute 覆盖到实际元素上 专门建立的学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） .skt-loading { pointer-events: none; /* 加载中阻止事件 */ .skeleton { position: relative; overflow: hidden; border: none !important; border-radius: 5px; background-color: transparent !important; background-image: none !important; &::after { content: ''; position: absolute; left: 0; top: 0; z-index: 9;

此文章仅为转发，非原创， 原文 http://www.cnblogs.com/zhuanggege/p/5778309.html 请支持原创 display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否浮动显示 float : none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边 浮动的目的： 就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性 任何申明为 float 的元素自动被设置为一个“块级元素” 在标准浏览器中浮动元素脱离了文档流 ，所以浮动元素后的元素会占据浮动元素本来应该所处的位置 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行 文字内容会围绕在浮动元素周围 浮动元素只能浮动至左侧或者右侧 clear 清除浮动 clear : none | left | right | both none：默认值。允许两边都可以有浮动对象 left：不允许左边有浮动对象 right：不允许右边有浮动对象 both：不允许有浮动对象

对于(例如元素div1)position:absolute时，是相对于已定位的最近父元素，如果没有已定位的父元素，则相对于初始包含块（html） 其中这里说的"已定位的父元素"是指position属性为relative,absolute,fixed的元素，如果position的值为static或不存在，则div1则absolute则不相对于该父元素，而是相对于初始包含块。 在一个一个框包含另一个框中， eg: <div class="one"> <div class="two"></div> </div> div.two相对于div.one进行定位， 如果div.two为absolute定位，则不考虑div.one的padding效果。但是会考虑div.two自身的margin效果。 如果div.two为relative定位，是相对与自身进行定位，要考虑div.one的padding效果。 eg:例如 <style> .one { position:relative; margin:auto; width:400px; height:400px; border:2px solid blue; box-sizing:border-box; } .two { margin:20px; top:0px; left:0px; position:absolute; width:200px;

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。 我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。 虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。 1.正方形 #square { width: 100px; height: 100px; background: red; } 2.长方形 #rectangle { width: 200px; height: 100px; background: red; } 3.圆形 #circle { width: 100px; height: 100px; background: red; border-radius: 50% } 4.椭圆形 #oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; } 5

三角形： 通常会使用透明的border模拟出一个三角形：▲ .traingle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellowgreen; } 切角： 采用多重线性渐变实现切角 .notching { width: 40px; height: 40px; padding: 40px; background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left, linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right, linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right, linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } 梯形：

在界面中如何生成头像？ 示例 HTML CSS 示例 HTML < div class = " container " > < div class = " avatar avatar--green " > < div class = " avatar-body body--green " > < div class = " avatar-eye eye--left " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </ div > </ div > < div class = " avatar-eye eye--right " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </

POCO库的一些学习、整理和总结： POCO库的文件操作主要是2个类：Path和File。 PS：不同操作系统中数据代表的数据不同，POCO目前支持Windows、UNIX相关系统和OpenVMS。我只关心UNIX和Windows，还有很多函数一看就知道意思，在这里就不多做解释了。 #include <Poco/Path> #include <Poco/File> 一、 Path由以下几点组成： 1. node name UNIX下，此字段没有意义； 2. device name windows 驱动盘符，比如C盘等； UNIX下，无意义； 3. directory list 4. file name 5. style 操作系统类型 6. Kind absolute或者relative， file或者directory； 二、 路径的表示 1. absolute path（绝对路径） 2. relative path（相对路径） 注：2种路径方式可以互相转换。 三、 例子 --------------------------- Path: C:\Windows\system32\cmd.exe Style: Windows Kind: absolute, to file Node Name: – Device Name: C Directory List: Windows,