[HTML、CSS]细节、经验
【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://blog.csdn.net/m0_69908381/article/details/130134573
出自【进步*于辰的博客】
纯文字阐述,内容比较干。并且,由于考虑到时间长了恐有所遗漏,便即兴记录,并没有对内容进行筛选、排序。因此,大家在阅读时可以直接Ctrl + F进行检索。
注:本文中“父级”指父级盒子或父级标签。
1、细节锦集
div~div
表示选中前div后的所有同级div;- 内联元素(
inline
)无法设置上、下外边距。故margin: 0 auto
无效,同样对行内块元素(inline-block
)无效; - 在不作为字体的情况下,单一显示字符,如:
<
,需使用字符实体
\color{green}{字符实体}
字符实体,格式:
& + 实体名/实体号 + 分号
。如:空格: ;
; - 若一串字符由汉字、特殊字符、空格等组成,会自动换行;若仅包含数字、字母,且无空格,则视为单词,不换行;
<a>
实现本页面跳转:href = "#id"
(id 是盒子id
);- js语句的优先级等同于行内式;
- 去除输入框被选中时的选中框:
outline: none
; - 滚动条:
overflow: scroll
; transform
会覆盖,即当设置多个transform
时,只有最后一个有效。其中,rotate
会改变坐标轴方向;- 定义动画时,所有位移、旋转、缩放等都相对于起始点;
- 修改网页标题 logo:
<link ref = "icon" href = "<ico图片路径>" />
; - 使用伪选择器创建的盒子属子级;
- H5之前,form 表单必须嵌套。H5中 form 表单不嵌套的方法:为
<form>
设置 id,并指定<input>
的属性form
为此 id; box-sizing
样式表示是否将边框包含在width/height
之内。取值:1、content-box
表示不包含;2、border-box
表示包含;3、inherit
表示继承父级box-sizing
;- 设置
<a>
的href
为函数名,可实现点击链接调用函数(前端框架普遍也如此定义); - 一般情况下,表单提交时正则校验最好只设置一次,因为连续校验可能出错;
2、关于定位
- 相对定位(
relative
)的参照对象是自身; - 绝对定位(
absolute
)的参照对象是父级。
先检查父级标签是否设置定位方式(无论何种定位)。若有,则参照父级标签;否则,再检查父父级标签是否设置定位方式。依次类推。若都没有设置,则参照网页(指html/body
标签,具体不确定,而结果相差不大)。
4、关于层级
z-index
可设置层级,前提是已设置定位方式,且若是相对定位,层级会增加;- 盒子层级默认为
0
,若是将层级设置为负数,在不改变<body>
层级的情况下,盒子将不能操作; - 层级会继承;
- 盒子的层级取决于这个盒子所在“家族”、已设置层级且“辈分”最大的盒子,其后代无法再修改层级(的确仍可以设置
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()
:返回除自身以外的所有同级盒子。
时隔多年,只能请大家自行揣摩了。。。
8、关于 css
- 设置样式(css)的方法很多:外链式、内嵌式、内行式和属性设置。若需要令某一样式具有最高优先级,可在样式后加:
!important
; - 外链式与内嵌式无优先级之分,在于顺序。
9、功能:轮播
参考笔记一,P13.7、P14.8。
初步效果:
实现思路:
\color{green}{实现思路:}
实现思路:
从这张图,大家就大致可以知道轮播是如何实现的。需要三个样式:定时器(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张图。(时间挺长了,实现细节有些忘了。。。)
“理想”效果实现方法:
\color{red}{“理想”效果实现方法:}
“理想”效果实现方法:使用动画(animation
)。由于动画不会被取代,故当x == 5
时轮播,即可实现。(源码找不到了,只能请大家自行理解补充)
最后
如果大家想了解一些前端原生知识点,可查阅博文《HTML/CSS知识点锦集》。
本文持续更新中。。。
[HTML、CSS]细节、经验的更多相关文章
- 爱上朴实的CSS细节
英文原文:Learning to Love the Boring Bits of CSS 未来的CSS太让人兴奋了:一方面,是全新的页面布局方式:另一方面,是酷炫的滤镜.颜色等视觉效果.这些CSS, ...
- webapp开发之需要知道的css细节
引言 首先说明一下,本文分享对象是涉世未深的移动开发者,至于有经验的开发者可以自行绕道. 说来惭愧,做了几年pc端的前端开发,很少接触到webapp的移动端开发.如今有机会参与webapp的开发,发现 ...
- css 细节收集
细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="&qu ...
- 相关css 细节处理 neat.css
人性化的细节处理 例如: textarea 默认只能垂直拖动,防止宽度改变破坏布局. textarea { resize: vertical; } 汉字字号小于 12px 不易阅读,为 <sma ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- CSS细节
写起这篇文章,是因为阅读张鑫旭到的一篇文章<CSS的学习瓶颈>,里面提到了要重视CSS的细节和实现机制.确实:有必要掌握一些关于CSS方面的细节,而不是遇到任何页面,都添加css.rese ...
- div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- 学点css之经验总结篇章
学css说起来应该有三天左右的时间的,加上之前了解的基础,对css有一点的感性认识了,相应代码有有比较好的把握,现在就通过分享几张照片的形式分享一下我的收获 备注:在Border的外边的部门被称作:o ...
- css细节:尖角处理
在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...
- css细节复习笔记——浮动
CSS除了能够改变字体.背景和所有其他属性,还能够完成基本布局任务. div+css通过浮动和定位.盒子模型等技术应用,是最常用的布局方式. 定位的基本思想很简单,它允许定义元素框相对于其正常位置应该 ...
随机推荐
- java 注解结合 spring aop 实现日志traceId唯一标识
MDC 的必要性 日志框架 日志框架成熟的也比较多: slf4j log4j logback log4j2 我们没有必要重复造轮子,一般是建议和 slf4j 进行整合,便于后期替换为其他框架. 日志的 ...
- eclipse项目右击找不到build path
右击项目–>properties–>Project Facets–>勾选右侧的Java,然后保存. 此时再操作就有了.
- centos上使用makefile编译sliver时 提示gcc 错误,cannot find -ldl cannot find -lpthread cannot find -lc
github.com/bishopfox/sliver/server /usr/local/go/pkg/tool/linux_amd64/link: running gcc failed: exit ...
- 【Android 逆向】【攻防世界】ill-intentions
1. apk 安装到手机, 啥输入框都没有 2. apk拖入到jadx中看看 public class MainActivity extends Activity { @Override // and ...
- MySQL重新设置auto_increment值
需求描述 通常,我们都会在数据库表中设置一个自增字段作为主键,该字段的值会随着添加新记录而自增. 同时也必须注意,这个自增字段的值只会一直增加,即使把记录删除了,该自增字段的值也不会变小. 因此,就会 ...
- Mysql 插入timestamp没有使用默认值问题
在一次升级过程中,发现Mysql插入数据报了个错 Column 'create_time' cannot be null. 但是看了下这个字段虽然是非null,但是是有默认值的 `create_tim ...
- RabbitMQ和RPC
消息队列 消息队列中间件 (Message Queue Middleware,简称 MQ) 是指利用高效可靠的消息传递机制进行与平台无关的数据交流,它可以在分布式环境下扩展进程间的数据通信,并基于数据 ...
- picgo如何设置又拍云图床
1. 打开又拍云官网.正常注册,并且实名认证. 2. 选择产品,然后选择云存储,激活后进入控制台. 3. 创建云存储服务.注意服务名称.后续会用到 4. 新建一个操作员,并且给权限全部打勾. 添加好操 ...
- 【Azure 应用服务】App Servie网站报403 ModSecurity Action错误
问题描述 App Service 部署应用程序,然后通过App Gateway(WAF) 提供公网访问,但是一直遇见403报错,刷新页面,回退,重新Web页面能缓解403问题. 问题分析 通过浏览器F ...
- Taurus.MVC WebMVC 入门开发教程6:路由配置与路由映射
前言: 在本篇 Taurus.MVC WebMVC 入门开发教程的第六篇文章中, 我们将讨论如何配置路由并映射到控制器和操作方法. 路由是决定应用程序如何响应客户端请求的重要组成部分,因此在 Web ...