静态网页作品总结

在学习HTML和CSS后做了四个静态网页，在做的过程中多多少少都遇到了一些问题，然后查阅资料或向他人请教才得以解决，所以这个阶段结束后，想对静态网页制作过程中遇到的一些问题做一个总结。

一、如何实现下拉框的出现及过渡

1. 将下拉框这个盒子的高设置成0，并且写上overflow：hidden（必须用overflow,不然内容会挤出去，就算设置高度为零也没意义）
2. 在下拉框这个盒子里，用transition：时间；来设置过渡时间，以及其他的属性来设置下拉框盒子的样式
3. 根据鼠标的要求（比如鼠标放到某个位置上时出现下拉框）来设置高度，使盒子出现。

         shopping-cart：下拉框父级的盒子（即鼠标放的位置）

         drop-down：下拉框的盒子

二、如何将溢出的文本设置成省略号

         ​​​​​​​        

       white-space：nowrap；         //使文字不换行

       overflow：hidden；              //将超出盒子以外的文字隐藏

       text-overflow：ellipsis；      //将溢出的文本显示成省略号

三、如何改变滚动条的样式      

       属性介绍：

       ::-webkit-scrollbar //滚动条整体部分

       ::-webkit-scrollbar-button //滚动条两端的按钮

       ::-webkit-scrollbar-track // 外层轨道

       ::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）

       ::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个

       ::-webkit-scrollbar-corner //边角

       ::-webkit-resizer ///定义右下角拖动块的样式

四、精灵图

      原理：很多张小图片整合到一张大图片上 

      使用：可以用background-position移动背景图片的位置，来获取想要的图片

注：链接里面的那张图片就是那张大图片，然后通过backgrou-position来截取想要的小图片

五、如何透过上层div点击下层的元素解决方法

      对上层元素使用：pointer-events: none;      //这样点击事件就能穿透上层元素，

      但若是你想让上层元素也能得到点击事件，只需要在你需要获得点击的上层元素子元素中加入：pointer-events: auto;

六、点击文本框使文本框中的文字消失

       input type="text" class="check" placeholder="音乐/视频/电台/用户" οnfοcus="if(placeholder=='音乐/视频/电台/用户')

{placeholder=''}" οnblur="if(placeholder==''){placeholder='音乐/视频/电台/用户'}"

onblur：事件会在对象失去焦点时发生

filter中有一个blur用来给图像设置高斯模糊

七、为什么盒子里的文字总是跑出盒子

可能是文字的line-height过大，过大的情况可能是继承了父类的line-height，而父类的ling-height过大

八、nth-child(n)和nth-of-type(n)的区别：

1、nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

2、nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

九、圣杯布局

1、浮动

2、使用flex弹性盒子

• header 和 footer 设置样式，横向撑满。
• container 中的 left、center、right 依次排布即可
• 给 container 设置弹性布局 

display: flex;

• left 和 right 区域定宽，center 设置flex: 1; 即可

3、grid布局

4、使用绝对定位（一般不用）

这种就相当于左右两边的盒子悬浮在中间的盒子上，