怪异盒模型 box-sizing?弹性盒模型|盒布局?
解析:
在标准模式下的盒模型:盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下,盒子的总宽度和高度是包含内边距 padding 和边框 border
宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border
+ margin;
box-sizing 有两个值一个是 content-box,另一个是 border-box。
当设置为 box-sizing:content-box时,将采用标准模式解析计算;
当设置为 box-sizing:border-box 时,将采用怪异模式解析计算。
解析:
(1) 图片间隙
在 div 中插入图片,图片会将 div 下方撑大 3px。hack1:将<div>与<img>写在同一行。
hack2:给<img>添加 display:block;
dt li 中的图片间隙。hack:给<img>添加 display:block;
(2) 默认高度,IE6 以下版本中,部分块元素,拥有默认高度(低于 18px)
hack1:给元素添加:font-size:0;
hack2:声明:overflow:hidden;
表单行高不一致
hack1:给表单添加声明:float:left;height: ;border: 0;
鼠标指针
hack:若统一某一元素鼠标指针为手型:cursor:pointer;
当 li 内的 a 转化块元素时,给 a设置 float,IE 里面会出现阶梯状
hack1:给 a 加 display:inline-block;
hack2:给 li 加 float:left;
href和 src 区别? title 和 alt
解析:
href (Hypertext Reference)指定网络资源的位置(超文本引用),从而在当前元素或者当
前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系,在 link 和 a 等
元素上使用。
src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置,是页面必不可少的一部
分,是引入。在 img、script、iframe 等元素上使用。
title:既是 html 标签,又是 html 属性,title 作为属性时,用来为元素提供额外说明信
息.
alt:alt 是 html 标签的属性,alt 属性则是用来指定替换文字,只能用在 img、area 和 input
元素中(包括 applet 元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解
图像信息.
transform?animation?区别?animation-duration
解析:
Transform:它和 width、left 一样,定义了元素很多静态样式实现变形、旋转、缩放、移
位及透视等功能,通过一系列功能的组合我们可以实现很炫酷的静态效果(非动画)。
Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴,它本身被用来替代
一些纯粹表现的 javascript 代码而实现动画,可以通过 keyframe 显式控制当前帧的属性值.
animation-duration:规定完成动画所花费的时间,以秒或毫秒计。
解析:
举例说明:
<ul> <p>111</p> <span>222</span> <li>1</li> <li>2</li> <li>3</li> </ul>
li:nth-of-type(2):表示 ul 下的第二个 li 元素
li:nth-child(2):表示既是 li元素又是在 ul 下的第二个元素(找不到)。
建议一般使用 nth-of-type,不容易出问题。