10 2018 档案
摘要:box-shadow box-shadow属性支持多个阴影,用逗号分隔 使用inset时,需要同时增加相应的内边距 边框内圆角的实现可以用该属性配合outline来实现,因为box-shadow时贴着圆角的,而outline显示为直角,此方案可能会在以后的提案中不可行 outline 可以实现box
阅读全文
摘要:检测某个样式属性是否被支持,核心思路就是检查element.style对象上检查属性是否存在 如果需要检测某个对应的属性值是否支持,那就将该属性赋给对应的属性值 提供不兼容属性的回退机制,例如: 减少浏览器前缀的使用,应用新的配置开关的方法 提升代码的可维护性 (1)涉及到font-szie属性的地
阅读全文
摘要:direction direction可以改变替换元素或者 inline-block/ inline-table 元素的水平呈现顺序 应用 (1)相同元素不同设备下的展示顺序 (2)...隐藏字符变成隐藏开头 在不支持 text-align:start/end 的浏览器中(如 IE),directi
阅读全文
摘要:outline 用法同border一样 是浏览器默认的 outline 高亮标记,与 focus 状态以及键盘访问关系密切 需要清空输入框元素的outline时,可以使用 但是,必须把 focus 态样式加上 应用 (1)头像裁剪镂空效果 (2)自动填满屏幕剩余空间的应用技巧 cursor curs
阅读全文
摘要:diaplay:none 如果是<img>,则所有浏览器都会请求资源 如果是background-image,则IE会请求,Firefox不会请求,有父元素包裹的且父元素设置display:none的不会请求 display:none并不影响表单提交数据,disabled会影响 H5新增的布尔值属性
阅读全文
摘要:隐藏的元素背景图片是否加载 ie8-ie11还是会发送请求 firefox不会 chrome和safari会判断父元素是否display也是none,如果是,则不发送请求。元素本身设置none,则发送请求 background-position 可以是具体数值,也可以是百分比值,还可以是 left、
阅读全文
摘要::first-letter 生效的前提 (1)display必须是block、inline-block、list-item、tablecell 或者 table-caption (2)字符前面不能有图片或者 inline-block/inline-table 之类的元素 存在 (3)能够被选中的元素
阅读全文
摘要:text-indent 应用 (1)使用 text-indent 负值隐藏文本内容,例如网站标头 (2)使用text-indent的百分比值来实现宽度已知的内联子元素居中 letter-spacing 应用 (1)清除 inline-block 列表由于换行符或者空格产生的空白间隙,使我们的布局控制
阅读全文
摘要:font-variant、font-stretch 和 font-featuresettings专门为英文设计 src 如果是使用系统安装字体, 则使用 local()功能符;如果是使用外链字体,则使用 url()功能符 font-weight:normal 和 font-style:normal,
阅读全文
摘要:[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] font-size 和 font-family 这两个属性需要同时存在 注意 font中如果未声命line-heig
阅读全文
摘要:font-weight:400 == font-weight:normal font-weight:700 == font-weight:bold lighter和border的解析规则 平时使用的300,400,500时没有显著变化的原因,是缺乏对应字重的字体 font-style 在实际开发的
阅读全文
摘要:font-family font-family支持字体族及字体名。如果字体名包含空格,需要使用引号包起来。如'Microsoft Yahei'(无衬线字体) 等宽字体的实践价值 等宽字体利于代码呈现 ch单位与等宽字体布局 和 ch 相关的字符是 0,没 错,就是阿拉伯数字 0。1ch 表示一个 0
阅读全文
摘要:line-height 的数值属性值和 百分比值属性值都是相对于 font-size ex是x字符的高度 em 在 CSS 中,1em 的计算值等同于当前元素所在的 font-size 计算值,可以将 其想象成当前元素中(如果有)汉字的高度 rem root em CSS3单位 ie9上支持 使用s
阅读全文
摘要:z-index影响的是定位元素及flex盒子的孩子元素 层叠优先级 层叠准则 (1)z-index大的在上 (2)同一层级下,后者覆盖前者 层叠上下文 (1)页面根元素是根层叠上下文 (2)对于position为absolute/relative以及firefox下position为fixed的元素
阅读全文
摘要:固定定位元素的包含快是根元素 类似于无依赖的绝对定位,利用无依赖的固定定位也可以在元素内部实现一个fixed定位 可以使用absolute来模拟一个fixed,具体实现是用一个div作为body的子元素,充当滚动容器。但需要谨慎使用
阅读全文
摘要:定位位移相对于自身进行偏移定位 相对定位元素的 left/top/right/bottom 的百分比值是相对于包含块计算的,而不是自身 与绝对定位元素的对立方向不同,top/bottom 同时使 用的时候,bottom 被干掉;left/right 同时使用的时候,right 毙命 最小化影响原则
阅读全文
摘要:特性 (1)块状化,display渲染为block或table (2)文档流破坏性 (3)包裹性 (4)块状格式化上下文,也就是BFC,absolute 的自适应性最大宽度往往不是由父元素决定的 absolute元素包含块和常规元素的差异 (1)边界是 padding box 而不是 content
阅读全文
摘要:float的本质就是为了实现文字环绕效果 特性 (1)包裹性,即父元素的宽度大于子元素的宽度,最终展现的效果为子元素的宽度 (2)块状化并格式化上下文。display变为block或table (3)破坏文档流 (4)没有任何margin合并 text-align对块级元素是无效的 float实现一
阅读全文
摘要:由于是相对字母 x 的下边缘对齐,而中文和部分英文字形的下边缘要低于字母 x 的下边缘,因 此,会给人感觉文字是明显偏下的,一般都会进行调整。 vertical-align属性值 (1)线类 middle ,top,bottom (2)上下标 sub super (3)文本类 text-top te
阅读全文
摘要:字母x的下边缘就是我们的基线 x-height就是小写字母x的高度 vertical-align:middle中的middle指的是基线网上1/2x-height的高度 ex单位 1ex就是一个x的高度。给图标设置1ex就可以让小图标和文本对齐且居中 line-height 对于非替换元素的纯内联元
阅读全文
摘要:boder默认值的medium默认值为3px,是因为border-style:double 要设置3px才会有效果 设置一条边不进行渲染时,用下面的写法渲染性能高: border-color的颜色值在没有设置的时候就是color的值 技巧 (1)设置透明的border来增加点击区域的大小 (2)设置
阅读全文
摘要:margin 元素尺寸:border-box DOM属性里的offsetWidth 和offsetHeight 元素内部尺寸: padding-box DOM属性里的clientWidth 和 clientWidth 元素外部尺寸: margin-box 理解为元素占据的空间尺寸。-margin 元
阅读全文
摘要:内联元素padding是有作用的 设置内联级元素如a的垂直方向的padding,不仅能够增加点击区域的大小,也不会影响到整体的布局 padding的百分比值 padding的百分比值无论是水平方向还是垂直方向,均是相对于宽度计算的 内联元素的垂直Padding会让幽灵元素空白节点显现 小技巧 (1)
阅读全文
摘要:禁用默认行为可以使拖动行为更加流畅,如a标签 块级元素不是指拥有display:block声明的元素 块级元素具有的换行特性,它们都可以使用clear来清除浮动带来的效果 display:inline-block实际上是两个容器,外在容器负责布局,内在容器负责大小 width深入 inline-bl
阅读全文
摘要:content 什么是替换元素 表单元素Input button textarea select img iframe video 替换元素的特点 (1)内容的外观不受页面上的CSS影响 (2)有自己的尺寸 (3)在很多CSS属性上有自己的一套表现规则 替换元素的尺寸计算规则 (1)固有尺寸,及元素
阅读全文
摘要:使用JSDoc /**基础类型*/ /**@type{string} */ /**联合类型 */ /**@type{string | number} */ /**数组类型 */ /**@type{string[]} */ /**@type{Array.<string>} */ /**对象字面量类型
阅读全文
摘要:类不能和其他的类或者变量合并
阅读全文
摘要:可选的模块加载 import id = require("...") 模块里不要使用命名空间模块结构上的危险信号(1)文件的顶层声明是 export namespace Foo {...},删除Foo并把所有内容上移 (2)文件只有一个export class或export function 考虑使
阅读全文
摘要:交叉类型为将两个类型混合 联合类型表示可以是几种类型之一,用 | 分隔 如果一个值是联合类型,那我们只能访问次联合类型的所有类型的公共成员 可以使用typeof检查基础类型和instanceof来详细类型 typescript会把null和undefined区别对待 nul和undefined是所有
阅读全文
摘要:typescript结构化类型系统的基本规则是,如果x要兼容y,那么y至少具有与x相同的属性 忽略额外的参数在js中是很常见的 枚举类型与数字类型兼容,并且数字类型与枚举类型兼容。不同枚举类型是不兼容的 比较两个类类型对象时,只有实例部分会被比较。静态成员和构造函数不在此比较范围 类的私有成员和受保
阅读全文
摘要:/** * 数字枚举 */ //声明,自动增长,第一个元素不声明默认值为0 enum Count{ one=1, two, three, four } //调用 function add(num:number,count:Count){return num+count} add(5,Count.one) /** * 字符串枚举 */ enum Word{ one='o...
阅读全文
摘要:/** * * 泛型的基本表示方法 */ function fn(prop:T):T{ return prop; } //调用 let output=fn('string'); //同样可以利用类型推论来判断类型 let output2=fn('string'); //返回类型为T的数组 function array(prop:T[]) : T[]{ console.log(pr...
阅读全文
摘要:function add(x:number,y:number):number{ return x+y; } let myAdd: (x:number,y:number) =>number =function(x:number,y:number):number{ return x+y; } let myAdd2: (x:number,y:number) =>number = funct...
阅读全文
摘要:接口继承类 接口拥有类的全部属性及方法,但不提供实现,对于private和protected声明的成员,只能被该类自身或其子类继承 派生类必须调用super()来执行基类的构造函数 TypeScript里成员默认声明为public private声明的成员不能再类的外部访问 protected声明的
阅读全文