前端进阶试题-CSS篇
2015-10-20 11:09
465 查看
人呐都不知道,自己不可以预料。
一个人的命运啊,当然要靠自我奋斗。但是也要考虑历史的行程。
我绝对想不到我一个学设计的,怎么就开始写代码了呢?
但是经理同志对我讲:公司已经研究决定了。
后来我念了两首诗叫“苟利国家生死以,岂因祸福避趋之”。所以我就写起了代码。
记得似乎是想进一个交流群,于是下载了做做看。
结果题断断续续地做了一半,群是哪个也忘了。
想来不如发表在这里,权当是记录一下自己的姿势水平吧。
什么是盒模型?
网页中的每个元素都是长方形的“盒子”。标准的盒模型有如下属性:
Width:盒模型内容块从最左到最右的距离。
Height:盒模型内容块从最上到最下的距离。
Border:盒模型的边界。
Padding:盒模型内容边界到盒模型border内缘的距离。
Margin:盒模型border的外缘到父容器或兄弟容器的距离。
width、height的值不包含padding和border。也就是说一个标准的盒模型其最终占位宽度/高度为width/height、padding、border之和。而元素之间的margin是可共享的。
Doctype的几种类型?
HTML 4.01中有三种Doctype,分别引用Strict,Traditional以及Frameset三种DTD。通常我们引用Traditional类型。
HTML 5中只有一种Doctype。
如何布局左不动右边自适应的两列布局?
方法一:
方法二:
如何布局两列等高?
方法二:
如何布局右侧定宽,左侧或中间自适应?
方法二:
如何布局三列自适应?
gif, png, jpg的区别?
GIF:无损压缩,多用于网页动画,支持8 bit彩色,支持单一透明色;
PNG:无损压缩,常见格式有PNG-8与PNG-24,支持full-alpha通道(256级可调半透明色),但不支持动画,由于其可支持full - alpha的特性,可以轻松应付各种背景色,在现代浏览器中不需要动画的前提下可以完全替代GIF;
JPG:有损压缩,24 bit真彩色,在照片压缩方面具有其他格式无可比拟的优势,在这方面无可替代。
什么是css sprite?优缺点?
CSS sprite,CSS图像整合技术,又称CSS精灵、CSS贴图定位,是将页面上所有需要的图片都做在同一张大图上,需要时利用CSS clip属性或其他方式显示其中的一部分的技术。
这种技术的优点在于:
1大大减少了http请求的次数,节省资源,明显提高网页的整体性能,这也是该技术被广泛应用和传播的主要原因;
2使用一张大图代替许多小图能够有效地减少图片总字节数;
3解决了网页设计师对单张图片命名的困扰,只需对集合图命名即可;
4易于修改网站整体配色,只需调整集合图片色调即可,省却单张调整时间。
这种技术的缺点在于:
1合并多张图片并有序整理,本身工作精细繁琐、量大;
2对高分屏下自适应页面适用性并不算太好,有时容易出现背景断裂;
3虽然修改配色容易,但是当需要新增图片时,维护不易。
制作细线表格?
position: relative, absolute, fixed区别与联系?
position: relative以元素本来的位置(即position: static状态下的位置)为基准进行定位,且只移动元素显示的位置,实际占位不动。它的位移将使它覆盖其他框或被其他框覆盖,具体取决于z-index值。
Position: absolute 以祖先元素中最近的一个同为绝对定位的元素为基准进行定位,脱离文档流。如果祖先元素中没有绝对定位元素,那么将以浏览器为基准
position: fixed 以浏览器窗口为基准进行定位,脱离文档流,这种定位的元素不会随页面滚动而上下滚动,它永远固定在浏览器窗口的某个位置。
如何居中一个float: left的元素?
CSS在各浏览器下的兼容问题你通常是怎么来解决的,请分享你的经验:
一个人的命运啊,当然要靠自我奋斗。但是也要考虑历史的行程。
我绝对想不到我一个学设计的,怎么就开始写代码了呢?
但是经理同志对我讲:公司已经研究决定了。
后来我念了两首诗叫“苟利国家生死以,岂因祸福避趋之”。所以我就写起了代码。
记得似乎是想进一个交流群,于是下载了做做看。
结果题断断续续地做了一半,群是哪个也忘了。
想来不如发表在这里,权当是记录一下自己的姿势水平吧。
什么是盒模型?
网页中的每个元素都是长方形的“盒子”。标准的盒模型有如下属性:
Width:盒模型内容块从最左到最右的距离。
Height:盒模型内容块从最上到最下的距离。
Border:盒模型的边界。
Padding:盒模型内容边界到盒模型border内缘的距离。
Margin:盒模型border的外缘到父容器或兄弟容器的距离。
width、height的值不包含padding和border。也就是说一个标准的盒模型其最终占位宽度/高度为width/height、padding、border之和。而元素之间的margin是可共享的。
Doctype的几种类型?
HTML 4.01中有三种Doctype,分别引用Strict,Traditional以及Frameset三种DTD。通常我们引用Traditional类型。
HTML 5中只有一种Doctype。
如何布局左不动右边自适应的两列布局?
方法一:
<style> .container { margin: 0 auto; width: 80%; min-width: 300px; overflow: hidden; } .column1 { float: left; width: 300px; background: #c3ebeb; } .column2 { margin: 0; min-width: 0; background: #e2b9b9; clear: right; } </style> <div class="container"> <div class="column1">1</div> <div class="column2">2</v> </div>
方法二:
<style> .row { display: table; } .row div { display: table-cell; } .col-fixed { width: 200px; } </style> <div class="row"> <div class="col-fixed">1</div> <div>2</div> </div>
如何布局两列等高?
<style> .container { margin: 0 auto; width: 80%; min-width: 300px; overflow: hidden; } .column1 { float: left; margin-bottom: -100%; width: 300px; padding-bottom: 100%; background: #c3ebeb; clear: right; } .column2 { margin-left: 300px; margin-bottom: -100%; min-width: 0; padding-bottom: 100%; background: #e2b9b9; } </style> <div class="container"> <div class="column1">1<br />3</div> <div class="cocolumn2">2</div> </div>
方法二:
<style> .row { display: table; } .row div { display: table-cell; } .col-fixed { width: 200px; } </style> <div class="row"> <div class="col-fixed">1<br /></div> <div>2</div> </div>
如何布局右侧定宽,左侧或中间自适应?
<style> .container { margin: 0 auto; width: 80%; min-width: 300px; overflow: hidden; } .column1 { float: right; width: 300px; background: #c3ebeb; } .column2 { margin: 0; min-width: 0; background: #e2b9b9; clear: left; } </style> <div class="container"> <div class="column1">1</div> <div class="column2">2</div> </div>
方法二:
<style> .row { display: table; } .row div { display: table-cell; } .col-fixed { width: 200px; } </style> <div class="row"> <div class="col-fixed">1</div> <div>2</div> <div class="col-fixed">3</div> </div>
如何布局三列自适应?
<style> .container { display: table; } .container div { display: table-cell; } </style> <div class="container"> <div>1<br />3</div> <div>2</div> <div>3</div> </div>
gif, png, jpg的区别?
GIF:无损压缩,多用于网页动画,支持8 bit彩色,支持单一透明色;
PNG:无损压缩,常见格式有PNG-8与PNG-24,支持full-alpha通道(256级可调半透明色),但不支持动画,由于其可支持full - alpha的特性,可以轻松应付各种背景色,在现代浏览器中不需要动画的前提下可以完全替代GIF;
JPG:有损压缩,24 bit真彩色,在照片压缩方面具有其他格式无可比拟的优势,在这方面无可替代。
什么是css sprite?优缺点?
CSS sprite,CSS图像整合技术,又称CSS精灵、CSS贴图定位,是将页面上所有需要的图片都做在同一张大图上,需要时利用CSS clip属性或其他方式显示其中的一部分的技术。
这种技术的优点在于:
1大大减少了http请求的次数,节省资源,明显提高网页的整体性能,这也是该技术被广泛应用和传播的主要原因;
2使用一张大图代替许多小图能够有效地减少图片总字节数;
3解决了网页设计师对单张图片命名的困扰,只需对集合图命名即可;
4易于修改网站整体配色,只需调整集合图片色调即可,省却单张调整时间。
这种技术的缺点在于:
1合并多张图片并有序整理,本身工作精细繁琐、量大;
2对高分屏下自适应页面适用性并不算太好,有时容易出现背景断裂;
3虽然修改配色容易,但是当需要新增图片时,维护不易。
制作细线表格?
<style type="text/css"> Table { border-collapse: separate; bor der-spacing: 1px; background: #dddddd; } table.one td { background: #ffffff; } </style> </head> <body>
position: relative, absolute, fixed区别与联系?
position: relative以元素本来的位置(即position: static状态下的位置)为基准进行定位,且只移动元素显示的位置,实际占位不动。它的位移将使它覆盖其他框或被其他框覆盖,具体取决于z-index值。
Position: absolute 以祖先元素中最近的一个同为绝对定位的元素为基准进行定位,脱离文档流。如果祖先元素中没有绝对定位元素,那么将以浏览器为基准
position: fixed 以浏览器窗口为基准进行定位,脱离文档流,这种定位的元素不会随页面滚动而上下滚动,它永远固定在浏览器窗口的某个位置。
如何居中一个float: left的元素?
element{ float: left; position: relative; left: 50%; }
CSS在各浏览器下的兼容问题你通常是怎么来解决的,请分享你的经验:
要么放弃IE 6和7,要么我选择狗带
相关文章推荐
- css鼠标手型cursor中hand与pointer
- 图片变灰的css,能兼容各种浏览器的写法。
- css 固定宽高比容器
- CSS从大图中抠取小图完整教程(background-position应用)
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
- CSS
- java生成带html样式的word文件
- css hack
- CSS插入样式表的方法
- css中的ID选择器和CLASS选择器的区别
- iphone设备的safari浏览器中input标签的CSS样式设置
- 详解Qt样式/颜色机制:调色板(QPalette)与样式表(Style Sheets)
- CSS学习笔记
- 去除UC浏览器点击的默认样式
- 高效的CSS代码(2)
- 高效的CSS代码(1)
- css 块级元素和内联元素
- css 块级元素和内联元素
- 行内元素和块级元素的区别?以及转换,点击块级元素触发行内元素
- 行内元素和块级元素的区别?以及转换,点击块级元素触发行内元素