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

支持负值的属性: 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…

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

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

[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:…

一.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:整数值;(…

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…

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

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

前言 最近在慕课网上跟着张鑫旭大神重新学习一遍CSS相关的知识,以下是学习的笔记以及个人一些理解 relative对绝对定位的限制 1.限制绝对定位 绝对定位的top.left.right和bottom是相对最近的一个relative父元素的. 2.限制层级 绝对定位的层级优先级是低于其父元素相对定位的层级的 3.限制overflow 绝对定位可以不受父容器overflow的影响,即可以溢出,但是父元素加上relative后,即可以完美包裹绝对定位元素. relative自身定位 1 相对自身…

一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过往的做法 关于如何处理网站的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的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能.…

CSS代码: .typing { width: 15em; white-space: nowrap; border-right: 2px solid transparent; animation: typing .5s steps(, end), blink-caret .75s step-end infinite; overflow: hidden; } /* 打印效果 */ @keyframes typing { ; } to { width: 15em; } } /* 光标闪啊闪 */ @…

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名均为化名,有加工): 如月姑娘(本届D2上微博中奖上台最漂亮的那位)的内部分享会——关于CSS3 backgrou…

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的可用性 我们平时因为A原因或B原因,需要复制web页面上的文字内容.常见的操作就是按住鼠标,选中要复制的文字区域,抬起鼠标按键,目标区域的文字就选中了. 不知你知不知道,有些看山去OK的CSS布局实际影响了页面上文字复制的可用性. 这么说吧,假设你在微博上看见一个名为“屌丝逆袭”的标题,但是,由于孤…

一.关于类选择器的一个问题 假设有下面一个面试题,CSS代码如下: .red { color: red; } .green { color: green; } HTML如下: <div class="red"><div class="green"><p>1. 颜色是?</p></div></div> <div class="green"><div class…

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

前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着不俗身世,但无形中会影响他人的凡人. 二.故事继续 系列一中讲了浮动和绝对定位两位魔鬼兄弟之间的感人故事,那相对定位和绝对定位之间又有怎样的故事呢?//zxx:对微小说没有兴趣的可以直接跳到下一段 话说那个CSS即将开启的时代,浮动和绝对定位的父亲“浮绝大魔王”因为过于强大,有碍和谐,于是其他神界属…

一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则,即“无宽度”.“无图片”和“无浮动”,目的是使CSS布局模块化以及增强可扩展性. 此准则是针对我个人的,可能没有什么适用性,也可能会对您的学习有所启发,所以这里还是简单分享下.其中“无宽度”准则则在去年秋天专门讲了下,文章名是“页面重构鑫三无准则之无宽度准则”,这里再简单介绍下其中的“无图片”…

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

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 之前曾作有“页面重构鑫三无准则之无宽度准则”一文,属于流体布局系列中的偏理论性的文章,本文也是这种性质的,可谓是“无宽度准则”一文的延续. “无宽度准则”是说内部元素不要定宽,但是,除非你的页面是像google的产品页面一样都是100%自适应的,那么页面的终归会有一个固定的宽度值,一般出现在页面的…

一.叨点什么 写文章的时候经常用到一些CSS方面的专业词汇.但是毕竟芳华年少不在,脑袋有点秀逗了,很多名词都记不住,这种感觉比厕所便秘还难受.比如今天居然记不起来公司公认脸蛋最pp的同事的名字,没想到我会记不住美女的名字.我觉得我背后一阵萧瑟的秋风吹起,自己俨然成了漫画里面的程序猿—— 某天闲逛到nimbupani,发现有专门展示CSS术语的文章,哇咔咔,感觉好像咬到一口正宗的高邮咸鸭蛋一样,不过人家的是英文,所以我还要本地化润饰处理,然后,就可以留给自己备忘的哈,的说. 二.CSS词汇我来也…

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

从今天开始跟着大牛张鑫旭的步伐,每天进步一点点 问题:IE6不支持png背景透明或半透明 一.可解决的方法 补充:css滤镜主要是用来实现图像的各种特殊效果.(了解) css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同.css滤镜可分为基本滤镜和高级滤镜两种.css滤镜分类 CSS滤镜 可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜.而要配合JavaScript等脚本语言,能产生更多变幻效果的则称为高级滤镜. 只有IE可以完全的支持滤镜,Firefox支持部分,其他内…

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1855 补充于2016-01-03本文内容仅属于z-index表现层一些皮毛内容,不过一些经验观点还是很有指导意义的. 一.海边拾贝 z-index属性目前只有在position:relative.position:absolute和position:fixed参与的情况下才有作用,表示层级,类似photoshop中层级…

图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=804 一.写此插件的缘由 在现在的web应用中,对上传的图片,例如头像,原始的摄影照片常常需要在web页面上进行一些处理,常见的处理就是剪裁与旋转. 对于剪裁,我之前曾翻译过一个jQuery插件,JCrop插件,…