实践中遇到的问题总结

Posted 做枚温婉的妹纸吧哈哈

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实践中遇到的问题总结相关的知识,希望对你有一定的参考价值。

  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. 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元素绑定事件的时候,需要用到事件代理,

以上是关于实践中遇到的问题总结的主要内容,如果未能解决你的问题,请参考以下文章

.NET Core 多框架支持(net45+netstandard20)实践中遇到的一些问题总结

课题实践总结

实践中遇到的问题总结

19 条 Node.js 生产环境中的最佳实践

学习UI的总结

回归 | js实用代码片段的封装与总结(持续更新中...)