实践中遇到的问题总结

Posted 2020-07-16 做枚温婉的妹纸吧哈哈

1. body在默认情况下占据了当前可视窗口的整个高度和宽度
2. 如果想让盒子中的内容垂直居中，可以让盒子的line-height和盒子的高度相等。

3. 默认情况下，盒子的高度和宽度值都是auto，但空盒子是看不见的，必须有内容才看的见，当有内容时，盒子的宽度等于父元素内容区宽度；高度需由盒子中包含的内容来撑开。如果子元素盒子定义的高度超过了父元素，父元素不会自动扩展其高度而是被子元素覆盖了。

4. verticle-align:middle的用法？？？？
   http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

5. 当一个div中没有任何元素的时候，即便设置了背景图片（有一定长宽）/颜色，也看不见，因为没有被撑开。应当设置其宽和高，让其被看见。
6. 想要div1中的文本垂直居中，可让div1的line-height=div1父元素的高度。
7. 当一个块元素想要垂直居中，如果不是精确居中的话可以设置这个块的margin-top来近似居中。
8. a标签属于内联元素，无高度和宽度属性，因此控制鼠标经过状态改变背景颜色时，仅在有文字的地方显示背景颜色。解决的办法是把a标签变为块级元素，display:block。
9. 垂直居中内联元素(例如a标签)，将其父元素(li)的line-height和父元素的高度设置为一样的。
10. 焦点图片的使用：
    set函数中初始化焦点图片：id属性值应该与图片列表最外层div的id属性一样。此外，图片列表(ul)外部应该包裹一层div，其class值为”pic“。
    使用教程：http://www.chhua.com/myfocus/usage.html

11.注意在计算间距之类的时候应该要考虑有没有边框，边框的宽度也要考虑进去。
12.解决ie错行的方法：日期放在行前面：

<li><span>2014-06-01</span><a href="news.html">【有奖活动】给父亲的三行书信</a></li>

然后对span进行右浮动即可将日期放到后面并且不会错行。
13.em、i去倾斜：font-style:normal
14.一定要清楚浏览器默认的padding,margin样式，否则会有意料外的结果。
15.尽量为高度一定的块元素设置高度，这样更便于调节。
16.background-position：x y 。用于对背景图片进行定位，只显示部分的背景图片(通常结合盒子的宽高)，x表示起始横坐标，y表示起始纵坐标位置。
17.list-tyle-type属性的设置用于li元素。line-height用于块级盒子设置行高。

18.关于padding和margin

当内部元素的宽度已知（为实际像素值或者百分比）且小于其父元素宽度时，如果为内部元素设置了padding或margin，都是在其内容区外部增添padding和margin值，但是不会溢出父元素（除非增加后总宽度大于父元素宽度），此时增加的padding或margin的边缘（左、上边缘优先）应该和父元素内边缘相接，比如设置了padding-left，则原本是内容区左边缘和父元素贴合，现在内容区右移了，padding-left和父元素贴合。
如果内部元素设置了绝对定位，则内部元素定位的起点是增加的margin（没有则是padding）边缘。应当想到padding、margin是盒子的一部分。
如果父元素设置了padding，是在其内容区外围添加额外的padding值，父元素盒子看上去变宽了。其内部的元素是在内容区域。如果内部元素设置了绝对定位，是相对于父元素的padding边缘定位的（border？？？）。

总结两句话：
对子元素来说：margin、padding、border、内容区都是盒子的一部分，因此在定位的时候应该是以子盒子border的外边缘为起点，而不是内容区。

对父元素来说：内部有子元素进行绝对定位时，如果明确设置了距离值，则是相对于父盒子的border内边缘的，未设置则是相对于内容区外边界（即原本在文档中位于哪儿就在哪儿）。也就是说下面两个方式内部盒子的位置是不同的：

//html
<div class="outer">
   <div class="inner"></div>
</div>
//css代码一
.outer{
    width:300px;
    height:300px;
    background:#FFCCCC;
    position:relative;
    padding:10px;
}
.inner{
    width:100px;
    height:100px;
    background:#CCFF66;
    position:absolute;
    top:0;   //设置了距离，是相对于outer的border内边缘的
    left:0;
}
//CSS代码二 
.inner{
   position:absolute;//未明确设置距离
}

通常可通过设置内部元素的padding值或者margin值来增加和父元素的距离。
需要注意的是浮动元素设置padding值和margin值，由于浮动元素规定了若是碰到了父元素和其他浮动元素边框，则会停止，因此，当浮动元素设置了padding或margin值，如果其总的宽度超过了父元素内容区宽度，则不会像普通元素那样溢出，如果同一行有多个浮动元素，后面的会换行。
父元素设置了padding，其内部元素设置了浮动，碰到父元素内容区边缘就停止。即内部浮动元素是限制在父元素内容区内的。

水平方向设置padding都是向右移动，也就是说如果溢出父元素了是右侧溢出，左侧仍然和父元素贴合。

旋转木马幻灯片

1. 当img放在a中时，自动有一个5px的padding-bottom，解决办法是将a和img都设置为display:block。
2.

商城分类导航

1. 伪类也是一个选择器，像普通的选择器一样也有兄弟、孩子等，例如 li:hover span{}

2. box-shadow：添加边框阴影

3. 某个边框的部分没有了，因为不是完整的一条边框没有，因此不能通过设置border-left:0来实现，可换个思维，用某个东西把它遮盖住。例如span，此时应注意遮盖物的z-index应该在它之上。

4. padding：常用来调整文字内容和所在框边缘的距离，这样看起来文字和其他盒子的距离没那么拥挤。实际上如果说文字所在盒子的宽度是实际的像素值或者百分比，那么是在当前宽度的外部增加了padding，也就是盒子整体变宽了；如果是auto的，则内容区会缩减，为padding腾出距离，盒子总宽度保持不变。

5. 一个盒子的宽度如果没有设置，那么默认为auto，也就是说占满父元素内容区的整行。设置了padding等这个孩子盒子的内容区就会压缩。而height是由盒子的内容来撑开的，不会“继承”父元素的高度。
   但是： 如果说一个盒子浮动了，它的宽度就由其内容来撑开了，而不是”继承“父元素的宽度。

6. 现在有两个不一样高的盒子在同一行，如何使它们内部的文字看上去在同一水平线上呢？比如有盒子A，CSS样式为：

{
   height:22px;
   line-height:22px;
}

盒子B:

{
   height:14px;
   line-height:14px;
   margin:4px 0; //这样就可以了
}

(A.height-B.height)/2作为上下margin值，即A盒子多出来的高度平分给B盒子的上下外边距就可以了。

浮动问题？？
前一个元素浮动后，后面的元素为毛没有占据它的位置？

7.为兼容IE对hover选择器的支持，应在body处添加csshover.htc文件，样式为：behavior:ulr()。

8.使用for循环为一个集合中的元素绑定事件时，应当注意闭包的问题，事件处理程序在事件触发的时候才会执行，例如在元素上绑定的onclick实际上是指向事件处理程序的指针。如果在事件处理程序中要用到外部环境中的某个值，例如循环索引i，会沿着作用域链到外部环境的变量对象中查找到i，而此时的i保存的是循环完成后的最后一个值。如果想要各个元素使用不同的i值，可以在绑定事件之前，把i作为元素的属性：

var Lis = document.getElementsByTagName("li");
    for(i=0;i<Lis.length;i++){
        //注意闭包的问题，事件触发后function中的i沿作用域链查找，找到外部环境中的i是最后一个值。因此将i作为Lis[i]的一个属性保存起来。
        Lis[i].i=i;  
        Lis[i].onmouseover=function(){
            this.className="lihover";
            var h0=(this.i-1)*30+42; /*一级菜单距顶部高度*/

            var y=this.getElementsByTagName("div")[0].offsetHeight; /*悬浮层自身高度*/
            var h=this.getElementsByTagName("div")[0].style.top+y;  /*悬浮层下边缘距顶部高度*/     
            /*悬浮层过短*/
            if(h<h0){
                this.getElementsByTagName("div")[0].style.top=h0+"px";
            }
            /*悬浮层过长,一屏放不下*/
            if(y>550){
                this.getElementsByTagName("div")[0].style.top="3px";
            }

        }

9.使用QQ截图可查看元素的高宽，鼠标放置在画面上还能显示颜色，按住ctrl键可显示颜色的16进制。

Tab选项卡

1.关于边框的问题
父盒子A有边框，里面的子盒子B是在父盒子的内容区中，B加了边框，B所加的边框仍然作为A的内容在A的内容区域内，这就会造成A的边框边框紧挨着A的排列，让边框看起来很粗。来看下面的例子：

 <div id="notice-tit" class="notice-tit">
      <ul>
          <li><a href="#">公告</a></li>
          <li><a href="#">规则</a></li>
          <li><a href="#">论坛</a></li>
          <li><a href="#">安全</a></li>
          <li class="select"><a href="#">公益</a></li>      
      </ul>
   </div>

外层div:

.notice-tit{
    width:298px;
    height:27px;
    position:relative;
    border:1px solid #C00;
}

外层div的总的宽度是298+2=300px。
我们想要鼠标滑过li时两侧各有1px的边框，注意是li有边框，而ul没有，那么li所加的边框仍然是在ul的内容区域内（而不是像给ul加边框那样加到ul定义宽度的外面），即仍在ul定义的宽度之内。那么ul应该定义多宽呢？我们想要左右两边的li的边框能把外层div的边框盖住，那么ul的宽度应该至少有300px，如果不做定位处理，那么当鼠标滑过最左侧的li，这个li的左边框是紧挨着div的左边框在div内部（内容区），那么应该要把它往左挪1px，这样就可以完全遮盖住外层div的边框了。有了这个考虑，应该将ul进行如下设置：

.notice-tit ul{
    width:300px;  
    position:absolute;
    left:-1px;
}

技巧：由于li是在鼠标滑过时候才有边框，为了使li盒子总体宽度保持不变，那么可以在没滑过的时候设置左右各1px的padding（代替边框的位置），而鼠标滑过时去掉padding并且设置相应的边框。

2.选项卡索引

选项卡的一个关键问题是鼠标滑过某个选项卡（li）的时候应该出现对应的选项卡内容，那么怎么才能知道是滑过哪个li呢，这里应该要记录li的索引号，根据这个索引号去查找对应的选项卡内容。可以将索引号作为li的一个属性存储起来:

3.注意由JS添加的类的后代的使用。意思是只有在触发某个事件后才会添加某个类，只选择有这个类的元素的后代，而未触发事件时则不选择。

4.每个元素都有一个默认的display值，也就是说即便时你没有显示地设置这个样式属性，但它是默认存在的。

5.setTimeout函数是一个全局函数，通常会赋值给一个全局变量timer以便清除定时，由于这是一个全局变量，因此在给每个标签添加事件处理函数时，应当首先判断有没有已经设置timer，如果有应当先清除这个全局的timer，再重新设置setTimeout。
来看一个延迟切换选项卡的例子：

//延迟切换:即没有立即执行事件处理函数中的代码
window.onload=function(){
    //滑过的标签的索引
    var index=0;
    var timer=null;

    var lis = $("notice-tit").getElementsByTagName("li"),
        divs = $("notice-con").getElementsByTagName("div");

    if(lis.length!=divs.length) return;
    //遍历所有页签
    for(var i=0;i<lis.length;i++){
        lis[i].id=i;
        lis[i].onmouseover=function(){
            //如果存在准备执行的定时器，应该立即清除；只有当前停留事件大于500ms时才立即执行
            if(timer){
                clearTimeout(timer);
                timer=null;
            }           
            timer=setTimeout(function(){
                for(var j=0;j<lis.length;j++){
                    lis[j].className="";
                    divs[j].style.display="none";
                }           
                //设置当前为高亮并显示对应的内容
                this.className="select";
                divs[this.id].style.display="block";                
            }.bind(this),500);  //修改setTimeout中回调函数的作用域     

        }
    }
}

6.在添加定时器前应当养成把已存在的定时器清除的习惯：

clearInterval(timer);
timer=null;

当清除定时器后，会立即停止定时器中的回调函数代码执行。如果后面可能还要再次执行，记得要把相关变量恢复为初始值。每调用一次setTimeout或setInterval都产生了一个定时器id，只不过是用一个变量timer承载这个定时器id方便清除，如果没有调用清除函数而是把另一个定时器赋值给timer，那之前的定时器仍然存在。如果在生成下一个定时器前不先清除之前的，就可能在同一时间有多个定时器存在造成混乱。

信息列表

1.background-position:规定了背景图片的起始位置，即图片的左上角距离父元素边缘的距离。未设置本来应该是背景图片的左上角(0,0)从盒子的左上角开始铺平，如果设置了负数，则背景图片有一部分跑到父盒子外面了，这样就只能显示一部分背景图片了。可通过这种方式来达到显示某一部分背景图片的目的（把多张图做到一幅图中，通过background-position来显示不同的子图）。

2.list-style是对ul设置
3.如果一个盒子中的内容超出了其高度设置，那么这个盒子后面的兄弟元素会覆盖到超出的内容上面，就好像超出的内容不存在一样。

搜索框

1.input标签局限：是自闭合标签，内部不能再嵌套别的标签，不能定义复制的按钮样式。而button标签在这点上则更为灵活。
但是当input的type为submit时可以不借助任何javascript代码就把表单提交到服务器。这个input必须放到form标签内。
2.form标签的target属性表示服务器返回的结果会以什么打开方式的页面返回（如_blank表示重新打开一个页面显示返回结果）。

3.background-image设置背景图片默认是不重复的，要重复需要设置另一个样式属性background-repeat:repeat-x….
而通过background设置，则默认在水平和垂直方向都是重复的。

4.input会提供默认的边框，如果想去掉边框，可设置样式border:0.

5.在给盒子设置背景图片时，如果盒子本身没有内容，要记得为盒子设置宽高，背景图片才能显示。
6.想要按钮是一个图片，只需将图片设置为按钮的背景图片，但要记得设置按钮的宽高才能显示图片。

7.浏览器会为submit按钮提供默认的value值，如果不想要文字，需要置空value值：

<input type="submit" class="search-input-btn" value=""/>

8.在chrome下，当鼠标点击类型text的input输入框时，会有高亮边框，去掉该高亮边框可设置outline:none.

9.IE兼容性：

<meta type-equiv="X-UA-Compatible" content="IE=edge" /> <!--防止IE进入怪异文档模式，按照正常文档模式渲染-->

10.浏览器会为元素提供默认的样式，比如ul前面会有默认的padding和margin值，如果不想要可设置为0.

11.jQuery中的offset方法返回元素的border（如果有，不是margin）相对于浏览器视窗的距离，可参看：
jQuery方法区别(二)position()与offset()区别

12.jQuery中：
height方法返回元素的内容区高度；
innerHeight返回内容区+padding的高度；
outerHeight返回内容区+padding+border之和

13.事件代理
需要为由JavaScript代码动态生成的多个DOM元素绑定事件的时候，需要用到事件代理，