摘要: background-clip允许你控制背景图片或颜色延伸到一个元素的内间距(padding)或内容(content)之外的距离。 值 border-box是默认值。它允许背景一直延伸到元素边框(border)的外边缘。 padding-box 在元素内间距(padding)的外边缘处剪切背景,并且 阅读全文
posted @ 2019-08-27 18:21 请叫我二狗哥 阅读(603) 评论(0) 推荐(0)
摘要: CSS中background-size属性是background属性中最有用同时也是最复杂的属性。你可以用该属性使用很多变种和不同语法,所有这些都有不同的用例。下面是一个基本的例子: 这是background-size双值语法的一个示例。你可以使用该属性四种不同的语法:关键字语法、单值语法、双值语法 阅读全文
posted @ 2019-08-26 11:26 请叫我二狗哥 阅读(356) 评论(0) 推荐(0)
摘要: 在CSS中background-attachment属性指定相对视口如何移动背景。 有三个值:scroll、fixed和local。解释它们区别最好的方式就是通过演示(尝试滚动单个背景): 当谈及background-attachment时需要考虑两种不同的观点:主视图(浏览器窗口)和局域视图(你可 阅读全文
posted @ 2019-08-23 17:02 请叫我二狗哥 阅读(529) 评论(0) 推荐(0)
摘要: 在CSS中background-position属性允许您在其容器内移动背景图片(或渐变)。 它有三种不同类型的值: 长度值(例如 100px 5px) 百分比(例如 100% 5%) 关键字(例如 top right) 默认值是0 0。它会将背景图片置于容器左上角。 长度值非常简单:第一个值是水平 阅读全文
posted @ 2019-08-22 15:59 请叫我二狗哥 阅读(236) 评论(0) 推荐(0)
摘要: calc() 函数支持任意CSS长度单位的混合计算,遵循标准数学运算优先级规则,可以动态计算长度值。注意,calc()函数内部的运算符两侧各加一个空白符,否则会产生解析错误。 calc()使用的难点在于百分比,理解了百分比定位,使用calc()就非常便捷。譬如以background-position 阅读全文
posted @ 2019-08-21 12:55 请叫我二狗哥 阅读(273) 评论(0) 推荐(0)
摘要: W3C中伪类和伪元素的官方定义文档: In CSS 2, style is normally attached to an element based on its position in the document tree. This simple model is sufficient for 阅读全文
posted @ 2019-08-20 12:39 请叫我二狗哥 阅读(187) 评论(0) 推荐(0)
摘要: 绝对行为元素是以相对定位元素的border内边缘为基准进行定位的。 阅读全文
posted @ 2019-08-19 13:59 请叫我二狗哥 阅读(528) 评论(0) 推荐(0)
摘要: 当元素内容区域大于容器区域,就会出现溢出现象。通常这种溢出并非是原本页面设计的排版效果,需要进行代码优化。通过对容器设置滚动条就是最常见的处理方式。 复合属性语法: overflow:scroll;//=>水平、垂直方向均添加滚动条 单一属性: overflow-x:scroll;//=>水平方向添 阅读全文
posted @ 2019-08-19 12:38 请叫我二狗哥 阅读(1358) 评论(0) 推荐(0)
摘要: 行内元素 display属性为inline的元素为行内元素。行内元素只占它对应标签的边框所包含的空间。 格式:默认情况下,行内元素不会以新行开始,而块级元素会新起一行。 内容:一般情况下,行内元素只能包含数据和其他行内元素。 默认状态下为行内元素的元素: b, big, i, small, tt a 阅读全文
posted @ 2019-08-16 11:29 请叫我二狗哥 阅读(2026) 评论(0) 推荐(0)
摘要: 通过JS判断当前浏览器的类型,对主流浏览器Chrome、Edge、Firefox、UC浏览器、QQ浏览器、360浏览器、搜狗浏览器的userAgent属性值来判断用户使用的是什么浏览器。 不同浏览器的userAgent值 chrome浏览器 Mozilla/5.0 (Windows NT 10.0; 阅读全文
posted @ 2019-08-15 16:41 请叫我二狗哥 阅读(772) 评论(0) 推荐(0)
摘要: window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。 目前主流浏览器均支持getComput 阅读全文
posted @ 2019-08-15 14:23 请叫我二狗哥 阅读(451) 评论(0) 推荐(0)
摘要: javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减小至200px。 效果图: 参考代码: 阅读全文
posted @ 2019-08-12 12:54 请叫我二狗哥 阅读(169) 评论(0) 推荐(0)
摘要: 任务描述: 当鼠标移入“透明度”矩形时,该矩形透明度逐渐增加至不透明,移出该矩形,透明度逐渐恢复至初始值;同时该运动框架可以支持其它属性的变化。 示例图 参考代码: 阅读全文
posted @ 2019-08-09 17:08 请叫我二狗哥 阅读(163) 评论(0) 推荐(0)
摘要: 任务描述: 当鼠标移入“变宽”矩形时,该矩形宽度逐渐增加至400px,移出该矩形,宽度逐渐恢复至初始值;当鼠标移入“变高”矩形时,该矩形高度逐渐增加至400px,移出该矩形,高度逐渐恢复至初始值。 效果图: 参考代码: 阅读全文
posted @ 2019-08-09 15:01 请叫我二狗哥 阅读(270) 评论(0) 推荐(0)
摘要: HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度。一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话 阅读全文
posted @ 2019-08-09 13:27 请叫我二狗哥 阅读(630) 评论(0) 推荐(0)
摘要: javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度。 效果图: 参考代码: 阅读全文
posted @ 2019-08-09 11:09 请叫我二狗哥 阅读(189) 评论(0) 推荐(0)
摘要: .和[] javaScript.和[]既可以对所有js对象设置属性,但是对于DOM对象它设置的属性有些特殊。对于元素DOM标准属性,实现属性值的设置/更改;对于元素DOM非标准属性,仅在js中有效,在(标准浏览器中)HTML中无效。 setAttribute() 设置指定元素上的某个属性值。如果属性 阅读全文
posted @ 2019-08-08 13:15 请叫我二狗哥 阅读(1084) 评论(0) 推荐(1)
摘要: 任务 对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px。 任务提示: (1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器,避免多定时器干扰。 (2)每个物体都要有单独的定时器,避免公用定时器导致相互掣肘。 参考代码 阅读全文
posted @ 2019-08-07 17:34 请叫我二狗哥 阅读(143) 评论(0) 推荐(0)
摘要: JS缓冲运动案例:右侧居中悬浮窗 参考案例 阅读全文
posted @ 2019-08-01 18:29 请叫我二狗哥 阅读(285) 评论(0) 推荐(0)
摘要: JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留。 参考代码: 阅读全文
posted @ 2019-08-01 18:12 请叫我二狗哥 阅读(383) 评论(0) 推荐(0)