前端进阶试题（css部分）
一、css 40分
1. 什么是盒模型？
答：
2. Doctype的几种类型？
答：①.过渡的；②.严格的；③.框架的 更多详细介绍参考：资料
3. 如何布局左不动右边自适应的两列布局？
答：两种简单的方法：position:absolute;和float: left; 两种效果是一样的，代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
} #left {
position:absolute;
/*float: left;*/ /*这两个有什么区别，后面要更进下*/
background-color: green;
width: 220px;
} #content {
background-color: orange;
margin-left: 220px;/*==等于左边栏宽度==*/
}
</style> </head>
<body>
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
</body>
</html>
效果：
5.如何布局右侧定宽，左侧或中间自适应？
答：代码实现如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>右侧定宽，左侧自适应宽</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#content {
width: 100%;
color: red;
float: left;
background:#666;
height:400px;
margin-right: -230px;/*==等于右侧栏宽度==*/
}
#side{
width:230px;/*==等于右侧栏宽度==*/
height:500px;
color:#fff;
background:green;
float: left;
}
</style> </head>
<body>
<div id="content">Main Content</div>
<div id="side"></div>
</body>
</html>
6. 如何布局三列自适应？
答：
①用postion:absoloute属性,左右定宽100px,中间宽度自适应，这里可否将postion:absoloute属性直接换成float:left属性，因为上面有一个例子，就感觉这两个属性差不多，实际上是不可以的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>左右定宽100px,中间宽度自适应</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.container{
width:100%;
position:relative;/*absolute是基于整个屏幕,它的父级元素如果设置 relative ,那就就是基于它的父元素的左上角计算*/
height:100%;
overflow:auto;/*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/
}
.left_a{
width:100px;
position:absolute;
left:0px;
top:0px;
background-color:green;
height:100%;
}
.main{
position:absolute;
width:100%;
height:100%;
background-color:#CCCCCC;
left:100px;
right:100px;/*左右定宽100px*/
top:0px;
}
.right_b{
width:100px;
position:absolute;
right:0px;
top:0px;
background-color:red;
height:100%;
}
</style>
</HEAD> <BODY>
<div class="container">
<div class="left_a">leftaaaa</div>
<div class="main">
maincontent
</div>
<div class="right_b">rightbbbb</div>
</div>
</BODY>
</HTML>
②接下来看看float:left属性怎么用，感觉没有上面例子用得好：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>左右定宽100px,中间宽度自适应</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#container{
padding-left:100px;/*LCwidth*/
padding-right:100px;/*RCwidth*/
}
.column{
float:left;
position:relative;
}
#center{
width:100%;
height: 100%;
background-color: green;
}
#left{
width:100px;/*LCwidth*/
height: 100%;
margin-left: -100%;
background-color: red;
right:100px;/*LCwidth*/
}
#right{
width:100px;/*RCwidth*/
height: 100%;
background-color: black;
margin-right:-100px;
}
#footer{
clear:both;
}
</style>
</HEAD> <BODY>
<div class="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column">maincontent</div>
<div id="right" class="column"></div>
</div>
<div class="footer"></div>
</BODY>
</HTML>
7. gif,png,jpg的区别？
答：我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。
PNG就是为取代GIF而生的，而且PNG的压缩算法也要优于GIF。
参考资料
8. 什么是css sprite?优缺点？
答：CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
优点： 减少网页的http请求，从而大大的提高页面的性能。
缺点：在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>8</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#skyline{
width: 400px;
background-image: url(test8.jpg);
height: 200px;
position: relative;
margin: auto;
padding: 0;
}
#skyline li{
margin: 0;
padding: 0;
list-style-type: none;
position: absolute;
top: 0;
}
#skyline li,#skyline a{
height: 200px;
display: block;
}
#panel1b {left: 0; width: 95px;}
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}
#panel1b a:hover {
background: transparent url(test8.jpg) 0 -200px no-repeat;
}
#panel2b a:hover {
background: transparent url(test8.jpg) -96px -200px no-repeat;
}
#panel3b a:hover {
background: transparent url(test8.jpg) -172px -200px no-repeat;
}
#panel4b a:hover {
background: transparent url(test8.jpg) -283px -200px no-repeat;
}
</style>
</HEAD> <BODY>
<ul id="skyline">
<li id="panel1b"><a href="#1"></a></li>
<li id="panel2b"><a href="#2"></a></li>
<li id="panel3b"><a href="#3"></a></li>
<li id="panel4b"><a href="#4"></a></li>
</ul>
</BODY>
</HTML>
效果：
参考资料
10. 制作细线表格？
答：这里的考点应该是这个属性的用法border-collapse:collapse;
代码例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>左右定宽100px,中间宽度自适应</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table,tr,th {
border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
border:1px solid #999; /* 设置边框属性:边框宽度1px、样式(solid=实线)、颜色(#999=灰) */
}
</style>
</HEAD> <BODY>
<table>
<caption>个人信息表</caption>
<thead>
<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
</thead>
<tbody>
<tr><th>ww</th><th>11</th><th>男</th></tr></thead>
<tr><th>ff</th><th>22</th><th>男</th></tr></thead>
<tr><th>zz</th><th>33</th><th>男</th></tr></thead>
</tbody>
</table>
</BODY>
</HTML>
效果：
11. position:relative,absolute,fixed区别与联系？
答：postion一共有四个可选属性：static|relative|absolute|fixed，默认是static。下面看看relative,absolute,fixed之前的区别和联系。
一：relative
①例子：
这个效果将是：
设置了relative的属性后
这个效果将是：
从例子中可以看出：relative会导致自身位置的相对变化，但不会影响其它元素的位置、大小。
②relative产生一个新的定位上下文，和absolute用法会产生联系
例子：
效果：
二：absolute
在介绍relative的第二个例子时已经提到absolute属性，继续沿着上面的例子来介绍absolute
例子：
效果：
从上面可以看出absolute三个特点：
①absolute元素脱离了文档结构（和float元素类似，float元素也会脱离文档结构），和relative不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。
②absolute元素具有“包裹性”。之前<p>的宽度是撑满整个屏幕的，而此时<p>的宽度刚好是内容的宽度。
③absolute元素具有“跟随性”。没有设置top、left的值时，与其前一个元素的top,left值为0。
例子：
效果：
这里突出了absolute元素具有“悬浮”效果
如果为absolute设置了top、left，absolute元素会根据最近的定位上下文确定位置，浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：
三：fixed
其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置
参考资料
12. 如何居中一个float:left的元素？
答：
例子1：
效果：
例子2：
效果跟例子1是一样的。
13. Css在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验；
答：印象深的是：
①div垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高 line-height; 然后插入文字，就垂直居中了。
②IE8不支持:last-child（匹配属于其父元素的最后一个子元素的每个元素），这个选择器一般在哪里可以用到呢？我的经验是在做这个导航效果
时用到li元素，本想通过
来使最后一个列显示为空，不过实际情况是IE8不支持这个选择器，最后页面在li的最后一个元素加了一个class
③Opacity透明度兼容处理
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
前端进阶试题（css部分）的更多相关文章
- 前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
- 2019前端面试系列——CSS面试题
盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...
- 前端进阶（12） - css 的弱化与 js 的强化
css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- web前端面试试题总结---html篇
HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...
- web前端面试试题总结---其他
其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy ...
- web前端面试试题总结---javascript篇
JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...
随机推荐
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件
昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...
- 关于开启.NET在线提升教育培训的通知！ - 可在此页面观看在线直播！
年前在线公开课程通知: 近期在开启VIP课程,隔天讲一次,年前其它时间插空讲公开课,主题:设计模式系列 1:培训 - 大概不会讲的内容: 1:不讲系列. 2:不讲入门. 3:不讲我不懂的! 2:培训 ...
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
- OpenCV人脸识别Eigen算法源码分析
1 理论基础 学习Eigen人脸识别算法需要了解一下它用到的几个理论基础,现总结如下: 1.1 协方差矩阵 首先需要了解一下公式: 共公式可以看出:均值描述的是样本集合的平均值,而标准差描述的则是样本 ...
- 缓存工具类CacheHelper
代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...
- swift开发新项目总结
新项目用swift3.0开发,现在基本一个月,来总结一下遇到的问题及解决方案 1,在确定新项目用swift后,第一个考虑的问题是用纯swift呢?还是用swift跟OC混编 考虑到新项目 ...
- 信息安全－1：python之playfair密码算法详解[原创]
转发注明出处: http://www.cnblogs.com/0zcl/p/6105825.html 一.基本概念 古典密码是基于字符替换的密码.加密技术有:Caesar(恺撒)密码.Vigenere ...
- Express 教程 01 - 入门教程之经典的Hello World
目录: 前言 一.Express?纳尼?! 二.开始前的准备工作 三.测试安装之经典的Hello World 四.使用express(1)来生成一个应用程序 五.说明 前言: 本篇文章是建立在Node ...
- 一步步开发自己的博客 .NET版（9、从model first替换成code first 问题记录）
为什么要改用code first 用过code first的基本上都不会再想用回model first或是db first(谁用谁知道).不要问我为什么不一开始就直接使用code first,因为那个 ...