小白边学边联系前端笔记

小白边学边练习前端笔记

Q1：练习简单布局时，div中的列表li不能和父元素对齐。
A1：是因为没删除默认margin和padding
*{
margin：0；
padding：0；
}
仿b站首页笔记：
这是整体布局：

Q1：字体目标无法显示，整个主页的字体图标都用文字代替了。。。不知道为啥不显示，用的icomoon。

Q2：单行文字溢出省略。

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

Q3：/ 图片变圆直接在img标签上加borderradius /
Q4：/ 同一个父元素的多个绝对定位子元素按照html顺序，先写的在下面 /**
这导致了我hover之后显示的盒子被之后的盒子压住了。
解决办法：z-index。

Q5：写完这个live块，发现父盒子没有被子盒子撑开高度，父盒子标准子盒子浮动。
A5：这是典型的浮动造成的问题，我这里直接给父盒子设定高度来解决问题。
这种情况下的浮动还会有这些问题：

1、背景不能显示 父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开 父级边框不能随内容而被撑开。
3、margin padding设置值不能正确显示

解决办法：

• 直接给父盒子设定高度。
• 为父级再加上一个子盒子，使用clear：left/right/both； 来清除浮动。

• 为父级盒子定义 overflow:hidden 的css代码。
• 父级+：after伪元素。
• 父级+：before ：after 双伪元素。

Q6：hover之后显示蓝色border会撑大盒子，导致位置变化，没解决。
A6：给原来的盒子加上透明边框，hover后直接换颜色。

Q7：aside侧边栏的定位不会，拉倒某个地方开始定位，应该使用JS来做，我这里直接绝对定位了。
学完JS后做完了，使用Dom，window.scroll(x,y)和ele.scrollTop，到某点fixed定位，然后点击也可返回顶部。
Q8：这是是一个元素的显示hover，利用大盒子包起来，子元素各自设置，大盒子无设置。
本来以为hover的时候会作用于整个大盒子，但是发现没显示时候的盒子不会被hover。
这是display的问题，可以理解为未显示的盒子相当于没有。

<div class="tougao">
                <a href="#" class="pinkbtn">投稿</a>
                <div class="tougao_hover">