前端面试题....HTML和CSS方面的题....以及一些兼容性问题.....

1.ie6最小高度问题：

font-size:0;（配合line-height:0; overflow:hidden; 来使用）

当页面的内容超出时，高度自适应；当页面内容小于某个高度时，显示的是最小高度；

2.对盖不住情况：

父元素有相对定位属性，父元素溢出隐藏失效，这种问题的解决办法：给父元素也添加相对定位属性；

3.png格式的图片在IE6下不透明的问题：解决办法

（1）图片处理成png8格式（png8格式每个浏览器都支持，只是显示效果不好）；

（2）值针对IE6改变图片格式（将图片格式处理成png8或者GIF）；

（3）用滤镜来解决（对性能影响较大，处理png较少时可以使用）；

（4）JS方法：图片较多时用，既能处理图片，又能处理背景图；

4.IE条件注释语句：（只有IE6可以加载，其他都不加载了）

[ if IE 6 ]

这是IE6

[ end if ]

 

<!--[ if gt IE 6 ]-->这是大于IE6的版本<!--[ end if ]-->

 

gt （great than）大于

gte （great than or equal）大于等于

lt （less than）小于

lte （less than or equal）小于等于

! 非

5.li内出现浮动元素时产生间隙问题

vertical-align：top/middle/bottom;

6.合理运用注释，不要滥用注释；

7.长单词及较长的URL时：

word-break：break-all；在词内换行（把单词分成两截，分行显示）

8.鼠标样式:

cursor:pointer;（让鼠标是小手的样式）

9.有关a链接的四种状态

a:link 未访问时

a:visited 访问过后

a:hover 鼠标滑过

a:active 激活时

这四个顺序是固定的：l,v,h,a

IE6及一下浏览器除a以外的标签，hover不兼容；

10.css精灵/雪碧图

.box{width:200px;height:200px;background:url(img/pic3.png) -100px -200px;}

11.！important可以提升样式优先级，优先级最高；但在IE6下会失效；

12.滑动门（圆角的框：用PS来切图，左边一小块，右边一小块，中间一小块）

13.自适应圆角（宽度，高度都自适应，用PS来切图，切下来两个让他来平铺）

圆角做出来的方法：一个大的div里面包含3个小的div，一个小圆角div在左边，一个竖条div在右边，一个小圆角div在右边；用PS切图背景平铺（repeat）

14.整站相关

在head标签内部添加：

<link href="favicon.icon" rel="icon"/>

href 被链接文档的位置

rel 当前文档与被链接文档之间的关系

http://www.bitbug.net/ 在线icon图标转换；

为搜索引擎定义关键字（keywords）

<meta name="keywords" content="HTML/css/JS">

为网页定义描述（description）内容

<meta name="description" content="WEB前端开发，网页制作">

能用padding写出来的就不要用定位写，先把样式（正常文档流）写好在写定位；

15.flash透明处理

<param name="wmode" value="trasparent"/><!--窗口模式为透明-->

16.专题的写法：写之前先建好文件夹，

（1）一个文件夹用来放css文件夹，共用public.css，首页index.css，内页content.css;

public.css用来放重置样式&可以共用的样式；

简介：intro；列表页：list；联系我们：content；

（2）一个文件夹用来放图片，

（3）一个用来放HTML文档：

17.制作前分析：

先把li写完在处理细节；

先写完宽高，在用行高写或者是用padding写；

先考虑好大块的布局，在写小的布局，

一块写完是一块，一块布局完就在布局另一块，块的下一级要用缩进；

18.样式表规划：参考设计稿，有多少相似部分；

19.图片格式&页面优化

图片是色彩丰富，产品图，照片，就用jpg格式的图片；

图片色彩单一，透明：就用PNG8，PNG24，GIF格式的图片；

存储为WEB所用格式，（调图片品质）

小图片的图片品质一般小于80，

图片拼合：先切出来，把两个小的图标放到一张图上；

20.banner图处理：

专题一般都是静态的，选截背景图，中间填白，再切成两个，填上动态的，专题要求不高；

大页面划分成5份，以图片的形式一条一条的插进来，内容整个用定位写，定位不占文档流；

21.JS预留：

在写布局时，要考虑到后期加JS，

22.让块元素在一行显示用到的方法：

display：inline；（IE6,7加*，星号是专门来针对IE的）

display：inline-block；（IE6.7 存在兼容问题）

浮动（float）；

23.凡是IE6.7高度不兼容，都要加：*zoom：1；

24.漂浮在正常文档流之上的都要用到定位;

25.text-align:center;对内联块管用；（就是可以居中）

26.隐藏元素：

display：none；opacity：0；

或者是：visibility：hidden；

27.过渡

transtion:1s;从一种状态过渡到另外一种状态要用1s钟的时间；

28.宽高属性

max-width:

min-width:

min-height:

max-height:

29.自由缩放：（要配合overflow：auto；来使用）

resize:both;水平和垂直方向都允许缩放；

horizontal；只允许水平方向缩放

vertical；只允许垂直方向缩放

none;不允许缩放

30.倒影（倒影的图像不占文档流）

box-reflect：above；倒影在上面

below；倒影在下面

left；倒影在左边

right；倒影在右边

31.多栏布局

column-width：栏目宽度；

column-count：分栏个数；

column-gap：栏目间隔；

column-rule：1px solid red;列与列之间的边框

32.响应式布局：媒体查询（针对不同尺寸显示不同的样式）

（1）要用link把样式表给链接进来，然后在样式表里编辑样式

<link href="max600.css" rel="stylesheet" type="text/css" media=" screen and (min-width:600px)"/>

*注意不要忘记在and后加小括号；

（2）移动端需要设置一下meta标签：

<meta neme="viewport" content="width=device-width,inital-scale=1,user-scalable=no"/>

viewport:视口；

width：指定虚拟窗口的屏幕宽度大小；

height：指定虚拟窗口的屏幕高度大小；

inital-scale：指定初始化缩放比例；

maxmum-scale:指定允许用户缩放的最大比例；

minmum-scale:指定允许用户缩放的最大比例；

user-scalable：指定是否允许手动缩放；

=no;禁止用户自由缩放；

默认值为yes;

（3）在移动端：

子元素的margin和padding值的百分比是相对于父元素的百分比来确定的；

*相对单位：em;相对于父元素文字大小

rem;相对于根元素（HTML），浏览器默认的字体大小为16px;

那么，1rem=16px;若是在开始就定义：font-size：62.5%，那么

1rem=10px,转化成整十的数好计算；

*在移动端：宽度用百分比，细节用rem来处理，高度靠padding来，整体用百分比，细节用rem；

*在移动端

320÷设计稿的max-width（假设为720）=0.4，

 

33.有关透明：

opacity：0.5；IE不支持，在标准下，元素也跟着透明

filter：alpha（opacity=50）；IE背景透明，元素也跟着透明，标准不支持；

rgba（0,0,0,0.5）;标准支持，背景透明，文字不透明，IE9以下不支持，

*rgba出现的问题，针对IE6+解决办法：用到css hack：\9;

eg:background:rgba(0,0,0,0.5);background:#000\9;

*背景透明以文字解决办法：

（1）透明层与文字内容层分属于不同区块（元素）内：

一个负责背景透明，一个负责内容，然后通过定位（relative）让内容层显示在背景层之上；

（2）把透明背景当成png背景图片来处理

支持透明的图片格式：（png8，png24，GIF）；其中png24适合羽化过渡很多的图，GIF适合棱角分明的图；

问题：在IE6下png显示有问题；

配合png在IE6中兼容处理方法；

（3）标准：rgba

IE：①背景色配合filter；

②内容元素加position：relative；

对你有帮助的话，期待您的赞赏呀，扫描下方二维码：