[HTML、CSS]细节与使用经验

简介: 本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://developer.aliyun.com/article/1635950
出自【进步*于辰的博客

纯文字阐述,内容比较干。并且,由于考虑到时间长了恐有所遗漏,便即兴记录,并没有对内容进行筛选、排序。因此,大家在阅读时可以直接Ctrl + F进行检索。

注:本文中“父级”指父级盒子或父级标签。

1、细节锦集

  1. div~div表示选中前div后的所有同级div;
  2. 内联元素(inline)无法设置上、下外边距。故margin: 0 auto无效,同样对行内块元素(inline-block)无效;
  3. 在不作为字体的情况下,单一显示字符,如:<,需使用“字符实体”,格式:& + 实体名/实体号 + 分号。如:空格:&nbsp;
  4. 若一串字符由汉字、特殊字符、空格等组成,会自动换行;若仅包含数字、字母,且无空格,则视为单词,不换行;
  5. <a>实现本页面跳转:href = "#id"(id 是盒子id);
  6. js语句的优先级等同于行内式;
  7. 去除输入框被选中时的选中框:outline: none
  8. 滚动条:overflow: scroll
  9. transform覆盖,即当设置多个transform时,只有最后一个有效。其中,rotate会改变坐标轴方向;
  10. 定义动画时,所有位移、旋转、缩放等都相对于起始点;
  11. 修改网页标题 logo:<link ref = "icon" href = "<ico图片路径>" />
  12. 使用伪选择器创建的盒子属子级;
  13. H5之前,form 表单必须嵌套。H5中 form 表单不嵌套的方法:为<form>设置 id,并指定<input>的属性form为此 id;
  14. box-sizing样式表示是否将边框包含在width/height之内。取值:1、content-box表示不包含;2、border-box表示包含;3、inherit表示继承父级 box-sizing
  15. 设置<a>href为函数名,可实现点击链接调用函数(前端框架普遍也如此定义);
  16. 一般情况下,表单提交时正则校验最好只设置一次,因为连续校验可能出错;

    2、关于定位

  17. 相对定位(relative)的参照对象是自身

  18. 绝对定位(absolute)的参照对象是父级
    先检查父级标签是否设置定位方式(无论何种定位)。若有,则参照父级标签;否则,再检查父父级标签是否设置定位方式。依次类推。若都没有设置,则参照网页(指html/body标签,具体不确定,而结果相差不大)。

    4、关于层级

  19. z-index可设置层级,前提是==已设置定位方式==,且若是相对定位,层级会增加;
  20. 盒子层级默认为0,若是将层级设置为负数,在不改变<body>层级的情况下,盒子将不能操作;
  21. 层级会继承;
  22. 盒子的层级取决于这个盒子所在“家族”、已设置层级且“辈分”最大的盒子,其后代无法再修改层级(的确仍可以设置z-index,但无意义);
  23. 当层级相同时,后面的盒子比前面的盒子高(指距离我们眼睛越近);
  24. 定位不会改变层级,在第1点中说:“相对定位会增加层级”其实说的是第5点。若盒子设置为相对定位,则看起来此盒子会更高,而实际上层级未变;

    5、全局标签属性

    参考笔记一,P6.13。

  25. 设置<table>可编辑:contented:table = "true"

  26. hidden:隐藏标签,不占据空间。若要去除隐藏,需去掉hidden,修改值无用;
  27. 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")    }
})

说明:

  1. offset():将标签转为对象。从而获取样式top,直接使用css('top')也可。
    注意:若没有为盒子设置样式topcss('top')返回undefined,而offset().top返回0,因为后者底层进行了处理;
  2. scroll():滚轮事件,当滚轮滚动时执行;
  3. scrollTop():返回滚动高度;
  4. siblings():返回除自身以外的所有同级盒子。

时隔多年,只能请大家自行揣摩了。。。

8、关于 css

  1. 设置样式(css)的方法很多:外链式、内嵌式、内行式和属性设置。若需要令某一样式具有最高优先级,可在样式后加:!important
  2. 外链式与内嵌式无优先级之分,在于顺序。

9、功能:轮播

参考笔记一,P13.7、P14.8。

在这里插入图片描述
初步效果:
在这里插入图片描述
实现思路:
从这张图,大家就大致可以知道轮播是如何实现的。需要三个样式:定时器(setInterval())、平移(translate() / left)和过渡(transition)。

先附上这张平移图的实现源码:(草草写的。。。给大家参考一下)
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张图。(时间挺长了,实现细节有些忘了。。。)

“理想”效果实现方法:使用动画(animation)。由于动画不会被取代,故当x == 5时轮播,即可实现。(源码找不到了,只能请大家自行理解补充)

最后

本文中的例子是为了方便大家理解和阐述知识点而简单举出的,旨在阐明知识点,并不一定有实用性,仅是抛砖引玉。

如果大家想了解一些前端原生知识点,可查阅博文《[HTML/CSS]知识点》。

本文持续更新中。。。

相关文章
|
3月前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
50 1
|
3月前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
64 0
|
13天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
25 6
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
31 1
[HTML、CSS]知识点
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
26天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
48 12
|
23天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
101 1
|
28天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
41 3
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
100 6