常见前端开发面试题
1、前端页面有哪三层构成,分别是什么?作用是什么?
结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达。解决了页面“内容是什么”的问题。
表示层:由CSS负责创建,解决了页面“如何显示内容”的问题。
行为层:由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
2、Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义?
Doctype是document type(文档类型)的简写,是用来说明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三种DTD声明可供选择,分别是:
1、过渡的(Transitional,也叫混杂模式):要求比较宽松,允许继续使用HTML4.01的标识,完整声明为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd">
2、严格的(Strict):要求严格的DTD,不能使用任何表现层的标识和属性,完整声明为
<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3、框架的(Frameset):专门针对框架页面设计使用的DTD,如果页面中包含有框架,可以采用DTD,完整声明为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
定义成相应的声明就可以触发相应的模式。
区分的意义是为了最终能达到数据与表现相分离的目地。
3、简述什么叫做标签语义化,优点是什么?
所谓标签语义化,就是指使用正确的标签表达合适的网页内容
语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义网页内容就容易被搜索引擎抓取
4、XHTML与HTML对比?
1、所有的标记都必须要有一个相应的结束标记
例如:<div></div> <p></p> <ul><li></li></ul> <span></span>
如果是单独不成对的标签,在标签最后加一个"/"来关闭它,例如:<br /> <hr /> <img /> <input />
2、所有标签的元素和属性的名字都必须使用小写
错误:<TITLE></TITLE> <BODY></BODY>
正确:<title></title> <body></body>
3、所有的XHTML标记都必须合理嵌套
错误:<p><b></p></b>
正确:<p><b></b></p>
4、所有的属性必须用引号""括起来
错误:<img width=300 />
正确:<img width=”300” />
5、把所有<和&特殊符号用编码表示
空格: <:< >:> &:&
6、给所有属性赋一个值
错误:<input …… checked />
正确:<input …… checked= "checked"/>
7、不要在注释内容中使“--”;“--”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。
错误:<!--这里是注释-----------这里是注释-->
正确:<!--这里是注释=======这里是注释-->
8、图片必须有说明文字
错误:<img src=”图片路径地址” title=”图片描述” />
正确:<img src=”图片路径地址” title=”图片描述” alt=”图片描述” />
9、XHTML 文档必须拥有一个根元素
所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下:
<html>
<head> ... </head>
<body> ... </body>
</html>
5、行内元素和块级元素各有哪些?
行内元素主要有:<span>、<a>、<b>、<img>、<br>、<button>、<strong>、<textarea>、<select>、<input>
块级元素主要有:<div>、<ul>、<li>、<p>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<iframe>、<ol>、<pre>、<table>、<tr>、<td>
6、行内元素和块级元素如何相互转换?
行内元素可以通过display:block转为块级元素。块级元素可以通过display:inline转为行内元素。另外块级元素的margin和padding都正常,行内元素左右maring正常,上下不识别,也就是说不能通过margin-top和margin-bottom来改变行高
7、Display都有哪些属性?
Display的各个属性值
none 此元素不会被显示。(常用)
block 此元素将被显示为块级元素,此元素前后会带有换行符。(常用)
inline 默认。此元素会被显示为一个内联元素,元素前后没有换行符。(常用)
Inline-block 行内块元素。(常用)
list-item 此元素会被作为列表显示
run-in 此元素会根据其内容被作为块级元素或内联元素显示。
compact 此元素会根据其内容被作为块级元素或内联元素显示。
marker
table 此元素会被作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会被作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会被作为一个或多个行的分组来显示(类似<tbody>)。
table-header-group 此元素会被作为一个或多个行的分组来显示(类似<thead>)。
table-footer-group 此元素会被作为一个或多个行的分组来显示(类似<tfoot>)。
table-row 此元素会被作为一个表格行显示(类似<tr>)。
table-column-group 此元素会被作为一个或多个列的分组来显示(类似<colgroup>)。
table-column 此元素会被作为一个单元格列显示(类似<col>)
table-cell 此元素会被作为一个表格单元格显示(类似<td> 和 <th>)
table-caption 此元素会被作为一个表格标题显示(类似<caption>)
8、使用CSS,让一个div消失在视野中;发挥想象力?
1.opacity:0; 2.height:0; 3.设置z-index的值; 4.display:none; 5.visibility:hidden;
9、Display:none与visibility:hidden的区别?
visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无,即在网页中不占任何的位置。
10、web标准中定义id与class有什么区别吗
一、web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他;
二、属性的优先级问题 ID 的优先级要高于class,看上面的例子
三、方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
11、Css盒模型
CSS盒模型:网页设计中的每个元素都是长方形的盒子,如图
盒子本身的大小的计算:
width(即offsetWidth):width + padding-left + padding-right + border-left + border-right
height(即offsetHeight):height + padding-top + padding-bottom + border-top + border-bottom
Margin 比较特别,它不会影响盒子本身的大小,但是它会影响和盒子有关的其他内容。
12、CSS引入的方式有哪些?
(1)行内式:在标签的style属性中设置CSS样式,如下:
<div style="width:300Px; height:300px; background:red;"></div>
(2)内嵌式:将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中:
<style type="text/css">
body{padding:0; margin:0;} </style>
(3)链接式:将一个.css文件引入到HTML文件中,在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,如下:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
(4)导入式:将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>
标记中,使用的语法如下:
<style type="text/css">
@import"mystyle.css"; /*此处要注意.css文件的路径*/
</style>
13、link和@import的区别是?
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。
1、老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
2、加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。
3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
14、CSS选择符有哪些?
CSS选择符主要有以下10类:
1、通配选择符:*{margin:0px;}
2、类型选择符:a{text-decoration:none;}
3、属性选择符:input[type="button"]{padding:5px;}
4、包含选择符:div.code a{text-decoration:none;}
5、子对象选择符:ul.test>li{font-size:14px;}
6、ID选择符:#test {color:red;}
7、类选择符:.test{color:red;}
8、选择符分组:body,ul,li{margin:0px;}
9、伪类及伪对象选择符:div:first-letter{font-size:16px;} a.test:hover{text-decoration:underline;}
10、相邻选择符:li+li{font-weight:bold;}
15、哪些属性可以继承?
CSS可以继承的属性有:
1、文字相关:font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
2、列表相关:list-style-image、list-style-position、list-style-type、list-style
3、颜色相关:color
4、透明度:opacity(opacity的继承有问题,子元素会继承祖元素的opacity,但是无法更改。)
另外,font-size继承的是父元素的大小,而不是比例。line-height当父元素是百分比或px值的时候,子元素跟父元素相同,当父元素是normal或数字的时候,子元素的line-height是子元素的字体大小乘以数字。
16、优先级算法如何计算?
重要性和来源的优先级排序从低到高是:
1、浏览器默认样式
2、用户在浏览器中定义的普通样式(normal规则,不带important规则)
3、开发人员定义的普通样式( normal规则,不带important规则)
4、开发人员定义特殊样式(带important规则)
5、用户在浏览器中定义特殊样式(带important规则)
另外还有一些原则:
1、相同的样式在CSS规则后添加了!important的优先于没有添加的。
2、CSS规则在文档中出现的顺序后面定义的的优先于前面定义的。
3、内联样式优先于用link引入的样式和页面上<style>里的样式。
17、内联和important哪个优先级高?
important高,DEMO:
<style type="text/css">
.test{padding:10px;border-radius:5px;border:1px solid red!important;}
</style>
<div class="test" style="border:1px solid blue;">Test</div>
18、你如何管理CSS文件、JS与图片?
1、对各个项目中CSS,JS里的稳定的通用代码进行提取,形成公共文件,然后利用CDN等资源进行缓存,减轻服务器压力。
2、去掉JS、CSS里的冗余代码,对代码进行精减。
3、对JS、CSS进行压缩合并,减少请求次数。
4、对页面上的小图标,背景等图片进行合并,减少请求次数。
19、背景图片合并原理是什么?
利用background-image;background- repeat;background-position; 组合来进行背景图片的定位
20、合并背景图片的优缺点?
优点:1、减少网页的HTTP请求次数,从而提高页面的性能;2、解决了给图片命名的困扰;3、更换风格方便
缺点:1、合并图片的时候比较麻烦,需要进行合理的排版留出合理的空间;2、开发的时候比较麻烦,需要准确测量每一个背景单元的精确位置;3、维护比较麻烦,如果需要添加新的图标就需要更改CSS
工具:CSS Sprites样式生成工具:adobe air(自行下载了解)
21、如何居中一个浮动的元素?
父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。
22、背景透明,背景之上的文字不透明方法?
方法一:
<style type="text/css">
.warp{ background:#eee url(back.jpg) no-repeat left top; width:440px;height:400px; border:1px solid #ccc;}
.content { width:180px; height:260px; margin:0px auto; padding:30px 30px;background:rgba(255, 255, 255, 0.6)!important;
filter:Alpha(opacity=60); background:#fff; /* 使用IE专属滤镜实现IE背景透明*/
.content p{ position:relative;} /*实现IE文字不透明*/
</style>
<div class="warp">
<div class="content"><p>背景透明,背景之上的文字不透明方法</p></div>
</div>
方法二:position方法
<style type="text/css">
.warp{ background:#eee url(back.jpg) no-repeat left top; width:440px;height:400px; border:1px solid #ccc;}
.content { width:180px; height:260px; margin:0px auto; padding:30px 30px; postition:relative;}
.content p.pos1{ width:180px; height:24px; line-height:24px; position:absolute; bottom:0; left:0; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:1;}
.content p.pos2{ width:180px; height:24px; line-height:24px; position:absolute; bottom:0; left:0; color:#fff; z-index:2'}
</style>
<div class="warp">
<div class="content">
<p class="pos1">背景透明,背景之上的文字不透明方法</p>
<p class="pos2">背景透明,背景之上的文字不透明方法</p>
</div>
</div>
方法三:css3方法
<style type="text/css">
.warp{ background:#eee url(back.jpg) no-repeat left top; width:440px;height:400px; border:1px solid #ccc;}
.content { width:180px; height:260px; margin:0px auto; padding:30px 30px;background:rgba(255, 255, 255, 0.6);}
</style>
<div class="warp">
<div class="content"><p>背景透明,背景之上的文字不透明方法</p></div>
</div>
23、左边固定,右边自适应方法?
方法一:position:absolute
<style>
body{ margin:0; height:100%}
html{ height:100%} /*兼容firefox的div高度100%*/
#left{ position:absolute; top:0; left:0; width:200px; height:100%;
background-color:#CCCCCC}
#right{ margin-left:200px; height:100%; background-color:#0099FF}
</style>
<div id="left">left</div>
<div id="right">right</div>
方法二:用float来解决
<style type="text/css">
body{ margin:0; height:100% }
html{ height:100% }
#left{ width:150px; height:100%; float:left; _margin-right:-3px;
background-color: yellow }
#main{ height:100%; background-color: green }
</style>
<div id="left"></div>
<div id="main"></div>
方法三:用float来解决
<style>
body{ margin:0; height:100%}
html{ height:100%} /*兼容firefox的div高度100%*/
#left{ width:200px; height:100%; background-color:#CCCCCC; float:left}
#main{ width:100%; height:100%; background-color:#0099FF}
</style>
<div id="main">
<div id="left">left</div>
Right
</div>
24、三栏布局 ;左定右定中间自适应?
方法一:绝对定位方法
html,body { margin:0; padding:0; height: 100%; }
#left, #right { position: absolute; top:0; width: 220px; height: 100%; }
#left { left:0; }
#right { right:0; }
#main { margin: 0 230px; height: 100%; }
<div id="left">左边栏</div>
<div id="right">右边栏</div>
<div id="main">主内容</div>
方法二:浮动方法
#left, #right { float: left; width: 220px;height: 200px; background: blue; }
#right{ float: right; }
#main { margin: 0 230px; background: red; height: 200px; }
<div id="left">left </div>
<div id="right">right</div>
<div id="main">mian</div>
方法三:负的margin值
#main { float: left; width: 100%; }
#mainContainer { margin: 0 230px; height: 200px; background: green; }
#left { float: left; margin-left: -100%; width: 230px }
#right { float: left; margin-left: -230px;width: 230px; }
#left .inner, #right .inner { background: orange; margin: 0 10px; height: 200px; }
这种方法如果在ie下会存在布局混乱的bug,你可以将div#right和div#left中的width值稍作修改:
#left, #right { float: left; margin: 0 0 0 -271px; width: 50%; *width: 49.9%; }
<div id="main">
<div id="mainContainer">main content</div>
</div>
<div id="left">
<div id="leftContainer" class="inner">left content</div>
</div>
<div id="right">
<div id="rightContainer" class="inner">right</div>
</div>
方法四:CSS3 Flexbox
.grid { display: -webkit-flex; display: -moz-flex; display: -o-flex; display: -ms-flex; display: flex; }
.col { padding: 30px; }
.fluid { flex: 1; }
.fixed { width: 400px; }
<div class="grid">
<div class="col fluid"></div>
<div class="col fixed"></div>
<div class="col fluid"></div>
</div>
25、三栏布局,中间内容不确定高度,问怎么让两边的背景始终与内容高度一致?
纯css方法一:
<style type="text/css">
/*主要利用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的*/
body, p, ul { margin:0; padding:0; }
#wrap { overflow:hidden; width:1000px; margin:0 auto; }
#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }
#left { float:left; width:250px; background:#00FFFF; }
#center { float:left; width:500px; background:#FF0000;}
#right { float:right; width:250px; background:#00FF00; }
</style>
<div id="wrap">
<div id="left">
<p>left</p>
</div>
<div id="center">
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div id="right">
<p>right</p>
</div>
</div>
纯css方法二:
<style type="text/css">
/*利用position border技巧方法*/
* {margin:0;padding:0;}
.header, .footer {width:900px;height:50px;margin:0 auto;background:#E5E5E5;}
.content {position:relative;width:600px;margin:10px auto;border-left:170px solid #333333;border-right:130px solid #CCCCCC;}
.mainBox {width:580px;margin-left:10px;overflow:hidden;background:#F4F4F4;}
.sideBar1 {position:absolute;top:0;right:-130px;width:130px;}
.sideBar2 {position:absolute;top:0;left:-170px;width:170px;color:#FFFFFF;}
</style>
<div class="header"></div>
<div class="content">
<div class="mainBox"><p>center</p><p>center</p><p>center</p></div>
<div class="sideBar1"><p>left</p></div>
<div class="sideBar2"><p>right</p></div>
</div>
<div class="footer"></div>
纯css方法三:
<style type="text/css">
/*用背景方法*/
body, p, ul { margin:0; padding:0; }
#wrap { width:1000px; margin:0 auto; background:url(1.png) repeat-y; overflow:hidden;}
#left { float:left; width:250px;}
#center { float:left; width:500px;}
#right { float:right; width:250px;}
</style>
<div id="wrap">
<div id="left">
<p>left</p>
</div>
<div id="center">
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div id="right">
<p>right</p>
</div>
</div>
js方法:
<style type="text/css">
* {margin:0;padding:0;}
#sidebar{float:left; width:25%; background:#f00;}
#right{float:left; width:50%; background:#ccc;}
#ccc{ float:left; width:25%; background:green;}
</style>
<script language="javascript">
function SameH(sidebar,right,ccc)
{
var t=document.getElementById(sidebar);
var b=document.getElementById(right);
var c=document.getElementById(ccc);
var a = new Array();
a[0]=t.scrollHeight;
a[1]=b.scrollHeight;
a[2]=c.scrollHeight;
var MaxValue;
MaxValue = a[0];
for(n in a){
if (a[n] > MaxValue) {
MaxValue = a[n];}
}
t.style.height = MaxValue + "px";
b.style.height = MaxValue + "px";
c.style.height = MaxValue + "px";
}
</script>
<div id="container">
<div id="sidebar">sidebar </div>
<div id="right">22222</div>
<div id="ccc">
<p>fdfa</p>
<p>1 </p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</div>
<script language="javascript">
SameH("sidebar","right","ccc");
</script>
26、css实现全兼容的菱形导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>菱形导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
ul,li,a,span{margin:0;padding:0;list-style:outside none;height:25px;line-height:25px;display:block;}
ul{padding-left:25px;}
ul li{float:left;display:inline;margin-right:26px;}
ul li a,ul li a span{background:url(http://www.codefans.net/jscss/demoimg/201112/navBg.png) -25px 0 no-repeat;}
ul li a{padding:0 25px;font-size:12px;color:#FFF;position:relative;float:left;text-align:center;}
ul li a span{position:absolute;top:0;width:25px;}
ul li a .al{left:-25px;background-position:left 0;}
ul li a .ar{right:-25px;background-position:right 0;}
ul li a:hover{background-position:-25px -25px;}
ul li a:hover .al{background-position:left -25px;}
ul li a:hover .ar{background-position:right -25px;}
ul li a:active,ul li.current a{background-position:-25px -50px;}
ul li a:active .al,ul li.current a .al{background-position:left -50px;}
ul li a:active .ar,ul li.current a .ar{background-position:right -50px;}
</style>
</head>
<body>
<ul>
<li>
<a href="javascript:void(0)"><span class="al"></span>首页<span class="ar"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="al"></span>关于我们<span class="ar"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="al"></span>公司新闻<span class="ar"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="al"></span>网上商城<span class="ar"></span></a>
</li>
</ul>
</body>
</html>
27、Css实现小三角
/*三角向上*/
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
/*三角向下*/
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
/*三角向左*/
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
/*三角向右*/
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
/*直角右下*/
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
28、清除浮动的方法有哪些
方法一:如果高度是固定的,给父级加height
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
方法二:父级结尾处添加额外的标签<div style="clear:both;"></div>
.clearfloat{clear:both;}
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单,代码少,浏览器支持好,不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
方法三:父级div定义 伪类:after和zoom
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;margin-top:10px;width:98%}
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。
方法四:父级div定义 overflow:hidden
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
方法五:父级div定义 overlow:auto
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:内部宽高超过父级div时,会出现滚动条。
建议:如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
方法六:父级div也一起浮动
原理:所有代码一起浮动,就变成了一个整体
优点:没有优点
缺点:会产生新的浮动问题。
建议:不推荐使用,只作了解。
方法七:父级div定义 display:table
原理:将div属性变成表格
优点:没有优点
缺点:会产生新的未知问题。
建议:不推荐使用,只作了解。
方法八:父级结尾处添加标签<br style="clear:both;" />
原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both
建议:不推荐使用,只作了解。
29、Position属性是什么含义?都有哪些值,都什么含义?
Position规定元素的定位类型:包含值有:static,relative,absolute,fixed
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit
规定应该从父元素继承 position 属性的值。
30、怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <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>