- body在默认情况下占据了当前可视窗口的整个高度和宽度
- 如果想让盒子中的内容垂直居中,可以让盒子的line-height和盒子的高度相等。
- 默认情况下,盒子的高度和宽度值都是auto,但空盒子是看不见的,必须有内容才看的见,当有内容时,盒子的宽度等于父元素内容区宽度;高度需由盒子中包含的内容来撑开。如果子元素盒子定义的高度超过了父元素,父元素不会自动扩展其高度而是被子元素覆盖了。
- verticle-align:middle的用法????
- 当一个div中没有任何元素的时候,即便设置了背景图片(有一定长宽)/颜色,也看不见,因为没有被撑开。应当设置其宽和高,让其被看见。
- 想要div1中的文本垂直居中,可让div1的line-height=div1父元素的高度。
- 当一个块元素想要垂直居中,如果不是精确居中的话可以设置这个块的margin-top来近似居中。
- a标签属于内联元素,无高度和宽度属性,因此控制鼠标经过状态改变背景颜色时,仅在有文字的地方显示背景颜色。解决的办法是把a标签变为块级元素,display:block。
- 垂直居中内联元素(例如a标签),将其父元素(li)的line-height和父元素的高度设置为一样的。
- 焦点图片的使用:
set函数中初始化焦点图片:id属性值应该与图片列表最外层div的id属性一样。此外,图片列表(ul)外部应该包裹一层div,其class值为”pic“。
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都是向右移动,也就是说如果溢出父元素了是右侧溢出,左侧仍然和父元素贴合。
旋转木马幻灯片
- 当img放在a中时,自动有一个5px的padding-bottom,解决办法是将a和img都设置为display:block。
2.
商城分类导航
- 伪类也是一个选择器,像普通的选择器一样也有兄弟、孩子等,例如 li:hover span{}
-
box-shadow:添加边框阴影
- 某个边框的部分没有了,因为不是完整的一条边框没有,因此不能通过设置border-left:0来实现,可换个思维,用某个东西把它遮盖住。例如span,此时应注意遮盖物的z-index应该在它之上。
- padding:常用来调整文字内容和所在框边缘的距离,这样看起来文字和其他盒子的距离没那么拥挤。实际上如果说文字所在盒子的宽度是实际的像素值或者百分比,那么是在当前宽度的外部增加了padding,也就是盒子整体变宽了;如果是auto的,则内容区会缩减,为padding腾出距离,盒子总宽度保持不变。
- 一个盒子的宽度如果没有设置,那么默认为auto,也就是说占满父元素内容区的整行。设置了padding等这个孩子盒子的内容区就会压缩。而height是由盒子的内容来撑开的,不会“继承”父元素的高度。
但是: 如果说一个盒子浮动了,它的宽度就由其内容来撑开了,而不是”继承“父元素的宽度。
- 现在有两个不一样高的盒子在同一行,如何使它们内部的文字看上去在同一水平线上呢?比如有盒子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元素绑定事件的时候,需要用到事件代理,