CSS的可视化格式模型中具有一个非常重要地位的概念??定位方案。定位方案用以控制元素的布局，在CSS2.1中，有三种定位方案??普通流、浮动和绝对定位： 普通流：元素按照先后位置自上而下布局，inline元素水平排列，直到行被占满后换行，block元素则被渲染为完整的一行，除非指定，所有元素默认为普通流定位。 浮动：浮动布局中，元素首先按照普通流位置出现，然后根据浮动方向尽可能向左或右偏移，效果与文本环绕相似。 ...
在写h5页面中，我们可能经常遇到要写很多css3动画，有没有同学遇到多个物件同样的动画效果，循环保存步调一致呢，我就经常碰到，之前一直不知道其中的原理，只是简单的迁移改改，可是遇到稍微复杂多一点的就hold不住了，只能硬着头皮去分析其中的原理。那么接下来，让我们先看看案例，然后了解之中的原理 css3动画循环案例 案例一：loading动画效果 html代码： css样式: .spinner { ma...
CSS Spirte就是所谓的把很多的小图标合并成一张大的图片，然后使用CSS的background-position属性，来动态的定位自己需要图标的位置。这样做的目的主要是减少HTTP请求，加快网页的加载速度。 图片 需要的结果： 多余的话就不多说了具体的实现都已经写在了代码中，并且对于重点都进行了注释。如果有问题可以留言哈！ css_spirte div ul{ margin:0;padding:0;} #body_father ul { list-style...
我们一直认为的border，大概是如下所示： .border { width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; } 效果如下： 然而，当我们增大border的值时，会看到如下效果 .border { width:50px; height:50px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; } 看到的效果如下所示： 我们会发现边框成为了一个梯形。 如果我们将宽高设...
为什么要记录一下？因为今天我要设置一个字符加粗，然后就用font-weight:200,没有任何效果。现在看来很可笑，400才相当于normal，200怎么加粗，奇怪的是也没有变细。所以得研究一下font-weight的工作原理，以下正文。 一、使用介绍 font-weight设置文本的粗细，文本粗细设置属于一种比较复杂的字体样式定义，之所以说它复杂，是因为字体本身粗细变化千变万化，没有统一标准，对于字体粗细的具体定义也各不相同。 属性值：norma...
原文 http://ymblog.net/2015/06/20/css3圆形百分比进度条的实现原理/ 今天早上起来在查看jquery插件机制的时候，一不小心点进了css3圆形百分比进度条的相关文章，于是一发不可收拾，开始折腾了。。。 关于圆形圈的实现，想必用2个圆心相同，半径不同的div即可实现。大圆的颜色即为圆形进度条的底色，小圆的颜色即为中间百分比的遮罩颜色白色， 还要加上左右2边一边一个半圆，也就是说总共应该有4个div，一个大圆...
今天帮别人调代码时，看到一个样式： background-position: 50% 0;background-size: 100% auto； 对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详情可见css3 background。 对background-position很自然的以为百分比是根据父元素宽度计算的，但background-position真的不是，它有一套自己的原理。下面详细介绍。 一、等价写法 在看各类教程时有以下等价写法： top left, left ...
现在有一个窗口绝对定位position:absolute;，设置css样式left: 0;right: 0;，可以实现窗口的宽度百分之百(100%)。 这时候，没有给窗口设置顶部top:0;，默认情况下窗口顶部为零，或者也可以说，默认情况下，窗口跟随着上一个窗口的底部bottom:0;。 如果上一个窗口是浏览器的边框，那么当前窗口就会紧贴着上一个窗口的边框，也就是浏览器的边框。 总结以上概述，当我们绝对定位一个窗口，设置窗口的左(left)右(right)都为零， 相...
前言： 在写这篇文章之前，我也看过很多前端大神写的代码，But，都只是粘贴代码和给出显示效果，#8;对于初学者来说大家都喜欢刨根问底，为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解： border边框语法： border 四条边框设置 border-left 设置左边框，一般单独设置左边框样式使用 border-right 设置右边框，一般单独设置右边框样式使用 border-top 设置上边框，一般单独设置上边框样...
现在的网站有的时候为了简洁就是很多的单页滑屏滚动介绍，主要呈现方式有两种，一种是整体的元素一直排列下去，假设有五个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行Y轴定位，也可以通过margin-top实现，第二种就是所有的子元素和页面一样，都显示在当前页面，简单的实现第一种页面。 Html代码: 第一页 博客园-FlyElephant ...
浏览器工作大致流程 废话少说，先来看个图： 从上面这个图中，我们可以看到那么几个事： 1）浏览器会解析三个东西： 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree ...
入驻博客园两个月之后的第一篇随笔，希望能够做到三个原则： One：不浪费自己的时间， Tow：不浪费读者的时间， 第三就是希望有缘的朋友们多多指教，共度前端快乐的大坑！！！ 咱们今天来做一个居家旅行必备的小tips，展现前端老前辈的智慧，积淀的文化... 先来一个小口诀【呆会会用到的，不用着急记住它哦】 四方小三角（上，下，左，右） 尖角反方线，给颜色 /*设置边线*/ 两边夹角线成...
效果图如 图1所示：（简单示范，有点丑，莫介意） PS:兼容IE，FF , chrome ,360安全浏览器 先讲下原理吧，如 图2所示： 这个div的样式如下所示： div{ width: 0px; height: 0px; border-width: 20px; border-style: solid; border-color: lightgreen pink yellow lightblue;} 解释...
http://zxgt.cn/game/home_hxxy2 如上 这个网站 就像当时3Gqq的文字游戏 请问这个除了html主要使用什么语言开发的 求教简单实现思路 回复讨论(解决方案) php就可以实现 需要用到以下几项，使用Ajax读取数据就行 一个简单的 HTML 表单 一段 JavaScript 一张 PHP 页面 都用ajax能保证效率吗 减少所使用的 Ajax 请求的数量，效率问题能很好的解决，网上有很多Ja...
这只是一个学习摘要！这只是一个学习摘要！这只是一个学习摘要！重要的事情说三遍，以下内容均来自网络，如有雷同，算我抄你的 :）“学习浏览器的内部工作原理将有助于您作出更明智的决策，并理解那些最佳开发实践的个中缘由。” ---Paul Irish 简介 一、浏览器的主要功能 浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或...