一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一些3D效果的交互.有些事情,总以为是遥远的未来,谁知真正发生的时候说来就来,比如说一颗想结婚的心,又比方说在实际项目中折腾3D transform效果. 然而,虽然以前折腾过3D变换效果(webkit

https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮动的包裹与破坏 包裹 收缩 坚挺 隔绝 - BFC 具有包裹的其他属性:(是不是可以生成块级上下文的其他属性?) display: inline-block.table-cell... position: absolute(近亲).fixed.sticky overflow: hidden.scro

一.技术不难.意识很难 有些东西的东西的实现,难的不是原料.技术:而是想不到,或者说意识不到. 例如下面这个简单而又神奇的魔术: 是吧.搞通了,才发现,哦~原来这么回事,很简单的嘛,我也可以实现的!其实,简单吗?不简单,很难,难在你想不到这个魔术idea, 虽然看上去实现很简单. 同样的,在CSS布局的世界里,也有类似的情况.有些东西并不是实现有多难,而是想不到.意识不到. 记住,重要的是意识. 二.简单的开胃菜-装饰元素可缺省 花里胡哨的东西在靠谱的网站已不常见,因此,要找个很纯粹的装饰性元素

一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是大家全神贯注思考的18分钟 ———————— ……思考结束 三.问题引导 针对不同浏览器实现类似的效果,我们可能都会想到CSS hack这个东西,让不同的浏览器下引用不同的CSS属性或是不同的CSS属性值. 于是要实现上图所示的效果,我们可能会将CSS代码分成两块,一块针对IE6~8,另外一块针对I

支持负值的属性: margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertical-align垂直对齐的位置与行高line-height没有关系.vertical-align垂直对齐的位置只与font-size大小有关. 一.vertical-align支持的属性值及组成: 1.支持继承: inherit 继承 2.其他四类属性值:a. 线类: baseline(vertic

一.line-height line-height: 指两行文字基线之间的距离. 行高200px表示两行文字基线之间的距离是200px: 二.基线:baseline 字母x下边缘的位置 基线是任意线定义的根本(底线,中线,顶线,文本上边缘线,文本下边缘线等) 不同语言体系,基线位置不一样. 相同语言的不同字体,基线位置也不一样 三.行高让单行文本垂直居中 并不是真的垂直居中!!只有字体大小为0的时候,才能真正的垂直居中. 四.行内框盒子模型 1. 内容区域(content area) 围绕文字看

一.z-index语法.支持的属性值等 z-index: 在支持z-index的元素上, z-index规定了元素(包括子元素)的垂直z方向的层级顺序, z-index可以决定哪个元素覆盖在哪个元素上边.(这个学过ps的,想象一下图层的概念,z-index就像是调整图层的上下顺序.) z-index在css2.1中需要和定位元素(position为relative.absolute.fixed.sticky等这些)配合使用才有作用. 属性值 z-index:auto; z-index:整数值;(

overflow基本属性值 visible(默认值):超出依然显示 hidden :超出隐藏 scroll :超出,滚动显示.子元素不超出也会有滚动条的那条轨道. auto:如果超出,滚动显示.如果不超出,也不会有滚动条的位置. inherit:ie8+,继承父元素的overflow属性值. overflow-x/y(ie8+)规范: 如果overflow-x.overflow-y的值相同,则等同于overflow设置了这个值. 如果overflow-x.overflow-y的值不相同,且其中一

relative地址 relative 对 absolute的限制作用 限制left/top/right/bottom(方位值)定位 限制描述:absolute设置了方位值时,这些方位值是相对于position不为static的最近的父元素来定位的.如果父元素设置了relative,方位值就会相对于这个父元素,所以说relative限制absolute的方位值目标对象. 限制z-index层级 限制描述: 父元素没有relative的时候,绝对定位元素的z-index值越大,则层级越高. 但是如

absolute地址 absolute绝对定位 绝对定位与浮动鲜为人知的兄弟关系 即是说,absolute后,元素和浮动元素的特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在凡间. 所以,absolute元素的特性: 包裹性 容器使用absolute后,就形成一个inline-block包裹了内部元素,具有包裹性. 破坏性 子元素绝对定位,脱离父元素文档流,父元素高度塌陷. 这俩特性和float是一模一样的,所以说其兄弟关系. absolute和relative的关系

border地址 border特性: 能形成BFC但是不能清除浮动.但是bfc也是把子元素的margin包裹进来,但是拿自己的margin穿透没办法的. 边框宽度不支持百分比 透明border可以突破可视区域的限制 border-style:double巧用 double可以利用来配合border-style:solid制作三条杠小icon 具体代码见下边 border-style:dotted来做圆 <h3>原理:border-style:dotted在ie中是圆点,在其他浏览器是小方点&l

[padding地址](https://www.imooc.com/learn/710) 一.padding与容器尺寸之间的关系 padding会影响元素的尺寸(通常情况下是通过增加/挤压内容区域) padding对于block元素的表现 1.没宽度设置的情况:垂直方向向外扩张,水平方向向内挤压. 上下padding会增加元素占据的尺寸(即看上去高度在增加), 左右因为元素宽度已经auto,不会变化.但是内容区域会在水平方向上被挤压. 2.不管有没有高度设置:垂直方向的向外扩张 也不会挤压垂直方

margin - 人若犯我,我必犯人! [margin地址](https://www.imooc.com/learn/680) 一.margin与容器尺寸的关系 relative可定位,但是不改变容器尺寸和占据的空间margin不同,margin也在盒模型中.从border开始往里边,是可视尺寸clientWidth部分.加上margin,是占据尺寸outerWidthmargin可以改变元素尺寸,正值宽度变小,负值宽度变大.margin也可以定位 二.margin的百分比单位 margin:

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵)”的时候,难免会心生畏惧(即使你已经学过),正常心理.实际上,这玩意确实有点复杂. 然而,这却是屌丝逆袭的一个好机

一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolut

一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻转*/ .flipy

本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en"> <head> <meta charset="UT

一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过往的做法 关于如何处理网站的CSS,各个网站做法都不一样,这随着网站的性质及大小不同,公司前人留下的规范不同,以及CSS工程师的眼界不同而有所不同.由于我从业经历有限,所知甚浅,只能说些肤浅业余的内容,不准确之处欢迎指出. 就CSS文件而言,有的网站分为header.css, body.css, f

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: 最近很积极地折腾手机页面的些东西,加上其他一些人生重要的事,所以木有更新. 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的.不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能.