实践中遇到的问题总结

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

时间: 2024-10-25 16:29:07

实践中遇到的问题总结的相关文章

谈谈在DevOps实践中,感觉最重要的这三个技术……

从国内众多DevOps实践中,我们能看到下面三个技术尤其重要和火热: 容器:容器从根本上解决了软件对环境的依懒性,解决了各个环境之间的差异问题:它可以加速部署的速度,提高部署的效率:降低部署的成本.容器技术是在Linux的基础之上发展起来的,因此它本身的实施成本很低,就是在任何物理机和虚拟机的Linux操作系统上安装Docker服务(仅几十兆)就可以完成所有功能.在任何环境中实施Docker需要考虑好以下几个因素:主机的计算资源特性和容器允许的资源需求相匹配(计算密集型.内存密集型.IO密集型等

在实践中深入理解VMware虚拟机的上网模式:NAT模式

0.说明 本篇博文为<在实践中深入理解VMware虚拟机的上网模式>系列的其中一篇:NAT模式. VMware虚拟机在我们学习过程中必不可少,不管是安装Linux操作系统来进行学习.搭建各种网络服务,拟或者是用来做集群测试.云计算平台OpenStack等的搭建,可以说,VMware虚拟机为我们带来了极大的便利,最直观的好处就是,我们可以节省很多用来购买各种设备的资金,同时也可以达到了学习各种技术的目的. 然而只要涉及到通过宿主机与VMware虚拟机中的操作系统进行通信,或者是VMware虚拟机

在实践中深入理解ARP协议

0.说明 在同一个网络(无特别说明,均指以太网络)中进行通信的主机,必须要拥有目标主机的MAC地址才能够正确地将数据发送给目标主机,那么如何知道目标主机的MAC地址呢?可以通过ARP协议.ARP协议就是用来获取目标IP地址所对应的MAC地址的,也就是说,ARP协议可以动态地在三层IP地址和二层MAC地址之间建立一种映射关系.可以用如下示意图来形象表示其作用: 可以看到上面的图示是把ARP协议划分到网络层,也既是认为它是一个网络层的协议,这是出于它为网络层的IP协议提供服务而考虑的.但实际上,由于

博客专题计划:《在实践中深入理解常见网络协议》

距离学习CCIE的课程已经有近一年的时间,虽然这一年来已经丢下了挺多关于路由交换技术的知识,不过随着这一年时间以来通过对Linux和Python的学习研究和学校相关课程的学习,对于TCP/IP的理解是越来越清晰,至少可以慢慢形成自己的想法,于是想借此机会,整理一下过去的思绪,撰写<在实践中深入理解常见网络协议>的博客专题. 写博客已有近一年的时间,慢慢地也形成了自己写博文的一种风格,有一大部分也获得了许多网友的肯定,包括51cto网友,或者通过其它方式浏览我写博文的其它门户网站的网友,在此表示

读Java并发编程实践中,向已有线程安全类添加功能--客户端加锁实现示例

在Java并发编程实践中4.4中提到向客户端加锁的方法.此为验证示例,写的不好,但可以看出结果来. package com.blackbread.test; import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; public

教育博客在实践中实际上已经发展成为记录教师专业成长

教育博客在实践中实际上已经发展成为记录教师专业成长.发布课题研究成果和反映学校发展历程的工作日 志.网络文集和多媒体成长档案袋.教师可以通过教育博客来记录自己的教育教学实况,跟踪自己的专业发展轨迹,分析进步,查找不足,积累和分享自己的成功经 验和教育智慧:同时,教师也可通过教育博客来收藏.整理自己所需的学习资源,了解教学研究的动态.建立教育博客,可使教师通过开放自己的教学材料.实践体 验和研究心得,在与专家学者.教研员以及更多一线教师乃至学生的互动交流中,逐步成为教学知识的生产者和课程资源的承载

03--(二)编程实践中C语言的一些常见细节

编程实践中C语言的一些常见细节(转载) 对于C语言,不同的编译器采用了不同的实现,并且在不同平台上表现也不同.脱离具体环境探讨C的细节行为是没有意义的,以下是我所使用的环境,大部分内容都经过测试,且所有测试结果基于这个环境获得,为简化起见,省略了异常处理.我不希望读者死记硬背这些细节,而是能在自己的平台上进行实验从而获得对应的结果.另外,本文仅仅关注于C,可能会考虑C++的表现,但在C++和C#环境下的编译器所获得的看似C代码而实不同的结果不作为参考.基础的东西比如“函数参数传值”.“转义字符”

敏捷开发在实践中确实更加有效

在Scrum的方法里面,使用Sprint的一个方式,就是在构建产品的过程中,产品的设计和开发是逐步完善的,也就是说,产品并不是一次设计完成的,这里就有一个问题,Scrum是否适合于大多数的软件产品开发?相对于传统的方式,我们编码前是否需要一个完整的明确的代码的设计? 这里有两个例子可以考虑,如果我们要开发一个操作系统,或者是开发一个Office系列软件,我们能否使用敏捷开发的模式? 对于操作系统而言,Unix开发的哲学是最好的实践方法. Unix开发哲学中其中一点是,做一件事情,把它做好,这意味

科研及工程实践中光纤涂覆机详细操作步骤(图文)

科研及工程实践中光纤涂覆机详细操作步骤(图文)一.清洁涂覆夹具涂覆夹具包括上.下两片光滑的石英片,每片的中间有一个半圆形槽,为了使上下两石英片扣和形成完美的圆形腔,需要清洁附着在石英片表面的灰尘,可以使用无尘纸沾酒精来清洗.用沾有酒精的无尘纸轻轻擦拭石英片,擦拭时候注意从一边单向擦拭,切勿来回擦拭(来回擦拭擦不干净,同时容易损伤石英表面镀金层),擦拭完毕后稍等残余酒精挥发或者用干的无尘纸再擦拭一遍后进行下一步操作.请注意:清洗时需轻轻擦拭,以防划伤石英片光滑表面 二.连接电源三.打开涂覆机电源开

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

.NET Core 多框架支持(net45+netstandard20)实践中遇到的一些问题总结 前言 本文主要是关于.NET Standard 代码 在多框架 和 多平台 支持自己实践过程中遇到的一些问题和解决办法,希望给遇到这些问题的同学一点参考和思路.问题基本上都是提在 博问 和 Stackoverflow 中,不乏很多大佬都提供了解决问题的思路.接下来则是正文. 问题1:如何发布多个 TargetFramework 的nuget 包 问题来源 :主要是因为之前的类库只提供了 .NET S