div css 面试题
高级前端面试问题及答案解析
高级前端面试问题及答案解析前言:前端开发是当前互联网行业中的一项热门技术,其重要性不言而喻。
面试是升职加薪、求职换工作的必经之路。
为了帮助广大前端开发人员更好地备战面试,本文将结合自身经验和行业标准,整理了一些高级前端面试常见的问题及答案解析。
一、HTML/CSS1. 请解释一下HTML语义化的概念,以及为什么它对SEO有重要意义。
HTML语义化是指合理正确地使用HTML标签来描述页面结构及内容信息。
通过正确使用语义化标签,可以帮助浏览器和搜索引擎更好地理解页面结构,提升页面的可访问性和可读性,从而对SEO有重要意义。
例如,使用<p>标签表示段落,使得搜索引擎可以更好地理解其中的文本内容。
2. 请解释一下CSS盒模型的概念,并说明标准盒模型和IE盒模型的区别。
CSS盒模型是指一个网页元素在页面中所占空间的计算模型。
标准盒模型包含了元素的内容区域、内边距、边框和外边距;而IE盒模型则将内边距和边框都计算在了元素的宽度和高度之内。
这导致了标准盒模型和IE盒模型在计算宽度和高度时的差异。
例如,标准盒模型下,一个元素的宽度和高度等于内容区域的宽度和高度;而IE盒模型下,一个元素的宽度和高度等于内容区域、内边距和边框的宽度和高度之和。
3. 请解释一下CSS选择器优先级的计算规则,并给出一个例子。
CSS选择器优先级是用于确定当多个选择器作用在同一个元素上时,哪个选择器的样式会被应用的规则。
优先级的计算规则为:标签选择器的权重为1,类选择器的权重为10,ID选择器的权重为100,行内样式的权重为1000,以及通过!important声明的样式的权重最大。
例如,对于以下的样式规则:```p {color: green;}p#myId {color: red;}```其中,权重计算为:ID选择器权重100 + 标签选择器权重1 = 101。
因此,带有ID为"myId"的段落元素的文字颜色将会是红色。
DIV+CSS(中专)理论试题题库
33
DIV+CSS理论考试题
34
DIV+CSS理论考试题
35
DIV+CSS理论考试题
36
DIV+CSS理论考试题
37
DIV+CSS理论考试题
38
DIV+CSS理论考试题
39
DIV+CSS理论考试题
40
DIV+CSS理论考试题
41
DIV+CSS理论考试题
42
DIV+CSS理论考试题
43
DIV+CSS理论考试题
以下不属于RGB三原色的是 哪三种颜色?
关于样式表的优先级说法不 正确的是
不属于CSS样式文件的类型 有
<body>
display:false
font-size
backgroundcaolllo.rh:1 {backgroundcolor:#FFFFFF; } texttransform:uppe rcase
哪个 HTML 标签用于定义内 部样式表?
哪个 HTML 属性可用来定义 内联样式?
如何在 CSS 文件中插入注 释?
在CSS语言中下列哪一项是" 左边框"的语法?( ) 在CSS语 言 中 下 列 哪 一 项 的适用对象是"所有对象 "?( )
下列哪个css属性能够设置 文本加粗?
下列哪个css属性能够更改 文本字体?
p元素内的em元 素为蓝色
<list> 指网页元素的位 置,距离左边框 和上边框的距离 直接插入两个 DIV标记,会自 动排在同一行
超文本标记选择 器
left
红 直接定义在标记 上的css样式级 别最高
前端开发工程师面试题及答案
前端开发工程师面试题及答案在前端开发领域,面试是选拔优秀人才的重要环节。
以下是一些常见的前端开发工程师面试题以及对应的参考答案。
一、HTML 和 CSS 相关问题1、解释一下盒模型以及它在布局中的作用。
答案:盒模型是 CSS 中用于布局的基本概念,它由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
在布局中,理解盒模型对于准确计算元素的尺寸和间距非常重要,能够帮助我们实现各种复杂的页面布局。
2、如何实现一个两栏布局,左边固定宽度,右边自适应?答案:可以使用多种方法实现。
一种常见的方式是使用浮动(float),将左边栏设置为固定宽度并向左浮动,右边栏不浮动,并设置其左边的外边距(marginleft)为左边栏的宽度。
也可以使用 flex 布局,将父容器设置为 display: flex; ,左边栏设置固定宽度,右边栏设置flex: 1; 以实现自适应。
3、说一说 CSS 选择器的种类和优先级。
答案:CSS 选择器包括元素选择器、类选择器、id 选择器、属性选择器、伪类选择器、伪元素选择器等。
选择器的优先级从高到低依次为:内联样式(通过 style 属性设置)> id 选择器>类选择器、属性选择器、伪类选择器>元素选择器、伪元素选择器。
二、JavaScript 相关问题1、谈谈你对 JavaScript 中作用域和闭包的理解。
答案:作用域决定了变量的可见性和可访问性。
在 JavaScript 中有全局作用域和函数作用域。
闭包是指有权访问另一个函数作用域中的变量的函数。
闭包可以让函数记住其创建时的环境,即使外部函数已经执行完毕,闭包仍能访问外部函数中的变量。
2、如何实现 JavaScript 的继承?答案:常见的实现方式有原型链继承、借用构造函数继承、组合继承、寄生组合继承等。
原型链继承通过将子类型的原型指向父类型的实例来实现继承;借用构造函数继承通过在子类型的构造函数中调用父类型的构造函数来继承属性;组合继承结合了原型链继承和借用构造函数继承的优点;寄生组合继承是一种优化的组合继承方式,避免了不必要的父类实例属性的重复创建。
300道HTML、CSS习题及面试题(含答案)
HTML+CSS习题及面试题1.[问答题]根据下面效果图设计页面:两点要求:1.自适应宽度,左右两栏固定宽度,中间栏优先加载;2.要考虑到换肤---------------------------------------------------------------------------------------------------------------------------- 来自:2011腾讯前端面试稿参考:1.自适应宽度,左右两栏固定宽度,中间栏优先加载,可以采用双飞翼布局。
<style type="text/css">*{ margin:0; padding:0px;}.header{ background:#666; text-align:center;}.body{ overflow:hidden;*zoom:1;}.wrap-2{ margin-top:30px;}.wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}.wrap-2 .main-wrap-2{ margin:0 200px 0 150px; }.wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}.wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}.footer{ background:#666; text-align:center;}</style><div class="wrap-2"><div class="header">Header</div><div class="body"><div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div><div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div><div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div></div><div class="footer">Footer</div></div>2.使用最新的css3盒布局技术,它允许宽度自适应,改变元素显示顺序,优先加载重要区域。
45道CSS基础面试题(附答案)
45道CSS 基础面试题(附答案)刘宁Leo1 介绍一下标准的CSS 的盒子模型?与低版本IE 的盒子模型有什么不同的?标准盒子模型:宽度=内容的宽度(content )+ border + padding + margin低版本IE 盒子模型:宽度=内容宽度(content+border+padding )+ margin2 boxsizing 属性?用来控制元素的盒子模型的解析模式,默认为contentboxcontextbox :W3C 的标准盒子模型,设置元素的 height/width 属性指的是content 部分的高/宽borderbox :IE 传统盒子模型。
设置元素的height/width 属性指的是border + padding + content 部分的高/宽3 CSS 选择器有哪些?哪些属性可以继承?CSS 选择符:id 选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li )、后代选择器(li a )、通配符选择器(*)、属性选择器(a[rel="external"])、伪类选择器(a:hover, li:nthchild )可继承的属性:fontsize, fontfamily, color不可继承的样式:border, padding, margin, width, height优先级(就近原则):!important > [ id > class > tag ]!important 比内联优先级高4 CSS 优先级算法如何计算?元素选择符: 1class 选择符: 10id 选择符:100元素标签:10001. !important 声明的样式优先级最高,如果冲突再进行计算。
前端面试题--CSS篇
前端⾯试题--CSS篇1. ⾯试中,被问到关于flex布局中,flex-shirink的计算问题。
⽗元素宽度300px,display为flex, ⼦元素1宽度100px,flex-shirink为1,⼦元素2宽度300px,flex-shirink为2。
⼦元素1,⼦元素2的实际宽度是多少?如何计算?<div class="box"><div class="first">85.719</div><div class="second">214.281</div></div>.box{width: 300px;display: flex;}.first{background: red;width: 100px;flex-shrink: 1;}.second{background: yellow;width: 300px;flex-shrink: 2;}计算⽅法:需要收缩的空间:100+300-300=100每个⼦项⽬需要收缩的值:100n+300*2n=100; n=1/7first宽度:100-100*1/7=85.719second宽度:300-300*2*1/7 = 214.2812 实现⼀个div在不同分辨率下的⽔平垂直居中.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 1px solid pink;width: 200px;height: 200px;}3 左右固定,中间⾃适应样式<style>.box {display: flex;height: 200px;}.left {flex: 0 0 200px;background-color: pink;}.center {flex: 1;background-color: yellow;}.right {flex: 0 0 200px;background-color: skyblue;}</style></head><body><div class="box"><div class="left"></div><div class="center"></div><div class="right"></div></div></body>4 清除浮动的⼏种⽅式://1. 在元素最后下加⼀个元素, 设置clear:both属性,缺点是会增加多余⽆⽤的html元素<div class="container"><div class="left">left浮动</div><div class="right">right浮动</div><div style="clear:both;"></div></div>//2. 使⽤after伪元素(给⽗元素添加after伪元素).container::after {content: ' ';display: block;clear: both;}//3. 给⽗级元素设置overflow:hidden, 缺点:不能和position配合使⽤5 box-sizing常⽤的属性有哪些?分别有什么作⽤?(1)content-box宽⾼是元素本⾝的宽⾼不包含border+padding(2)border-box元素的宽⾼已经包含了border+padding(3)inherit从⽗元素继承box-sizing属性6 CSS样式权重!important > 内联样式 > id选择 > (class选择 = 伪类选择) > (标签选择 = 伪元素选择)7 请简要描述margin重合问题,及解决⽅式问题:相邻两个盒⼦垂直⽅向上的margin会发⽣重叠,只会取⽐较⼤的margin解决:(1)设置padding代替margin(2)设置float(3)设置overflow(4)设置position:absolute 绝对定位(5)设置display: inline-block8 <meta></meta>标签的理解1、meta是html⽂档头部的⼀个标签,这个标签对⽤户不可见,是给搜索引擎看的。
div css 考核试题 html前端面试题目
实习生网页重构组招聘公开试题(含答案)一、耐心填一填!(每空4分,共24分)1. 为div设置类a与b,应编写HTML代码_<div class=”ab”>_</div>_________。
2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。
3. ____li________标签必须直接嵌套于ul、ol中。
4. CSS属性_____margin_______可为元素设置外补丁。
5. 设置CSS属性float的值为___none_________时可取消元素的浮动。
6. 文字居中的CSS代码是____text-align:center________。
二、精心选一选!(每题4分,共16分)1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )A. display:inlineB. display:noneC.display:block D. display:inheric2. 选出你认为最合理的定义标题的方法( C )A. <span class=”heading”>文章标题</span>B. <p><b>文章标题</b></p>C. <h1>文章标题</h1>D. <strong>文章标题</strong>3. br标签在XHTML中语义为( A )A.换行B.强调C.段落D.标题4. 不换行必须设置( AC )A.word-breakB.letter-spacingC.white-spaceD.word-spacing5. 在使用table表现数据时,有时候表现出来的会比自己实际设置的宽度要宽,为此需要设置下面哪些属性值( AD )A. cellpadding=”0″B. padding:0C.margin:0 D. cellspacing=”0″三、判断对或错!(每题4分,共24分)1. CSS属性font-style 用于设置字体的粗细。
css面试题.
一、填空题(共10题)1.CSS样式定义优先级顺序是 ______。
2.对ul li的样式设成无,应该是用什么属性______。
3.div与span的区别是____________。
4.合理的页面布局中常听过结构与表现分离,那么结构是____,表现是_____。
5.css选择器包括______、______、______。
6.改变元素的外边距用_____,改变元素的内边距用______。
7.在Table中,th是_____,tr是_______,td是______。
8.请将下面五行代码进行缩写,注意代码缩写规范:#box {background-position:50% 50%;background-repeat:no-repeat;background-attachment:fixed;background-color:#ff0000;background-image:url(lady.gif);}9.图片加链接后又浏览器默认的蓝色边框,消除的方法是______。
10.如下图为一个border为1px 的div块,总宽度为215px(包括border),阴影区为padding-left:25px;,那么此div的width应设置为______。
二、单项选择题(共30题)1.()标签可以应用于〈head〉中。
A.<body>B.<title>C.<image>D.<html>2.a:hover表示超链接文字在()时的状态。
A.鼠标按下B.鼠标经过C.鼠标放上去D.访问过后3.下列属性哪一个能够实现层的隐藏?A.display:falseB.display:hiddenC.display:noneD.display:""4.下列选项中,不属于文本属性的是A.font-sizeB.font-styleC.text-alignD.font-color5.CSS是什么的缩写puter Style SheetsB.Cascading Style SheetsC.Creative Style SheetsD.Colorful Style Sheets6.下列HTML引用样式表的方式哪种正确A.<stylesheet>mystyle.css</stylesheet>B. <style src="mystyle.css">C.<link rel="stylesheet" type="text/css" href="mystyle.css">D.<style href="mystyle.css">7.在HTML内部定义样式用下列哪个标签A.<style>B.<css>C.<script>D.<link>8.下面的CSS语法哪一个正确?A.body:color=blackB.{body;color:black;}C.body {color: black;}D.{body:color=black(body}9.在CSS中怎样插入注释A.// this is a comment //B./ this is a commentC./* this is a comment */D.' this is a comment "10.下面哪一个属性用来更换背景颜色A.background-color:B.bgcolor:C.color:D.bg_color:11.怎样给xhtml中的所有h1标签增加一个背景色A.all.h1 {background-color:#FFFFFF;}B.h1 {background-color:#FFFFFF;}C.h1.all {background-color:#FFFFFF;}C.h1.total {background-color:#FFFFFF;}12.怎样改变标签元素中文本的颜色A.text-color:B.font-color:C.text-color:D.color:13.选出你认为最合理的定义标题的方法( ) 。
最常见的CSS面试问题
最常见的CSS面试问题要使一家公司成功,就需要拥有来自不同专业领域的许多专业人员。
程序员,设计师,作家,市场专家–随您便!就业市场已经注意到CSS作曲家和设计师正变得越来越需要。
随着需求的增加,各地与CSS相关的工作面试也越来越多。
因此,今天我们将讨论一些最流行的CSS面试问题。
我将提供一些例子,供您在准备工作面试时研究。
这些将是雇主在面试中要求潜在雇员的一些主要事情。
CSS要点第一部分将主要由一些有关CSS的基本和更一般的问题组成。
这些将是雇主在面试开始之前会问您的问题类型,只是看您是否知道CSS是什么。
关于这一点,让我们直接看第一个问题。
问题1:什么是CSS?级联样式表(通常最简单地称为 CSS)是一种语言,用于解释和描述标记语言(例如HTML)编写的内容的显示方式。
满口,不是吗?简而言之,CSS用于可视化使用HTML编写的内容,例如图像,字体,背景等。
当涉及到基本的CSS面试问题时,雇主通常会寻找可以用自己的语言解释事物而不会像机器人那样背诵文本墙的人。
这就是为什么您应该尝试使用最简单的定义!问题2:CSS和HTML有什么区别?您会惊讶于有多少人不知道这两种语言之间的区别。
实际的区别本身非常简单:HTML用于在网页上编写和创建内容,而CSS用于设计部分–包括背景设计,字体,图像等。
问题3:您能列举使用CSS的优点吗?使用CSS的最流行优势是:侧面一致性带宽页面重新格式化辅助功能内容与演示分开问题4:如何在网页上应用CSS样式?包含CSS面试问题答案的书籍总的来说,在CSS面试问题中应该知道三种方法,可以使用CSS来应用样式。
该link 命令是最常用的方法-您只需加载另一个CSS文件(连同其属性)到一个你目前的工作。
这非常方便,因为您将一遍又一遍地重复使用相同的文件。
您也可以使用style属性,如果你只是想改变一个单一的元素(你会使用与该元素在同一行的属性),或者你可以简单地使用style你的HTML文件,其中的顶部head所在。
html js css基础面试题
html js css基础面试题HTML 基础面试题1. 什么是 HTML?•题目解析:这是一道开放题,要求面试者简要解释 HTML 的定义。
•参考答案:HTML 是超文本标记语言(Hypertext Markup Language)的缩写,用于创建网页结构和内容的标记语言。
它使用标签对文本进行描述,以展示图像、链接和其他内容。
2. HTML 中的块级元素和内联元素有什么区别?•题目解析:考察面试者对 HTML 元素分类的理解和掌握。
•参考答案:–块级元素:独占一行,能够设置宽度、高度、外边距和内边距。
常用块级元素有<div>、<p>、<h1>到<h6>等。
–内联元素:不会独占一行,仅占据内容所需的空间。
不能设置宽度、高度,最常见的内联元素就是<span>、<a>、<strong>等。
3. HTML5 引入了哪些新特性?•题目解析:希望面试者能够列举出 HTML5 相较于 HTML4 的一些新特性。
•参考答案:HTML5 引入了以下新特性:–新的语义化元素,如<header>、<section>、<footer>等。
–支持本地存储的 localStorage 和 sessionStorage。
–新的表单类型,如日期、时间、邮箱等。
–引入了 Canvas 和 SVG 等绘图功能。
–视频和音频的原生支持。
–Web Workers 和 WebSocket 的支持等。
4. 如何在 HTML 页面中嵌入音频和视频?•题目解析:考察面试者对 HTML5 的音频和视频支持的了解。
•参考答案:可以使用<audio>元素来嵌入音频,使用<video>元素来嵌入视频。
通过设置相应的属性和提供相应的资源路径,即可在页面上播放音频和视频。
JavaScript 基础面试题1. JavaScript 数据类型有哪些?•题目解析:考察面试者对 JavaScript 数据类型的熟悉程度。
css+div题库完整
1.下列哪种CSS样式定义的方式拥有最高的优先级?A) 嵌入B) 行C)D) 导入●知识点:CSS优先级●题型:单选●难易程度:简单●答案:B2.web标准的制定者是?A) 微软B) 万维网联盟(W3C)C) 网景公司(Netscape)D) SUN公司●知识点:CSS基础●题型:单选●难易程度:简单●答案:B3.下列的HTML中哪个是最大的标题?A) <h6>B) <head>C) <heading>D) <h1>●知识点:CSS基础●题型:单选●难易程度:简单●答案:D4.下列的HTML中哪个可以插入一条水平线?A) <br>B) <hr>C) <break>D) <P>●知识点:CSS基础●题型:单选●难易程度:简单●答案:B5.下列的HTML中哪个可以添加背景颜色?A) <body color="yellow">B) <background>yellow</background>C) <body bgcolor="yellow">D) <body backcolor="yellow">●知识点:CSS基础●题型:单选●难易程度:简单●答案:C6.请选择产生粗体字的HTML标签:A) <bold>B) <bb>C) <b>D) <bld>●知识点:CSS基础●题型:单选●难易程度:中等●答案:C7.请选择产生斜体字的HTML标签:A) <i>B) <italics>C) <ii>D) <it>●知识点:CSS基础●题型:单选●难易程度:中等●答案:A8.下列的HTML中哪个可以产生超?A) <a url=".w3schools.">W3Schools.</a>B) <a>.w3schools.</a>C) <a href=".w3schools.">W3Schools</a>D) <a>.w3schools.</a>●知识点:超样式●题型:单选●难易程度:中等●答案:C9.如何制作电子?A) <a href="xxxyyy">B) <mail href="xxxyyy">C) <a href="mailto:xxxyyy">D) <mail>xxxyyy</mail>●知识点:超样式●题型:单选●难易程度:中等●答案:C10.如何在新窗口打开?A) <a href="url" new>B) <a href="url" target="_blank">C) <a href="url" target="new">D) <a href="url" target="_parent">●知识点:超样式●题型:单选●难易程度:中等●答案:B11.以下选项中,哪个全部都是表格标签?A) <table><head><tfoot>B) <table><tr><td>C) <table><tr><tt>D) <thead><body><tr>●知识点:CSS表格●题型:单选●难易程度:中等●答案:B12.请选择可以使单元格中的容进行左排列的正确HTML标签:A) <td align="left">B) <td valign="left">C) <td leftalign>D) <tdleft>●知识点:CSS基础●题型:单选●难易程度:中等●答案:A13.如何产生带有数字列表符号的列表?A) <ul>B) <dl>C) <ol>D) <list>●知识点:列表样式●题型:单选●难易程度:中等●答案:C14.如何产生带有圆点列表符号的列表?A) <dl>B) <list>C) <ol>D) <ul>●知识点:列表样式●题型:单选●难易程度:中等●答案:D15.下列的HTML中哪个可以产生复选框?A) <input type="check">B) <checkbox>C) <input type="checkbox">D) <check>●知识点:表单样式●题型:单选●难易程度:中等●答案:C16.下列的HTML中哪个可以产生文本框?A) <input type="textfield">B) <textinput type="text">C) <input type="text">D) <textfield>●知识点:表单样式●题型:单选●难易程度:中等●答案:C17.下列的HTML中哪个可以产生下拉列表?A) <list>B) <input type="list">C) <input type="dropdown">D) <select>●知识点:表单样式●题型:单选●难易程度:中等●答案:D18.下列的HTML中哪个可以产生文本区?A) <textarea>B) <input type="textarea">C) <input type="textbox">D) <textarea></textarea>●知识点:文本域样式●题型:单选●难易程度:中等●答案:D19.下列的HTML中哪个可以插入图像?A) <img href="image.gif>B) <image src="image.gif">C) <img src="image.gif">D) <img>image.gif</img>●知识点:图像域样式●题型:单选●难易程度:中等●答案:C20.下列的HTML中哪个可以插入背景图像?A) <body background="background.gif">B) <background img="background.gif">C) <img src="background.gif" background>D) ' this is a comment●知识点:图像样式●题型:单选●难易程度:中等●答案:A21.以下的HTML中,哪个是正确引用外部样式表的方法?A) <style src="mystyle.css">B) <link rel="stylesheet" type="text/css" href="mystyle.css">C) <stylesheet>mystyle.css</stylesheet>●知识点:CSS基础●题型:单选●难易程度:简单●答案:B22.在HTML文档中,引用外部样式表的正确位置是?A) 文档的末尾B) <head>部分C) 文档的顶部D) <body>部分●知识点:CSS基础●题型:单选●难易程度:简单●答案:B23.哪个HTML标签可用来定义部样式表?A) <style>B) <script>C) <css>●知识点:CSS基础●题型:单选●难易程度:简单●答案:A24.哪个HTML属性可用来定义联样式?A) fontB) classC) stylesD) style●知识点:CSS基础●题型:单选●难易程度:中等●答案:D25.下列哪个选项的CSS语法是正确的?A) body:color=blackB) {body:color=black(body}C) body {color: black}D) {body;color:black}●知识点:CSS基础●题型:单选●难易程度:简单●答案:C26.如何在CSS文件中插入注释?A) // this is a commentB) // this is a comment //C) /* this is a comment */D) ' this is a comment●知识点:CSS基础●题型:单选●难易程度:简单●答案:C27.CSS哪个属性可用来改变背景颜色?A) bgcolor:B) color:C) background-color:●知识点:CSS属性●题型:单选●难易程度:中等●答案:C28.如何为所有的<h1>元素添加背景颜色?A) h1.all {background-color:#FFFFFF}B) h1 {background-color:#FFFFFF}C) all.h1 {background-color:#FFFFFF}●知识点:CSS属性●题型:单选●难易程度:中等●答案:C29.CSS如何改变某个元素的文本颜色?A) text-color:B) color:C) fgcolor:D) text-color=●知识点:CSS属性●题型:单选●难易程度:中等●答案:B30.哪个CSS属性可控制文本的尺寸?A) font-sizeB) text-styleC) font-styleD) text-size●知识点:CSS属性●题型:单选●难易程度:中等●答案:A31.以下的CSS中,可使所有<p>元素变为粗体的正确语法是?A) <p style="font-size:bold">B) <p style="text-size:bold">C) p {font-weight:bold}D) p {text-size:bold}●知识点:CSS属性●题型:单选●难易程度:困难●答案:C32.如何显示没有下划线的超?A) a {text-decoration:none}B) a {text-decoration:no underline}C) a {underline:none}D) a {decoration:no underline}●知识点:CSS属性●题型:单选●难易程度:困难●答案:A33.如何使文本以大写字母开头?A) text-transform:capitalizeB) 无法通过CSS来完成C) text-transform:uppercase●知识点:CSS属性●题型:单选●难易程度:困难●答案:A34.css如何改变元素的字体?A) font=B) f:C) font-family:●知识点:CSS属性●题型:单选●难易程度:困难●答案:C35.如何改变元素的左边距?A) text-indent:B) margin-left:C) margin:D) indent:●知识点:CSS属性●题型:单选●难易程度:困难●答案:B36.如何产生带有正方形的项目的列表?A) list-type: squareB) list-style-type: squareC) type: squareD) type: 2●知识点:CSS属性●题型:单选●难易程度:困难●答案:B37.CSS是利用什么XHTML标记构建网页布局?()A<dir>B<div>C<dis>D<dif>●知识点:CSS布局●题型:单选●难易程度:中等●答案:B38.在CSS语言中下列哪一项是"左边框"的语法?()A、border-left-width: <值>B、border-top-width: <值>C、border-left: <值>D、border-top-width: <值>●知识点:CSS属性●题型:单选●难易程度:中等●答案:C39.在CSS语言中下列哪一项的适用对象是"所有对象"?()A背景附件B文本排列C纵向排列D文本缩进●知识点:CSS样式●题型:单选●难易程度:中等●答案:A40.下列选项中不属于CSS 文本属性的是()A.font-sizeB.text-transformC.text-alignD.line-height●知识点:CSS样式●题型:单选●难易程度:中等●答案:D41.在CSS 中不属于添加在当前页面的形式是()A.联式样式表B.嵌入式样式表C.层叠式样式表D.式样式表●知识点:CSS样式●题型:单选●难易程度:中等●答案:D42.在CSS语言中下列哪一项是"列表样式图象"的语法?()A、width: <值>B、height: <值>C、white-space: <值>D、list-style-image: <值>●知识点:CSS样式●题型:单选●难易程度:中等●答案:D43.下列哪一项是css正确的语法构成?()A、body:color=blackB、{body;color:black}C、body {color: black;}D、{body:color=black(body}●知识点:CSS样式●题型:单选●难易程度:中等●答案:C44.下面哪个CSS属性是用来更改背景颜色的?A.background-color:B.bgcolor:C.color:D、text:●知识点:CSS样式●题型:单选●难易程度:中等●答案:A45.怎样给所有的<h1>标签添加背景颜色?()A、.h1 {background-color:#FFFFFF}B、h1 {background-color:#FFFFFF;}C、h1.all {background-color:#FFFFFF}D、#h1 {background-color:#FFFFFF}●知识点:CSS样式●题型:单选●难易程度:中等●答案:B46.下列哪个css属性可以更改样式表的字体颜色?A.text-color=B.fgcolor:C.text-color:D.color:●知识点:CSS样式●题型:单选●难易程度:中等●答案:D47.下列哪个css属性可以更改字体大小?A.text-sizeB.font-sizeC.text-styleD.font-style●知识点:CSS样式●题型:单选●难易程度:中等●答案:B48.下列哪段代码能够定义所有P标签文字加粗?()A.<p style="text-size:bold">B.<p style="font-size:bold">C.p {text-size:bold}D.p {font-weight:bold}●知识点:CSS样式●题型:单选●难易程度:中等●答案:D49.如何去掉文本超级的下划线?A.a {text-decoration:no underline}B.a {underline:none}C.a {decoration:no underline}D.a {text-decoration:none}●知识点:CSS样式●题型:单选●难易程度:中等●答案:D50.如何设置英文首字母大写?A.text-transform:uppercaseB.text-transform:capitalizeC.样式表做不到D、text-decoration:none●知识点:CSS样式●题型:单选●难易程度:中等●答案:B51.下列哪个css属性能够更改文本字体?A.f:B.font=C.font-family:D、text-decoration:none●知识点:CSS样式●题型:单选●难易程度:中等●答案:C52.下列哪个css属性能够设置文本加粗?A.font-weight:boldB.style:boldC.font:bD.font=●知识点:CSS样式●题型:单选●难易程度:困难●答案:A53.下列哪个css属性能够设置盒模型的补丁为10、20、30、40(顺时针方向)?A.padding:10px 20px 30px 40pxB.padding:10px 1pxC.padding:5px 20px 10pxD.padding:10px●知识点:CSS样式●题型:单选●难易程度:困难●答案:A54.下列哪个属性能够设置盒模型的左侧外补丁?A.margin:B.indent:C.margin-left:D.text-indent:●知识点:CSS盒模型●题型:单选●难易程度:困难●答案:C55.定义盒模型外补丁的时候是否可以使用负值?A.是B.否●知识点:CSS盒模型●题型:单选●难易程度:困难●答案:A56.如何能够定义列表的项目符号为实心矩形?A.list-type: squareB.type: 2C.type: squareD.list-style-type: square●知识点:CSS盒模型●题型:多选●难易程度:困难●答案:D57.在CSS语言中下列哪些选项是背景图像的属性()A背景重复B背景附件C纵向排列D背景位置●知识点:CSS盒模型●题型:多选●难易程度:困难●答案:ABCD58.CSS 中的选择器包括()A.超文本标记选择器B.类选择器C.标签选择器D.ID 选择器●知识点:CSS选择器●题型:多选●难易程度:简单●答案:BCD59.CSS文本属性中,文本对齐属性的取值有()A.autoB.justifyC.centerD.rightE.left●知识点:CSS文本属性●题型:多选●难易程度:困难●答案:BCDE60.CSS中BOX的padding属性包括的属性有()A.填充B.上填充C.底填充D.左填充E.右填充●知识点:CSS盒模型●题型:多选●难易程度:困难●答案:BCDE61.CSS中,盒模型的属性包括()A. fontB. marginC. paddingD. visibleE. border●知识点:CSS盒模型●题型:多选●难易程度:困难●答案:BCE62.下面关于CSS的说确的有( )A. CSS可以控制网页背景图片B. margin属性的属性值可以是百分比C. 整个BODY可以作为一个BOXD. 对于中文可以使用word-spacing属性对字间距进行调整E. margin属性不能同时设置四个边的边距●知识点:CSS盒模型●题型:多选●难易程度:困难●答案:ABC63.下面关于CSS的说确的有( )A、CSS可以控制网页背景图片B、margin属性的属性值可以是百分比C、字体大小的单位可以是emD、1em等于18像素●知识点:CSS盒模型●题型:多选●难易程度:困难●答案:ABC64.边框的样式可以包含的值包括:A、粗细B、颜色C、样式D、长短●知识点:CSS盒模型●题型:多选●难易程度:困难●答案:ABC65.下列关于网页元素overflow的说法,正确的是A.指网页元素的位置,距离左边框和上边框的距离B.指网页元素的位置,距离右边框和下边框的距离C.指网页元素的定位方式,可以取值中包括absoluteD.指网页元素的容溢出时,是否显示多余的容●知识点:CSS盒模型●题型:单选●难易程度:困难●答案:D66.如果将想将两个层排列在同一行中,下列描述不能实现的是()A.直接插入两个DIV标记,会自动排在同一行B.指定DIV的position属性为absolute,然后将层位置拖放到同一行中C.指定DIV标记的宽,并且指定其浮动方式,当层宽度之和小于外层元素宽度时,会排在同一行D.使用一个表格,将两个层分别放入一行中的两个单元格●知识点:CSS盒模型●题型:单选●难易程度:困难●答案:A67.下列关于元素在网页中的叠放顺序描述,不正确的是()A.使用CSS属性z-index来实现叠放顺序B.属性的取值越大,表示放置的层次越高C.属性取值可以为负整数D.可以叠放,但叠放顺序不能指定,将由计算机随机产生●知识点:CSS盒模型●题型:单选●难易程度:困难●答案:D68.在HTML页面中,CSS样式的属性名为background-image对应的style对象的属性名是()。
HTML和CSS面试题及答案
编程语言——HTML/CSS1、input属于窗体元素,层级显示比flash、其它元素都高。
请判断这句话的正确与否。
A.T B.F2、根据栅格系统的标准用法,错误的是A.<div class="container"><br> <div class="row">B.<div class="row"><br> <div class="col-md-1">C.<div class="row"><br> <div class="container">D.<div class="col-md-1"><br><div class= "row">3、列表分为两类,一是无序列表,一是有序列表,以下哪个是无序列表?A.<UL> B.<OL> C.<DIR> D.<DL>4、关于下列类的说法错误的是?A.show用来显示一个区块B.hide用来隐藏一个divC.hidden用来隐藏一个div D.text-hide将会隐藏掉文字5、关于嵌套列的用法,错误的是A.<div class=“row”><br> <div class=“col-sm-1”>B.<div class=“col-sm-1”><br><div class=“row”><br>C.<div class=“row”><br> <div class=“container”><br> <div class=“col-xs-1”><br> D.<div class=“container”><br> <div class=“row”><br> <div class=“col-xs-1”>6、下面哪一个标符可以产生一个水平线?A.<HR> B.<BR> C.<TR> D.<T1>7、处理a.html文件时,以下哪行伪代码可能导致内存越界或者抛出异常()1 2 3 4 5 6 7 8 9101112131415int totalBlank = 0;int blankNum = 0;int taglen = page.taglst.size();A for(int i = 1; i < taglen-1; ++i){//check blankB while(page.taglst[i] == "<br>" && i < taglen){C ++totalBlank;D ++i;}E if(totalBlank > 10)F blankNum += totalBlank;G totalBlank = 0;}注意:以下代码中taglen是html文件中存在元素的个数,a.html中taglen的值是15,page.taglst[i]取的是a.html中的元素,例如page.taglst[1]的值是<html>a.html的文件如下:<html><title>test</title><body><div>aaaaaaa</div></body></html><br><br><br><br><br>A.A B.B C.C D.D E.E F.F G.G8、下面有关html5标签说法错误的有?A.<audio> 标签定义声音,比如音乐或其他音频流B.<canvas> 比如来自一个外部的新闻提供者的一篇新的文章,或者来自blog 的文本,或者是来自论坛的文本。
css的面试题目(前端常见面试题)
css的⾯试题⽬(前端常见⾯试题)随着疫情的不断好转,各地都开始逐步的复⼯,当然对我们来说,也马上迎来所谓的⾦三银四跳槽季。
在此,分享⾃⼰在前端领域中积累的⼀些经验,供⾃⼰温故知新。
对于前端来说,涉及的知识⾯⼴,内容繁多,但是万变不离其宗,主要也就是围绕着html(5),css(less,scss,sass,styus,css3),js(es5,es6),以及常见的⼏⼤热门框架vue,react等,话不多说,直接开始进⼊主题。
1.请说出⼏个html5新特性答:html5增加的新特性具体为:1、新增的语义/结构化标签,如增加了footer,article,main,nav等;2、新增的input的type类型和属性,如:email,tel,number等;3、HTML5专有的API 地理位置本地存储缓存等4、新的图形标签 svg canvas ⼆者区别5、新的多媒体标签 video audio source6、废弃的⼀些元素标签,如:font7、⾃定义元素标签8、DOCTYPE 和字符编码charset声明2.z-index的使⽤答:z-index是⽤于设置标签的层级关系,使⽤z-index的时候需要同时设置标签的position属性(如relative或者absolute或者fixed都可),标签的默认z-index为0,可以设置负数,值越⼤,越在顶部3.position的属性以及使⽤⽅式答:position是css的定位属性,其主要包括以下⼏个不同的属性值,具体如下:absolute⽣成绝对定位的元素,相对于 static 定位以外的第⼀个⽗元素进⾏定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进⾏规定。
fixed⽣成绝对定位的元素,相对于浏览器窗⼝进⾏定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进⾏规定。
前端css面试题
前端css面试题CSS(Cascading Style Sheets)是一种用于描述网页样式的语言,被广泛应用于前端开发中。
在前端开发岗位的面试中,CSS是一个常见的考察内容。
本文将提供一些常见的前端CSS面试题,并给出详细的答案解析。
一、盒模型与盒子层叠1. 什么是盒模型?盒模型是CSS的基本组成单位,用于描述HTML元素的布局。
一个盒子由内容区域(content)、填充区域(padding)、边框区域(border)和外边距区域(margin)组成。
2. 盒模型有哪两种标准?盒模型有两种标准:W3C标准盒模型和IE标准盒模型。
在W3C标准盒模型中,盒子的宽度(width)和高度(height)仅包括内容区域;而在IE标准盒模型中,盒子的宽度和高度包括内容区域、填充区域和边框区域。
3. 如何设置盒子的宽度和高度?可以使用width和height属性来设置盒子的宽度和高度。
如果要设置盒子的总宽度,应该考虑内容区域、填充区域和边框区域的宽度之和。
4. 什么是盒子层叠?盒子层叠是指多个盒子在垂直方向上重叠显示的现象。
当多个盒子发生层叠时,可以使用z-index属性来控制盒子的层级关系,z-index值越大,盒子越靠前。
二、选择器和优先级1. 请列举常见的CSS选择器。
常见的CSS选择器有:标签选择器(element selector)、类选择器(class selector)、ID选择器(ID selector)、属性选择器(attribute selector)、伪类选择器(pseudo-class selector)和伪元素选择器(pseudo-element selector)等。
2. 请解释选择器的优先级规则。
CSS选择器的优先级规则如下:- !important声明的样式具有最高优先级;- 行内样式(使用style属性)优先级高于内部样式表;- ID选择器的优先级高于类选择器和标签选择器;- 同一级别的选择器,后声明的样式具有更高的优先级。
css前端面试题 判断题
css前端面试题判断题好的,下面是一些关于CSS的判断题,我会从多个角度给出全面的回答。
1. CSS中的选择器优先级是由选择器的特殊性(specificity)决定的,而不是选择器的位置。
回答,正确。
CSS中的选择器优先级是由选择器的特殊性决定的,而不是选择器的位置。
特殊性是根据选择器中各种选择器类型和选择器的数量来计算的,具体规则是,ID选择器特殊性最高,类选择器和属性选择器次之,元素选择器特殊性最低。
2. 在CSS中,margin属性可以用来设置元素的内边距。
回答,错误。
margin属性用于设置元素的外边距,而不是内边距。
要设置元素的内边距,应该使用padding属性。
3. CSS中的box-sizing属性可以用来控制盒模型的计算方式,有两个可选值,content-box和border-box。
回答,正确。
box-sizing属性可以用来控制盒模型的计算方式。
默认值是content-box,表示元素的宽度和高度只包括内容的宽度和高度,不包括边框和内边距。
而border-box值表示元素的宽度和高度包括内容、内边距和边框的宽度。
4. CSS中的display属性可以用来控制元素的显示方式,有几个常用的取值,block、inline、inline-block。
回答,正确。
display属性可以用来控制元素的显示方式。
其中,block值使元素以块级元素显示,占据一行或者一块空间;inline值使元素以行内元素显示,不独占一行;inline-block值使元素以行内块级元素显示,可以设置宽度和高度,同时不独占一行。
5. CSS中的伪类是用来选择元素的特殊状态或位置的,以冒号(:)开头。
回答,正确。
CSS中的伪类是用来选择元素的特殊状态或位置的,以冒号(:)开头。
例如,:hover伪类用于选择鼠标悬停在元素上的状态,:nth-child(n)伪类用于选择某个元素的第n个子元素。
以上是对于CSS相关判断题的回答,希望能够满足你的要求。
div css面试题
div css面试题1.超链接访问过后hover样式就不出现的问题?被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A2.IE6的双倍边距BUG例如:<style type="text/css">body {margin:0}div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }</style>浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline3.为什么FF下文本无法撑开容器的高度?标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:div { height:auto!important; height:200px; min-height:200px; }4.为什么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换成html5.为什么无法定义1px左右高度的容器?IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px6.怎么样才能让层显示在FLASH之上呢?解决的办法是给FLASH设置透明:<param name="wmode" value="transparent" />7.怎样使一个层垂直居中于浏览器中?<style type="text/css"><!--div {position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;border:1px solid red;}--></style>这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二8、firefox嵌套div标签的居中问题的解决方法假定有如下情况:<div id="a"><div id="b"> </div></div>如果要实现b在a中居中放置,一般只需用CSS设置a的text-align属性为center。
HTML+CSS+Div测试习题
《网页设计》练习题集一、单项选择题1. 在HTML中,标记<pre>的作用是(B )。
A.标题标记 B.预排版标记 C.转行标记 D.文字效果标记2.在CSS中使用背景图片需要使用参数( B )A.image B.urlC.style D.embed3.在CSS的文本属性中,文本修饰的取值text-decoration:overline表示(C )A.不用修饰B.下划线C.上划线D.横线从字中间穿过4.在CSS的文本属性中,文本修饰的取值text-decoration:underline表示( B)A.不用修饰B.下划线C.上划线D.横线从字中间穿过5.下面哪一个属性不是文本的标签属性( A )A.nbsp; B.align C.color D.face6.在CSS的文本属性中,文本修饰的取值text-decoration:line-through表示(D)A.不用修饰B.下划线C.上划线D.横线从字中间穿过7.外部式样式单文件的扩展名为( D )A..js B..dom C..htm D..css8. 超级链接是一种( A )的关系。
A. 一对一B. 一对多C. 多对一D. 多对多9. 关于文本对齐,源代码设置不正确的一项是:( A )A.居中对齐:<div align="middle">…</div>B.居右对齐:<div align="right">…</div>C.居左对齐:<div align="left">…</div>D.两端对齐:<div align="justify">…</div>11.为了标识一个HTML文件应该使用的HTML标记是( C )A.<p> </p>B.<boby> </body>C.<html> </html>D.<table> </table>12.下面哪一项是换行符标签( C )A.<body> B.<font> C.<br> D.<p>13.下列哪一项是在新窗口中打开网页文档。
2022最新Web前端经典面试试题及答案——CSS篇
2022最新Web前端经典⾯试试题及答案——CSS篇起点低怕什么,⼤不了加倍努⼒。
⼈⽣就像⼀场马拉松⽐赛,拼的不是起点,⽽是坚持的耐⼒和成长的速度。
只要努⼒不⽌,进步也会不⽌。
⼀、谈谈你对 BFC 的理解及作⽤。
BFC 是 Block Formatting Context 格式化上下⽂的缩写,就是页⾯上⼀个隔离的独⽴容器,容器内的⼦元素不会影响到外⾯的元素。
有⼀个独⽴的块级渲染区域,该区域有⼀套渲染规则来约束盒⼦的布局,与外部的区域没有关系。
1.1、如何创建 BFCfloat 的值不为 noneposition 的值为 absolute 或 fixedoverflow 的值不为 visibledisplay 的值不为 inline-block 、flex、inline-flex1.2、BFC的特性内部的 box 会在垂直⽅向,⼀个接⼀个的放置。
box 垂直⽅向的距离由 margin 决定,属于同⼀个 BFC 的两个相邻 box 的 margin 会发⽣重叠BFC 的区域不会与浮动区域的 box 重叠BFC 在页⾯上是⼀个独⽴的容器,外⾯的元素不会影响 BFC 内的元素,⾥⾯的⼦元素也不会影响外边元素。
计算 BFC 的⾼度时,浮动元素也会参与计算1.3、BFC 的作⽤取消盒⼦的 margin 塌陷清除内部浮动,不会影响外⾯元素,可以阻⽌元素被浮动元素覆盖。
⼆、两栏布局,有⼏种实现⽅式?常见的有 5 种⽅式,分别为:flex 布局grid 布局圣杯布局双飞翼布局系统的浮动布局2.1、使⽤ flex 布局使⽤ flex 布局,是⽬前主流的⽅式。
实现⽅式:⽗容器设置 display:flex,定宽元素设置 width,⾃适应的⼦元素设置 flex:1 或 flex-grow:1。
2.2、使⽤ grid 布局实现⽅式:⽗级元素设置 display:grid ,使⽤ grid-template-columns 和 grid-template-rows 设置格⼦,⼦项设置 grid-column 和 grid-row 设置在格⼦中的位置。
前端助理面试题
前端助理面试题作为一名前端助理,你将承担起支持和协助前端开发团队的重要角色。
你需要具备一定的技术知识和解决问题的能力,以便在工作中能够胜任各项任务。
下面是一些常见的前端助理面试题,帮助你更好地准备面试。
一、HTML和CSS基础知识1. 请简要介绍一下HTML5和CSS3。
HTML5是最新的HTML标准,它引入了新的标签和属性,提供了更多的语义化元素,以及一些新的API,如地理位置、存储等。
CSS3是最新的CSS标准,引入了新的选择器和样式属性,以及动画、过渡、转换等效果。
2. 如何设置一个HTML元素的宽度和高度?可以使用CSS的width和height属性来设置一个HTML元素的宽度和高度。
例如:width: 200px; height: 100px;3. 什么是盒模型?盒模型是指一个HTML元素所占据的空间,包括内容区域、内边距、边框和外边距。
通过CSS的width和height属性可以设置内容区域的大小,通过padding属性可以设置内边距的大小,通过border属性可以设置边框的样式和大小,通过margin属性可以设置外边距的大小。
4. 请解释一下CSS的选择器。
CSS选择器是用来选取HTML元素的样式的一种方法。
常见的选择器有:- 元素选择器:选取所有特定元素,如p、div等。
- 类选择器:选取具有特定类名的元素,如.class。
- ID选择器:选取具有特定ID的元素,如#id。
- 后代选择器:选取特定元素的后代元素,如div p。
- 子元素选择器:选取特定元素的直接子元素,如ul > li。
二、JavaScript基础知识1. JavaScript有哪些数据类型?JavaScript有七种数据类型:undefined、null、boolean、number、string、object和symbol(ES6新增)。
2. 什么是闭包?它有什么作用?闭包是指函数和函数内部能够访问父函数作用域中变量的组合。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
div css 面试题
来源:
1.超链接访问过后hover样式就不出现的问题?
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序:
L-V-H-A
2.IE6的双倍边距BUG
例如:
<style type="text/css">
body {margin:0}
div { float:left;
margin-left:10px;
width:200px;
height:200px;
border:1px solid red }
</style>
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
3.为什么FF下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
div { height:auto!important; height:200px; min-height:200p x;}
4.为什么web标准中IE无法设置滚动条颜色了?
原来样式设置:
<style type="text/css">
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-c
olor:#fff;
scrollbar-shadow-color:#eeeeee; scrollbar-3dlig ht-color:#eeeeee;
scrollbar-arrow-color:#000; scrollbar-track -color:#fff;
scrollbar-darkshadow-color:#fff;}
</style>
解决办法是将body换成html
5.为什么无法定义1px左右高度的容器?
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
6.怎么样才能让层显示在FLASH之上呢?
解决的办法是给FLASH设置透明:
<param name="wmode" value="transparent" />
7.怎样使一个层垂直居中于浏览器中?
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
8、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;。