【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://developer.aliyun.com/article/1440721
出自【 进步*于辰的博客】
1、细节锦集
div~div
表示选中前div后的所有同级div;- 内联元素(
inline
)无法设置上、下外边距。故margin: 0 auto
无效,同样对行内块元素(inline-block
)无效; - 在不作为字体的情况下,单一显示字符,如:
<
,需使用字符实体 \color{green}{字符实体}字符实体,格式:& + 实体名/实体号 + 分号
。如:空格:;
; - 若一串字符由汉字、特殊字符、空格等组成,会自动换行;若仅包含数字、字母,且无空格,则视为单词,不换行;
实现本页面跳转:
href = "#id"
(id 是盒子id
);- js语句的优先级等同于行内式;
- 去除输入框被选中时的选中框:
outline: none
; - 滚动条:
overflow: scroll
; transform
会覆盖,即当设置多个transform
时,只有最后一个有效。其中,rotate
会改变坐标轴方向;- 定义动画时,所有位移、旋转、缩放等都相对于起始点;
- 修改网页标题 logo:
;
- 使用伪选择器创建的盒子属子级;
- H5之前,form 表单必须嵌套。H5中 form 表单不嵌套的方法:为设置 id,并指定
的属性
form
为此 id; box-sizing
样式表示是否将边框包含在width/height
之内。取值:1、content-box
表示不包含;2、border-box
表示包含;3、inherit
表示继承父级box-sizing
;- 设置
的
href
为函数名,可实现点击链接调用函数(前端框架普遍也如此定义); - 一般情况下,表单提交时正则校验最好只设置一次,因为连续校验可能出错;
2、关于定位
- 相对定位(
relative
)的参照对象是自身; - 绝对定位(
absolute
)的参照对象是父级。
先检查父级标签是否设置定位方式(无论何种定位)。若有,则参照父级标签;否则,再检查父父级标签是否设置定位方式。依次类推。若都没有设置,则参照网页(指html/body
标签,具体不确定,而结果相差不大)。
4、关于层级
z-index
可设置层级,前提是已设置定位方式,且若是相对定位,层级会增加;- 盒子层级默认为
0
,若是将层级设置为负数,在不改变层级的情况下,盒子将不能操作; - 层级会继承;
- 盒子的层级取决于这个盒子所在“家族”、已设置层级且“辈分”最大的盒子,其后代无法再修改层级(的确仍可以设置
z-index
,但无意义); - 当层级相同时,后面的盒子比前面的盒子高(指距离我们眼睛越近);
- 定位不会改变层级,在第1点中说:“相对定位会增加层级”其实说的是第5点。若盒子设置为相对定位,则看起来此盒子会更高,而实际上层级未变;
5、全局标签属性
参考笔记一,P6.13。
- 设置
<table>
可编辑:contented:table = "true"
; hidden
:隐藏标签,不占据空间。若要去除隐藏,需去掉 hidden,修改值无用;spellcheck = "true"
属性用于设置**可编辑**(第1点)的input[type = text]
、<textArea>
或*编辑类* 标签进行拼写检查。
7、功能:滚轮控制(jq)
参考笔记一,P13.5/6。
实现思路:通过动画修改 scrollTop
(滚动高度。“滚动高度”就是盒子的高度,即样式 top
)。注: scrollTop
不是样式。
示例。
var footTop=parseInt($("footer").offset().top); var se2Top=parseInt($("#section2").offset().top); var se3Top=parseInt($("#section3").offset().top); var se4Top=parseInt($("#section4").offset().top); $(window).scroll(function(){ var sTop; if($("html").scrollTop()!=0&&$("body").scrollTop()!=0){ sTop=$("html,body").scrollTop() }else if($("html").scrollTop()==0){ sTop=$("body").scrollTop() }else{ sTop=$("html").scrollTop() } if(sTop>=se4Top){ $("#scroll>li").eq(3).css("background","white").siblings().css("background","none") }else if(sTop>=se3Top){ $("#scroll>li").eq(2).css("background","white").siblings().css("background","none") }else if(sTop>=se2Top){ $("#scroll>li").eq(1).css("background","white").siblings().css("background","none") }else{ $("#scroll>li").eq(0).css("background","white").siblings().css("background","none") } })
说明:
offset()
:将标签转为对象。从而获取样式top
,直接使用css('top')
也可。
注意:若没有为盒子设置样式 top
, css('top')
返回 undefined
,而 offset().top
返回`0`,因为后者底层进行了处理;
scroll()
:滚轮事件,当滚轮滚动时执行;scrollTop()
:返回滚动高度;siblings()
:返回除自身以外的所有同级盒子。
PS:时隔多年,只能请大家自行揣摩了。。。
8、关于 css
- 设置样式(css)的方法很多:外链式、内嵌式、内行式和属性设置。若需要令某一样式具有最高优先级,可在样式后加:
!important
; - 外链式与内嵌式无优先级之分,在于顺序。
9、功能:轮播
参考笔记一,P13.7、P14.8。
初步效果:
实现思路:
从这张图,大家就大致可以知道轮播是如何实现的。需要三个样式:定时器( setInterval()
)、平移( translate() / left
)和过渡( transition
)。
先附上这张平移图的实现源码:(PS:草草写的,给大家参考一下)
1、html。(快速生成代码: div>div>div*6>img
,在输入 g
的时候按 Tab)
<div id="border"> <div id="scroll"> <div><img src="" alt=""></div> <div><img src="" alt=""></div> <div><img src="" alt=""></div> <div><img src="" alt=""></div> <div><img src="" alt=""></div> <div><img src="" alt=""></div> </div> </div>
2、css。
#border { width: 80px; height: 43px; border: 5px solid red; margin: 100px auto; } #scroll { width: 480px; height: 47px; position: relative } #scroll>div { float: left; }
3、js。
var srcs = ['img/11.jpg', 'img/12.jpg', 'img/13.jpg', 'img/14.jpg', 'img/15.jpg', 'img/16.jpg'] $("#scroll img").each(function(i, e) { e.width = 80 e.height - 45 e.src = srcs[i] }) var i = 0 var move = function() { $("#scroll").css('left', -80 * i + 'px') i++ if(i == 6) i = 0 } setInterval(move, 500)
当 i == 5
时(最后一张),将过渡归`0`,实现“瞬间”轮播,理论上可以实现“完美”效果(淘宝上经常出现的那种效果),实际上由于过渡需要时间,当原过渡开始时,程序继续执行,原过渡被“瞬间”过渡取代,偏移( translate() / left
)也被取代,就出现了当轮播到第6张图时,瞬间回到第一张图的情况,故需要当 x == 6
时再执行“瞬间”过渡,但这样就出现了 0.5s
的停顿。
上面那张图还没有“过渡”效果,加上这个样式:
#scroll { transition: 0.5s }
效果:
“理想”效果:当过渡到第6张图后,下 0.5s
,轮播到第2张图。(PS:时间挺长了,实现细节有些忘了)
“理想”效果实现方法 :使用动画( animation
)。由于动画不会被取代,故当 x == 5
时轮播,即可实现。(源码找不到了,只能请大家自行理解补充)
最后
如果大家想了解一些前端原生知识点,可查阅博文《[HTML/CSS]知识点 》。
本文持续更新中。。。