1. HTML和HTML5、CSS和CSS3相比,有什么变化?
HTML5中新增的内容有:
- 自定义属性:data-id
- 语义化更好的内容标签: header、nav、footer、aside、article、section
- 音频、视频标签:audio、video (浏览器不支持自动播放 ,谷歌浏览器不支持音频自动播放,但是视频支持自动播放)
- 数据存储 localStorage、sessionStorage
- 拖拽释放(Drag and drop) API
- 画布(Canvas) API
- 地理(Geolocation) API
- 新的 input 类型:calendar、time、month 、week 、date 、email、url、search 、number 、range 、 color
- 新的表单属性:fieldset、legent、placeholder、autofocus、required、maxlength、minlength、novalidate、autocomplete
CSS3中新增的内容有:
-
颜色:新增RGBA,HSLA模式
-
文字阴影(text-shadow)、rem 字体大小单位(相对于根元素 font-size 属性值,根元素字体大小设置为 62.5% 则 1rem 等于 10px)
-
边框: 圆角(border-radius)边框阴影: box-shadow
-
怪异盒模型:box-sizing
-
背景:background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局
-
渐变:linear-gradient、radial-gradient
-
过渡:transition,可实现动画
-
自定义动画: animation
-
在CSS3中唯一引入的伪元素 :selection.
-
媒体查询 : @media only screen and (max-width:800px) ===>除了screen还有print打印机、speech屏幕阅读器、all 所有媒体类型设备
-
border-image
-
2D转换:transform : translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
-
3D转换 :transform-style : preserve-3d;
-
新增选择器:属性选择器、伪类选择器、伪元素选择器。
-
网格系统,把网页均分成12列进行布局
基于此文有所改动:H5C3新特性
2. 标签元素的分类和特点 (元素显示模式)
标签元素可以分成三大类:块状元素、行内元素、行内块元素,
对应的元素显示模式为:display:block; display:inline; display:inline-block;
块状元素:hn、p、div、ul、ol、dl、li、dd、dt、table、thead、tbody、caption、tr、form、header、footer、section、nav、article、aside
特点:
- 独占一行,宽、高和四个方向的内、外边距都可以设置;
- 默认宽度是父元素的100%,默认高度是其内容撑起来的实际高度,table标签除外;
- 可以包含任意元素(表格系除外、h标签不能包含h标签、p标签不能包含块状元素);
行内元素:span、a、b、strong、i、em、u、ins、s、del
特点:
-
不独占一行,设置宽高无效;
-
默认的宽、高都是内容撑起来的;
-
水平方向的外边距可以设置,垂直方向设置无效;
四个方向的内边距皆可设置; -
一般只能包含行内元素与文本内容
行内块元素:img、audio、video、input、button、label、select、option、textarea
特点:
- 不独占一行,宽高可以设置;
- 默认宽高由其本身特点决定;
- 四个方向的内外边距都可以设置;
- 一般不包含其他元素;
3. 圣杯布局(双飞翼布局)有哪几种实现方式
- calc()函数 2. 左浮动、右浮动 3.绝对定位加内边距 4.弹性布局
详细写法在这里:CSS实现圣杯布局
4.弹性盒模型有哪些属性和属性值,有什么效果
属性名 | 属性值 | 效果 |
---|---|---|
flex-direction | row、row-reverse、column、column-reverse | 设置内部项目的排列方向 |
flex-wrap | nowrap、wrap、wrap-reverse | 设置换行方式,wrap-reverse为第一行在最下面 |
flex-flow | flex-flow属性是flex-direction以及flex-wrap属性的简写形式,默认值为row nowrap | 上面两种属性的简写 |
justify-content | flex-start、flex-end、center、space-between、space-around、space-evenly | 项目在主轴(X轴)上的对齐方式 |
align-items | flex-start、flex-end、center、baseline、stretch(默认值) | 项目在交叉轴(Y轴)上的对齐方式 |
align-content | flex-start、flex-end、center、space-between、space-around、stretch(默认值) | 有多根轴线时的对齐方式。如果项目只有一根轴线,那么该属性不起作用 |
order | 1、2、3… | 项目的排列顺序,数字越小越靠前 |
flex-grow | flex-grow:1; … | 项目放大的比例 |
flex-shrink | flex-shrink: 3; … | 项目缩小的比例 |
flex-basis | flex-basis: 100px; | 规定弹性项目的初始长度。 |
flex | flex: flex-grow flex-shrink flex-basis; | flex-grow,flex-shrink 和 flex-basis 的简写 |
align-self | start、end、stretch、center | 设置个别项目在交叉轴(Y轴)上的对齐方式 |
5.常见的盒子模型有哪些,有什么区别
- W3C盒模型(标准盒模型)
给一个标签添加:box-sizing:content-box;(元素默认)
这个标签就转换为了w3c盒模型
标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度
- 怪异盒模型(又称ie盒模型)
给一个标签添加:box-sizing:border-box;
这个标签就转换为了怪异盒模型
标签得实际宽度 = 设置的宽度
如果设置了padding和border就是从设置的实际宽高中减去,减去后才是内容的宽高。
区别:
主要区别:对于宽高的定义不同
w3c盒模型:设置的宽度就等于内容的宽度
怪异盒模型:内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度
6.写一个网易云播放动画,图片旋转+撞针来回拨动
图片旋转动画:
<style>
.rotate360 {
animation: rotate360 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-play-state: paused;
}
@keyframes rotate360 {
from {
rotate: 0deg;
}
to {
rotate: 360deg;
}
}
</style>
撞针来回动画:
<style>
.needleGo {
animation: needleGo 0.7s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.needleBack {
animation: needleBack 0.7s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
}
@keyframes needleGo {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-16deg);
}
}
@keyframes needleBack {
from {
transform: rotate(-16deg);
}
to {
transform: rotate(0deg);
}
}
</style>
7. 谈一谈你对浮动的理解
浮动可以使元素脱离标准流,漂浮到指定位置;(标准流:元素按照本身特性进行排列布局)
设置浮动的初衷是实现文字环绕图片的效果。
浮动的 特点:
- 添加浮动后的元素与其他元素不在同一平面,会漂浮在其他元素之上;
- 添加浮动后的元素不占位置;
- 添加浮动后的多个元素会在同一行上显示;
- 添加浮动后的元素不会超出父元素的内容区域,即不会覆盖父元素的边框与内边距
- 添加浮动后的元素会有行内块元素的部分特性(比如默认内外边距、不再独占一行)
浮动带来的 影响:添加浮动后的子元素撑不开父元素的高度;
怎么清除浮动带来的影响:
- 额外标签法:给子元素添加一个兄弟元素,为兄弟元素设置 clear:both; 或 clear:left; 、clear:right;(clear:both 的本质就是闭合浮动, 让父盒子闭合出口和入口,不让子盒子出来)
这种方式增加了无意义的标签,使结构不规范、不够语义化; - 给父元素添加 overflow:hidden; 通过触发BFC方式,实现清除浮动。
代码简洁,但内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示溢出的元素。 - 伪元素清除浮动:在父元素的末尾或者开头添加伪元素 ::after、::before ,在伪元素中设置以下属性:
<style>
#parent::after{
content: "";
display: block;
clear:both;
}
</style>
但 IE6-IE7 不支持伪元素;
- 双伪元素清除浮动,和单伪元素一样:
<style>
#parent::after,
#parent::before{
content: "";
display: block;
clear:both;
}
</style>
8.伪类有哪些,它们的作用和书写顺序是什么
转载自:简书
- link 表示的是正常情况下链接的样式。
- visited 代表链接访问后的样式,则链接一旦被访问,则之后它的样式就会是你所设置的visited样式。
- hover 在鼠标移到链接上时添加的特殊样式。
- focus 在一个元素成为焦点时生效,用户可以通过键盘或鼠标激活焦点。
- active 在一个元素处于激活状态(鼠标在元素上按下还没有松开)时所使用的样式。
- hover 理论上任何元素都可以使用的, focus 多是针对表单的,如input等 。而 active 多用于链接。
书写顺序:
各个样式之间的顺序很有讲究,一旦出现排列错误就很有可能形成覆盖,导致其中某个样式无法显示。
通常都按照 link - visited - focus - hover - active 的顺序;
9.如何去掉相邻两个图片中间的白边?
① 转换为块元素再浮动 ②为父元素添加 font-size:0;
10.如何实现文字垂直水平居中,盒子垂直水平居中
万能flex布局:
<style>
.allCenter {
display:flex;
justify-content:center;
align-items:center;
}
</style>
文字居中的另一种方式:
<style>
.allCenter {
text-align:center;
line-height:盒子高度;
}
</style>
盒子居中的另一种方式:
<style>
.allCenter {
margin:auto;
display:flex;
align-items:center;
}
</style>
11.单行文本溢出显示省略号,多行文本溢出显示省略号
<style>
.one_hidden {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.N_hidden {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //最大限制为2行
}
</style>
更多推荐
H5C3部分面试题汇总
发布评论