目录
- 什么是Css Hack?
- 行内元素和块级元素的具体区别是什么?inline-block是什么?
- 什么是外边距重叠?重叠的结果是什么?
- rgba()和opacity的透明效果有什么不同?
- css中可以让文字在垂直和水平方向上重叠的两个属性是什么?
- 如何垂直居中一个浮动元素?
- px和em的区别。
- 描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗?你了解他们的不同之处?
- Sass、LESS是什么?大家为什么要使用他们?
- display:none与visibility:hidden的区别是什么?
- CSS中link和@import的区别是?
- CSS的盒子模型?
- 为什么要初始化样式?
- BFC是什么?
- 前端页面由哪三层构成,分别是什么?作用是什么?
- 列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?
- HTML与XHTML——二者有什么区别?
- html常见兼容性问题?
- 对WEB标准以及W3C的理解与认识
- 块级元素有哪些?行内元素有哪些?常见的空元素有哪些?
1.什么是Css Hack?
由于不同厂商的浏览器,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
2.行内元素和块级元素的具体区别是什么?inline-block是什么?
块级元素(block)特性:
- 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距(padding-top/padding-bottom)和外边距(margin-top/margin-bottom)都不可改变(也就是padding和margin的left和right是可以设置的),就是里面文字或图片的大小。
浏览器还有默认的天生 inline-block 元素(拥有内在尺寸,可设置高宽,但不会自动换行):
<input>
、<img>
、<button>
、<texterea>
、<label>
还可以通过display
属性,来规定元素应该生成的框的类型
3.什么是外边距重叠?重叠的结果是什么?
外边距重叠就是margin-collapse。
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。
4.rgba()和opacity的透明效果有什么不同?
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
5.css中可以让文字在垂直和水平方向上重叠的两个属性是什么?
垂直方向:line-height
(设置行间的距离(行高))
水平方向:letter-spacing
(增加或减少字符间的空白(字符间距))
<p class="text">css中可以让文字在垂直和水平方向上重叠的两个属性是什么?</p>
.text{
word-break: normal;
width: 100px;
font-size: 16px;
line-height: 10px;
letter-spacing: -5px;
}
letter-spacing的妙用:
可以用于消除inline-block元素间的换行符空格间隙问题。
6.如何垂直居中一个浮动元素?
方法一(父元素相对定位):
.child{
width: 100px;
height: 100px;
background-color:red;
float: left;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
方法二(父元素相对定位):
.child{
width: 100px;
height: 100px;
background-color:red;
float: left;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
方法三(父元素相对定位):
.child {
width: 100px;
height: 100px;
background-color:red;
float: left;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
如何垂直居中一个<img >
?
方法一:
//<img>的容器
.img-container{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法二:
.img-container{
display: flex;
justify-content: center;
align-items: center;
}
7. px和em的区别
px和em都是长度单位
区别:
px的值是固定的,指定是多少就是多少,计算比较容易。
em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
8. 描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗?你了解他们的不同之处?
- Reset样式的目的就是清除某些浏览器的默认样式,方便css的书写:例如:
*{margin:0;padding:0;list-style:none;}
- normalize的理念与reset的不同,他并不是清除浏览器的默认样式,而是尽量将所有的浏览器的默认样式统一。
9.Sass、LESS是什么?大家为什么要使用他们?
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。
他们是CSS预处理器。是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
为什么要使用它们?
- 结构清晰,便于扩展。
- 可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
- 可以轻松实现多重继承。
- 完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译。
10.display:none与visibility:hidden的区别是什么?
display
: 隐藏对应的元素但不挤占该元素原来的空间。
visibility
: 隐藏对应的元素并且挤占该元素原来的空间。
即是,使用display:none
属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden
属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。
11.CSS中link和@import的区别是:
- Link属于html标签,而@import是CSS中提供的
- 在页面加载的时候,link会同时被加载,而@import引用的CSS会在页面加载完成后才会加载引用的CSS
- @import只有在ie5以上才可以被识别,而link是html标签,不存在浏览器兼容性问题
- Link引入样式的权重大于@import的引用(@import是将引用的样式导入到当前的页面中)
12. CSS的盒子模型?
CSS的盒子模型有两种: IE盒子模型
、标准的W3C盒子模型模型
从上面两图可以看出:
标准盒模型:宽高只是内容(content)的宽高
IE盒模型:宽高是内容(content)+填充(padding)+边框(border)的总宽高
css如何设置两种模型:
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
13.为什么要初始化样式?
- 由于浏览器兼容的问题,不同的浏览器对标签的默认样式值不同,若不初始化会造成不同浏览器之间的显示差异
- 但是初始化CSS会对搜索引擎优化造成小影响
14.BFC是什么?
BFC(块级格式化上下文)
,一个创建了新的BFC的盒子是独立布局的,盒子内元素的布局不会影响盒子外面的元素。- 在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
- BFC是指浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外元素的布局,这个渲染区域只对块级元素起作用
15.前端页面由哪三层构成,分别是什么?作用是什么?
结构层 Html :实现页面结构
表示层 CSS :完成页面的表现与风格
行为层 js :实现一些客户端的功能与业务。
16. 列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?
display
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
详情请看:W3C CSS display属性
position
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位 |
relative | 生成相对定位的元素,相对于其正常位置进行定位 |
static | 默认值。没有定位,元素出现在正常的流中 |
inherit | 规定应该从父元素继承 position 属性的值 |
详情请看:W3C CSS position属性
17. HTML与XHTML——二者有什么区别?
HTML 是用来描述网页的一种语言:
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
XHTML
- XHTML 是更严格更纯净的 HTML 代码。
- XHTML 是 HTML 与 XML(扩展标记语言)的结合物。
- XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。
最主要的不同:
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素。
18.html常见兼容性问题?
- 双边距BUG float引起的 使用display
- 3像素问题 使用float引起的 使用dislpay:inline -3px
- 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
- Ie z-index问题 给父级添加position:relative
- Png 透明 使用js代码 改
- Min-height 最小高度 !Important 解决’
- select 在ie6下遮盖 使用iframe嵌套
- 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
- IE5-8不支持opacity,解决办法:
.opacity { opacity: 0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }
- IE6不支持PNG透明背景,解决办法: IE6下使用gif图片
19.对WEB标准以及W3C的理解与认识
web标准简单来说可以分为结构、表现和行为。
W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范
包含如下几点
对于结构要求:(标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助)
- 标签字母要小写
- 标签要闭合
- 标签不允许随意嵌套
对于css和js来说:
- 尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。
- 样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版
- 不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。
20. 块级元素有哪些?行内元素有哪些?常见的空元素有哪些?
块级元素有:
address
- 地址
blockquote
- 块引用
center
- 举中对齐块
dir
- 目录列表
div
- 常用块级容易,也是 css layout 的主要标签
dl
- 定义列表
fieldset
- form 控制组
form
- 交互表单
h1
- 大标题
h2
- 副标题
h3
- 3 级标题
h4
- 4 级标题
h5
- 5 级标题
h6
- 6 级标题
hr
- 水平分隔线
isindex
- input prompt
menu
- 菜单列表
noframes
- frames 可选内容,(对于不支持 frame 的浏览器显示此区块内容)
noscript
- 可选脚本内容(对于不支持 script 的浏览器显示此内容)
ol
- 排序表单
p
- 段落
pre
- 格式化文本
table
- 表格
ul
- 非排序列表
行内元素有:
a
- 锚点
abbr
- 缩写
acronym
- 首字
b
- 粗体 (不推荐)
bdo
- bidi override
big
- 大字体
br
- 换行
cite
- 引用
code
- 计算机代码 (在引用源码的时候需要)
dfn
- 定义字段
em
- 强调
font
- 字体设定 (不推荐)
i
- 斜体
img
- 图片
input
- 输入框
kbd
- 定义键盘文本
label
- 表格标签
q
- 短引用
s
- 中划线 (不推荐)
samp
- 定义范例计算机代码
select
- 项目选择
small
- 小字体文本
span
- 常用内联容器,定义文本内区块
strike
- 中划线
strong
- 粗体强调
sub
- 下标
sup
- 上标
textarea
- 多行文本输入框
tt
- 电传文本
u
- 下划线
var
- 定义变量
常见的空元素有:
<br>
<hr>
<img>
<input>
<link>
<meta>
可变元素:
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet
- java applet
button
- 按钮
del
- 删除文本
iframe
- inline frame
ins
- 插入的文本
map
- 图片区块(map)
object
- object对象
script
- 客户端脚本
常见的空元素:
<br>
<hr>
<img>
<input>
<link>
<meta>
鲜为人知的是:
<area>
<base>
<col>
<command>
<embed>
<keygen>
<param>
<source>
<track>
<wbr>