CSS面试题
1.有哪些方式可以对一个DOM设置它的CSS样式？
外部样式表。引入一个外部CSS文件；
内部样式表。将CSS代码放在<head>标签内部；
内联样式，将CSS样式直接定义在HTML元素内部；
2.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器的可视范围内？
最基本的：
设置display属性为none，或者设置visiblity为hidden
技巧性：
设置高度为0， 设置透明度为0，设置z-index位置在-1000
3.超链接访问过后hover样式就不出现的问题时什么？如何解决？
被点击访问过的超链接样式不再具有hover和active了，解决方式是改变CSS属性的排列顺序：L-V-H-A（linked, visited, hover, active）。
4.什么是Css Hack?ie6,7,8的hack分别是什么？
针对不同的浏览器写不同的CSS Code的过程，就是CSS Hack。实例如下：
#test{
width: 300px;
height: 300px;
background-color: blue;
background-color: red\9; /* all ie */
background-color: yellow\0; /* ie8 */
+background-color: pink; /* ie7 */
_background-color: orange; /* ie6 */
:root #test{
background: purple\9; /* ie9 */
}
@media all and {min-width: 0px} #test{background-color: black\0;} /* opera */
@media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /* chrome and safari */
}
@media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。
5.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
块级元素（block）特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。
width、height、padding（内边距）、margin(外边距)都可控制。
内联元素（inline）特性：
宽度、高度、内边距的padding-top/padding-bottom和外边距的margin-top、margin-bottom都不可改变（也就是padding和margin的left和right是可以设置的）。
这里还有其他问题。浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些元素是天生inline-block元素？
它们是<input>、<img>、<button>、<textare>、<label> 。
6.rgba()和opacity的透明效果有什么区别？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或起背景色。设置rgba透明的元素的子元素不会继承透明效果。
7.CSS中可以让文字在垂直和水平方向重叠的两个属性分别是什么？
垂直方向：line-height。设置成比字体高度还小就可以让两行重叠
水平方向：letter-spacing。设置为负值即可实现重叠。
8.如何垂直居中一个浮动元素？
下面代码分别实现了已知元素高度、未知元素高度、图片的垂直居中方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中一个浮动元素</title>
<style type="text/css">
#div1 {
background-color:#6699ff;
width: 200px;
height: 200px; position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
} #div2{
width: 200px;
height: 200px;
background-color: #6699ff; margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
} #container{
width: 600px;
height: 600px;
background: hotpink; display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div style="background:hotpink; width: 600px; height: 600px; position: relative;">
<div id="div1">
方法一：已知元素的高宽
</div>
</div>
<br>
<div style="background:hotpink; width: 600px; height: 600px; position: relative;">
<div id="div2">
方法二:未知元素的高宽
</div>
</div>
<br>
<div id="container">
<img width="200px" height="200px" src="assets/images/mug.jpg">
</div>
</body>
</html>
9.px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em, 10px = 0.625em。
10.描述一个“reset”的css文件并如何使用它。知道normalize.css吗？你了解他们的不同之处吗?
重置样式非常多，凡是一个前端开发人员肯定会有一个常用的重置css文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的的默认样式，如果你不处理，在不同浏览器下回存在必要的风险，或者更有戏剧性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供一套合理的默认样式值。既能够让众多浏览器达到一致和合理，但不扰乱其他的东西（如粗体的标题）。
11.Sass、Less是什么？大家为什么要使用他们？
他们是CSS预处理器。他是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。
例如Less是一种动态样式语言。将CSS赋予了动态语言的特性，如变量，继承，运算，函数。Less即可以在客户端上运行（支持IE6+,Webkit,Firefox），也可以在服务端运行（借助Node.js）。
Sass变量必须是$开始，而Less变量必须使用@符号开始。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无异议的机械劳动。
可以轻松实现多重继承。
完全兼容CSS代码，可以方便地应用到老项目中。Less只是在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译。
12.display:none和visiblity:hidden的区别是什么？
display:隐藏对应元素但不挤占该元素原来的空间。
visiblity: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性都将“丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置任然存在。
13.知道css有个content属性吗？有什么用？有什么应用？
知道。CSS的content属性专门应用在before/after伪元素上，用来插入生成内容。
最常见的应用是利用伪类清除浮动：
CSS Code复制内容到剪贴板
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; } .clearfix {
*zoom:1;
}
after伪元素通过content在元素的后面生成一个点的块级元素，再利用clear: both清除浮动。
14.盒子模型在不同浏览器上的区别
盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型。它们对盒子模型的解释各不相同，先看看我们熟知的标准盒子模型：
从上图可以看到标准的w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。
在来看下IE盒子模型：
从上图可以看到IE盒子模型的范围也包括margin、border、padding、content，和标准w3c盒子模型不同的是：ie盒子模型的content部分包含了border和padding。
例如：
一个盒子的margin为20px，border为1px，padding为10px，content的宽为200px、高为50px，加入用标准盒子模型解释，那么这个盒子需要占据的位置为：
宽：20*2 + 1 * 2 + 10* 2 + 200 = 262px, 高：20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px。
盒子的实际大小为：宽1*2 + 10 * 2 + 200 = 222px,高1* 2 + 10 * 2 + 50 = 72px。
假如用IE盒子模型，那么盒子需要占据的位置为：
宽：20 * 2 + 200 = 240px,高：20 * 2 + 50 = 70px。
盒子的实际大小：宽200px,高50px。
一般推荐使用W3C盒子模型，怎样才算是选择了标准W3C盒子模型呢？就是在网页上加DOCKTYPE申明。如果不加，那么各个浏览器会根据自己的行为去理解网页。
CSS3增加了box-sizing属性，值包括content-box|border-box|inherit。
在我们的重置样式文件中一般也会重置这个属性，把box-sizing设置成border-box方便于排版。
CSS面试题的更多相关文章
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 一道灵活的css笔试题
今天在网上看到一css笔试题,乍一看很简单,实则内部暗藏玄机,题目大概是:九宫格,每格长宽50px,边框宽度5px,鼠标经过边框变红,效果如下: 鼠标路过时: 以下是代码(如有不足之处望多加指正) & ...
- 2019前端面试系列——CSS面试题
盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...
- CSS面试题&知识点汇总
问题&答案 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? 有两种, IE 盒子模型.W3C 盒子模型: 盒模型: 内容(content).填充(padding).边界(m ...
- css面试题汇总 （持续更新）
前言:这篇随笔是为了准备后面的面试而整理的,网上各种面试题太多了,但是我感觉很多太偏了,而且实际开发过程中并不会遇到,因此这里我整理一些比较常用的,或者是相对比较重要的知识点,每个知识点都会由浅入深, ...
- HTML css面试题
1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所访问.内容能被更 ...
- 【css面试题】三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（至少2种方法）
这是我在一家公司面试时遇到的问题,当时没有答上来!! 所以看到的小伙伴一定要注意了!! 变化浏览器宽度可看到效果: 左 右 中 然后我们来看看代码: 第一种方法:(浮动) <style type ...
- 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- CSS笔试题
如何实现移动端9宫格 如何实现移动端下列8宫格 实现移动端图片画廊CSS样式 写一个简单的animation的css动画 美化select,radio,range样式,只需考虑谷歌浏览器,下面给出的是 ...
随机推荐
- redis（三）
string string是redis最基本的类型 最大能存储512MB数据 string类型是二进制安全的,即可以为任何数据,比如数字.图片.序列化对象等 命令 设置 设置键值 set key va ...
- yii2 Gridview网格小部件
Gridview 网格小部件 一.特点: 1.是yii中功能最强大的小部件之一: 2.非常适合快速建立系统的管理后台. 3.用 dataProvider 键来指定数据的提供者 4.用 filterMo ...
- Vector源码分析和实例应用
1.Vector介绍 Vector 是矢量队列,它是JDK1.0版本添加的类.继承于AbstractList,实现了List, RandomAccess, Cloneable这些接口. Vector ...
- Spring+Quartz实现定时任务的配置方法（转）
1.Scheduler的配置 <bean id="myScheduler" class="org.springframework.scheduling.quartz ...
- Linux安装gcc时碰到的有关问题解决（解决gcc依赖有关问题）
Linux安装gcc时碰到的有关问题解决(解决gcc依赖有关问题) rpm安装gcc时碰到的有关问题解决(解决gcc依赖有关问题) 提示:error: Failed dependencies: clo ...
- .Net core下的配置设置（二）——Option
我在前面的文章.Net core下的配置设置(一)——Configuration中介绍了.net core下配置文件的读取方法,在.net core中,直接从Configuration对象中读取的并不 ...
- SSE图像算法优化系列二十九：基础的拉普拉斯金字塔融合用于改善图像增强中易出现的过增强问题（一）
拉普拉斯金字塔融合是多图融合相关算法里最简单和最容易实现的一种,我们在看网络上大部分的文章都是在拿那个苹果和橙子融合在一起,变成一个果橙的效果作为例子说明.在这方面确实融合的比较好.但是本文我们主要讲 ...
- iOS获取当前城市
1.倒入头文件 #import <CoreLocation/CoreLocation.h> 2.实现定位协议CLLocationManagerDelegate 3.定义定位属性 @prop ...
- Windows两个网卡配置路由规则 同时访问内网和外网
电脑上有两个网卡,一个有线一个无线,有线连局域网,无线连外网,虽然两个网都连着,但还是会出现访问不通的情况. 这就要求我们自己来配置路由规则,让内网的访问走内网的网卡,外网的访问走外网的网卡. 一.查 ...
- phpBB3导入版面的Python脚本
关联的数据表 在phpBB3中导入版面时, 需要处理的有两张表, 一个是 forums, 一个是 acl_groups. 如果是干净的论坛, 可以不保留安装时填入的默认分区和版面, 直接用以下语句初始 ...