1.显示/隐藏问题
当鼠标滑过a标签时，会浮现一个b模块，实现方式大底都是display:none->display:block，需要注意的是：a和b需要是父子关系。
2.需要被撑开的标签不要设置宽度，给孩子设置高度即可
3.在一行里有左浮和右浮的模块，可以通过如图所示方式解决
![]()
4.使用overflow:hidden涉及到的两个标签也需要是父与子的关系
![]()
5.两个div放在同一行时，需要给两个div同时设置：display:inline-block或者display:inline
6.当鼠标滑过♡符号时，出现二维码，实现过程中发现即使二维码是用定位实现的，还是会被别的东西遮挡（同是定位），可使用z-index：1;来解决
7.table问题
![]()
实现如图效果时
1.表里的线都是通过border来实现的
2.表格里名字过长，显示省略号的实现方式：
css
tr .tooLong{
width:357px;
white-space:nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
8.当在一张完整的背景图上取所需部分时涉及到的问题：
background-attachment：fixed //设置固定的背景图像，当页面的其余部分滚动时，背景图像不会移动。
background-position具体参考https://www.cnblogs.com/zxx-foreve1130/p/3964243.html
letter-spacing属性增加或减少字符间的空白（字符间距）
9.在for循环中对每一项都进行处理时，要用let定义i,即let i = 0;
10.div左中右布局问题
<DIV ID="MAIN">
<div id=left></div>
<div id=center></div>
<div id=right></div>
<div id=clear>回车符</div>
</div>
//把left的float设置为left，
//把right的float设置为right，
//把center的float也设置成left;
//把clear的属性写成clear :"both";就可以了，
//要设置一个div框把main撑开就行啦
11.Bootstrap栅格系统的本质就是通过CSS3的媒体查询实现的，如果您熟练使用max-width等媒体查询属性的话就可以抛开Bootstrap，定制属于自己的响应式网站
12.修改bootstrap默认样式时，将自己的样式文件放在引入的bootstrap文件后面即可
13.原生js给标签加类名
document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的
document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个
document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价
14.首先，大家一定要意识到这么一点：对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！
对于内联元素各种想得通或者想不通的行为表现，基本上都可以用vertical-align和line-height来解释，以及进行行为矫正。
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
要注意的地方。
1、只有元素属于inline或是inline-block ，vertical-align属性才会起作用。
2、vertical-align，取值是百分数值时，是相对于此标签继承的line-height值决定的。
3、line-height，取值是百分数值时，是相对于当前的font-size值决定的。
4、文中提到的图片下方会有空隙，必须是HTML5文档声明才会有的，其他的文档声明没有空白，就是必须要有<!DOCTYPE html>这句才可以。
15.Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex布局发生在父容器和子容器之间。父容器需要有flex的环境(display:flex;)，子容器才能根据自身的属性来布局，简单的说，就是瓜分父容器的空间。相反就是说如果父容器没有flex的环境，那么子容器就无法使用flex的规则来划分父容器的空间
具体参考：
http://zhoon.github.io/css3/2014/08/23/flex.html
16.resize 属性规定是否可由用户调整元素的尺寸。
注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
17.写透明度时，两种写法兼顾
opacity: 0.5;
filter:alpha(opacity = 50);
针对之前写的网页存在的问题总结和解决方法
1.什么情况下应该用绝对定位？哪些情况下不需要？使用绝对定位会产生哪些问题？
一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。
网页布局涉及到各种设备各种分辨率下的兼容，所以就注定绝对定位不能适用于大部分场景。。所以布局只能依赖于上级元素的位置，而不能依赖于设备的高度和宽度。
适合绝对定位的场景主要是一些页面辅助功能：
弹窗：这个没得说，弹窗的位置肯定是要固定的。
css四种定位的理解：https://blog.csdn.net/mr_28/article/details/54846745
关于css定位：https://www.jianshu.com/p/2f873a9dfe6a
2.浮动的时候，父元素的高度为0，该如何解决？
因为浮动元素在正常的文档流中是不占位置的，所以自然对于父元素来说，子元素就像不存在它的容器内，那自然就没有高度拉！
这时候父元素的高度为0;这时可以通过在浮动的子元素后清除浮动来使父元素获得正确的高度。
解决方法：https://blog.csdn.net/fishlao/article/details/77362884
我采用了最后一种方法：
ul:after{
display: block;
clear: both;
content: ' ';
visibility: hidden;
height: 0px;
}
3.布局为左右布局时，有哪些实现方式？如果左边侧宽度固定，右边侧宽度自适应，该如何实现？
7种布局方式：https://www.cnblogs.com/ynchuan/p/4737901.html
左边侧宽度固定，右边侧宽度自适应：
https://www.cnblogs.com/weixiao-he/p/4750844.html
https://blog.csdn.net/weixin_34364979/article/details/79476865
4.高度自适应如何实现？
5.对于div等块状元素，本身占据一行，不需要再写宽度
6.补缺：css动画，如translate、ratate等
7.一个页面中哪些元素是随页面改变而改变的？哪些元素是随其他元素改变而改变的？哪些元素位置和样式是始终不变的？是否需要分析清楚？分别如何实现？
对于不随其他元素改变而改变自身的位置的元素，定位时用百分比
8.使用谷歌浏览器设置::-webkit-scrollbar后，无论设置什么属性，滚动条都变成透明了。
::-webkit-scrollbar{width:0px}
自定义滚动条样式：https://www.cnblogs.com/tzdy/p/5987549.html
9.flex布局
