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

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

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

我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识. HTML5 step的验证机制可以应用在不支持的浏览器上. 问题引导,威逼利诱 如下一小段含step属性的HTML代码: <input type="number" step="2.1" min="1" /> 在Chrome浏览器下长相…

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4819 一.关于混合模式 熟悉PS的人都应该知道混合模式: SVG以及Canvas中也有混合模式,本质上都是一样的. 下面是一些常见的混合模式的算法: 维基上也有说明.有兴趣可以了解下. 本文内容则简单介绍CSS3出现了两个与混合模式有关的属性,mix-blend-mode和background-blend-mode.…

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

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

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

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

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