前端学习方法及总结

2019.08.16

清楚调用关系

消息的来龙去脉

功能模块的深入理解

页面、功能的入口,页面代码的执行过程

调用栈

 

做好笔记和记录,把理解的东西输出写下来,把不懂得记录下来。

单目跟踪

消息序列图

 

不懂得没见过的知识点、名词去百度,查看红宝书


每周做好周总结,要有实实在在的输出,文字形式,


微信端、管理后台,进去搞明白每个模块的原理。

 


2019.08.16

span标签之间出现间隙问题:

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>

原因:换行空格都会被当成一个空格。

<span>1</span><span>2</span><span>3</span><span>4</span>

这样就消除空隙了。或者也可以利用float属性,设置浮动消除空隙。

 

 

a嵌套img标签的问题

html结构是这样的,未使用任何样式!

<body>
<div id="container">
	<a href="#"><img src="favicon.png" alt="logo"></a>
</div>
</body>

但在chrome的开发者工具中查看,a的高度并不是图像的高度,而是一个很奇怪的高度。

img_width.png

a_width.png

这是什么原因,如何让a标签的高度与img标签的高度一样

[<img>标签为什么会有底下的空白呢?这你要理解所谓的“基线(baseline)”。这是一个英文排版概念。我这里还是引用下知乎人的链接吧!http://www.zhihu.com/question/21558138 讲得很周到!]

总结这个问题的几种解法:
[a]处理基线

a{display:block;}
img{vertical-align: bottom;}

[b]强行去掉<a>标签的行高

a{display:block;line-height:0px;}

[c]没有设置行高的时候可以去掉字体大小;

a{display:block;font-size:0px;}

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值