现在相关单位招聘美工,都有DIV CSS布局方面的知识要求,现列举DIV CSS最有可能遇到的八个面试问题,希望对您有所帮助。
一、超链接访问过后hover样式就不出现的问题?
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A
二、IE6的双倍边距BUG
例如:
- <
style
type
="
text
/
css
">
-
body
{
margin:
0
;
}
-
div
{
float:
left
;
margin-left:
10
px
;
width:
200
px
;
height:
200
px
;
border:
1
px
solid
red
;
}
- </
style
>
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
三、为什么FF下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
- div
{
height:
auto
!important
;
height:
200
px
;
min-height:
200
px
;
}
四、为什么web标准中IE无法设置滚动条颜色了?
原来样式设置:
- <
style
type
="
text
/
css
">
- body
{
scrollbar-face-color:
#f6f6f6
;
scrollbar-highlight-color:
#fff
;
scrollbar-shadow-color:
#eeeeee
;
scrollbar-3dlight-color:
#eeeeee
;
scrollbar-arrow-color:
#000
;
scrollbar-track-color:
#fff
;
scrollbar-darkshadow-color:
#fff
;
}
- </
style
>
解决办法是将body换成html
五、为什么无法定义1px左右高度的容器?
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
六、怎么样才能让层显示在FLASH之上呢?
解决的办法是给FLASH设置透明:
- <
a
href
=
"
http://www.easyq.net.cn/
"
>
:
</
a
>
- <
pre
lang
=
"
html
"
line
=
"
1
"
>
- <
param
name
=
"
wmode
"
value
=
"
transparent
"
/>
七、怎样使一个层垂直居中于浏览器中?
- <
style
type
="
text
/
css
">
- <!--
- div
{
- position:
absolute
;
- top:
50
%
;
- left:
50
%
;
- margin:
-
100
px
0
0
-
100
px
;
- width:
200
px
;
- height:
200
px
;
- border:
1
px
solid
red
;
- }
- -->
- </
style
>
这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
八、firefox嵌套div标签的居中问题的解决方法
假定有如下情况:
- <
div
id
=
"
a
"
>
-
<
div
id
=
"
b
"
>
</
div
>
- </
div
>
如果要实现b在a中居中放置,一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切 正常;但是在Firefox中b却会是居左的。
解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为:margin: 0 auto;。
分享到:
相关推荐
以上这些问题和解决方案都是网站美工在使用DIV+CSS进行页面布局时可能遇到的实际问题,理解并掌握这些技巧对于提升网页设计的兼容性和用户体验至关重要。在面试中,能够熟练地解答这些问题将有助于展示你的专业技能...
在CSS(层叠样式表)领域...以上仅是部分经典CSS面试题及解答,实际面试中可能涉及更深入的问题,如浏览器兼容性、性能优化、CSS预处理器的高级用法等。熟悉这些概念并能灵活运用是成为一名优秀前端开发者的必备技能。
这意味着,如果`padding-top`增大,可能导致父元素高度增加,形成一个潜在的无限循环问题,因为父元素必须容纳其内容的高度。 2. **CSS权重** CSS选择器有不同的权重,决定哪个样式会被应用。权重分为四等级: - ...
### DIV+CSS入门教程:深度解析与正确理解 在当今的网页设计领域,"DIV+CSS"被广泛提及,但这一术语的使用实际上存在一定的误区。深入探讨此话题,不仅有助于初学者正确理解网页布局的核心概念,还能促进面试时的...
8. Firefox中嵌套div的居中问题:在Firefox中,若要使嵌套的div在父div中水平居中,可以设置子div的`margin: 0 auto`。这种方法在IE中也有效,但Firefox有时需要额外处理。 这些知识点都是DIV+CSS布局中常见的问题...
问题描述:假定有如下情况:<div id="a"><div id="b"></div></div> 如果要实现 b 在 a 中居中放置,一般只需用 CSS 设置 a 的 text-align 属性为 center。这样的方法在 IE 里看起来一切正常;但是在 Firefox 中 b 却...
在面试中,面试官通常会通过一系列问题来评估候选人的技能水平,包括对基本概念的理解、实践经验、以及解决实际问题的能力。以下是一些关于HTML和CSS面试题的详细解答,旨在帮助你深入理解这两个领域的关键知识点。 ...
在面试中,面试官可能会考察应聘者对CSS选择器、盒模型、布局模式(如流式布局、网格布局、Flexbox和Grid)、响应式设计、CSS预处理器(如Sass和Less)、CSS动画和过渡、以及CSS性能优化等方面的理解。因此,熟悉...
3. **div+css布局与table布局**:div+css布局更符合W3C标准,实现结构、样式和行为的分离,提高代码可维护性和页面加载速度。相比之下,table布局虽然易于上手,但可能导致复杂的嵌套和较差的性能,不利于SEO。 4. ...
在Web开发中,CSS浏览器兼容性问题是一个常见且棘手的话题。不同的浏览器,尤其是IE系列与其他现代浏览器(如Firefox、Chrome、Safari和Opera),在解析CSS规则时可能存在差异,导致页面显示效果不一致。以下是一些...
题目中的"测试DIV+CSS布局"可能是指设计一个页面布局,要求应聘者使用`div`元素配合CSS实现特定的设计要求,例如响应式设计、居中对齐、多列布局等。面试官可能会给出一个具体的设计草图,让候选人编写相应的HTML和...
3. Div+CSS 布局相比 Table 布局有更多优势,如更好的可扩展性、更高的可维护性、SEO友好、页面加载速度更快,因为CSS布局结构更清晰,样式与内容分离。 4. Alt 和 Title 属性在`<img>`标签中都有不同的作用:Alt ...
### CSS 面试问答(2023) #### 1. CSS 是什么? 层叠样式表(Cascading Style Sheets),简称 CSS,是一种用于定义网页样式和布局的语言。CSS 的设计初衷是为了让开发者能够更加高效地管理和控制网页的表现形式。...
在面试中,对于 Vue2 的基础知识,面试官可能会询问关于组件、指令、响应式系统、计算属性、生命周期钩子等方面的问题。例如: 1. Vue 中的组件是什么?如何创建一个简单的组件? 组件是 Vue 应用的核心构建块,...
前端面试题涵盖HTML、CSS和JavaScript,这些都是前端开发者必须掌握的核心技术。以下是对这些知识点的详细解释: ...以上知识点是前端面试中常见的问题,掌握这些将有助于提升开发者的技术水平和面试表现。
8. CSS中的:hover伪类:提到了`:hover`伪类,这是CSS中用来改变元素状态的一个伪类,通常与`hover`事件一起使用,比如在鼠标悬停时改变元素的样式。 9. CSS滚动条样式:文档中有一个`body`的样式设置了`scrollbar`...
React本身并不直接处理样式,但它与CSS的结合有多种方法,使得开发者可以根据项目需求选择最合适的方式。本文将深入探讨React中引入CSS的各种方式及其特点。 1. **内联样式** 内联样式是最基础的CSS引入方式,通过...
总的来说,面试问题涵盖了前端开发的多个重要方面,包括项目搭建、页面布局、用户交互、数据验证、权限控制以及状态管理等,这些都是前端开发者必须掌握的关键技能。面试者需要对HTML、CSS、JavaScript、Vue.js等...