HTML + CSS 总结 (2)

44、什么是css样式表?优先级算法如何计算?

层叠样式表。

a.重要性和来源的优先级排序从低到高是:
1)浏览器默认样式
2)class/id.....选择器的权重
3)内部或者外部 (书写顺序)
4)行间样式
5)!important 最高的

45、你所知道的IE过滤器都有哪些,兼容性如何

1)_ 下划线属性过滤器
IE6及更低版本浏览器中会继续解析这个规则。

2)!important关键字过滤器 它表示所附加的声明具有最高优先级的意思。被浏览器优先显示。(IE6不识别此写法) 语法:选择符{属性:属性值!important;}

3)* 属性过滤器     该属性能被IE7及以下浏览器识别,

4)\9 :  IE版本识别;其他浏览器都不识别

5)\0  :   IE8及以上版本识别;其他浏览器都不识别   

46、如何让一个物体在页面水平垂直居中

1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}

2、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}

47、五大浏览器内核代表作品

*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器

代表作品IE

*Gecko:: 代表作品Mozilla Firefox

*Webkit : 代表作品Safari、Chrome

*Presto : 代表作品Opera ,

*Blink  :由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。
48、哪些属性可以继承?

1)文字相关:font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
2)列表相关:list-style-image、list-style-position、list-style-type、list-style
3)颜色相关:color
4)透明度(子元素会继承祖元素的opacity,但是无法更改)
注:font-size继承的是父元素的大小,而不是比例。line-height当父元素是百分比或px值得时候,子元素跟父元素相同,当父元素是normal或数字的时候,子元素的line-height是子元素的字体大小乘以数字。

49、表格的行分组有哪些

<thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾

50、表单字段集与字段级标题的用法

举个例子
<fieldset disabled="disabled">
     <legend>健康状况</legend>
     身高:<input type="text"/>
     体重:<input type="text"/>
</fieldset>

51、请您简述一下jpg,gif,png各自的特点和不同

1)jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )

2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;

3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;

52、 详细说明BFC的渲染规则,怎样生成新的BFC,及其作用?

什么是bfc:?
块级格式化上下文,他是一个独立的渲染区域,也可以理解成一个独立的容器

如何产生BFC?
.根元素
b.float属性不为none
c.position为absolute或fixed
d.display为inline-block,table-cell,table-caption,flex,inline-flex
e.overflow不为visible

bfc的作用?
a.自适应两栏布局
b.清除内部浮动
c.防止垂直margin重叠(放在两个BFC里)

53、请写出5种IE6兼容的问题,并写出解决方法

详情看兼容的笔记

54、 为什么要用css reset文件?

定义:首先css reset指的是重置浏览器的默认样式
作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理使每个浏览器下展示一致,故需要css reset

55、哪些元素的值可以设置成负值

z-index

text-indent

margin

position

order

阴影:text-shadow:



56、在css中如何合并单元格与单元格之间的距离、以及边框线如何变成一像素、如何让没有内容的元素消失

border-spacing:可以设置单元格与单元格之间的距离

border-collapse:collapse可以合并单元格的边框线

empty-cells:hide  可以让无内容的元素消失

57、表单数据的行分组都有哪些

thead  tbody  tfoot

58、请写出20个HTML5新增的标签?

header  footer  menu meration  section  article  aside  figure   caption <time>
address  mark  canvas colgroup col  video  audio nav  legend fieldset  datalist  source

59、新增的智能表单
search   Tel url Email Number Range Color
date pickers(date, month ,week, time, datetime ,datetime-local) datelist

一些例子
1)、Datalist :选项列表
input中输入list属性,属性值为该标签的id值,标签中子标签使用option,设置value和label
例:
<input type=“text” list=“id名" />
<datalist id=“id名">
            <option label=“提示信息”     value=“值“ >
            <option label="提示信息"   Value="值“ >
 </datalist>
提示:option 元素永远都要设置 value 属性。
2)output:表示不同类型的输出,比如脚本的输出
注:必须从属于某个表单。即,必须将它书写在表单内部,或对它添加form属性。
<form oninput="x.value=parseInt(a.value)+p3arseInt(b.value)" >
<input type="range" id="a" value="50" min="0" max="100"/> +
<input type="number" id="b" value="50"/>=
<output name="x" for="a b"></output>
</form>

新增表单属性
required:表示该项是必填项,如果表单未填写,会弹出相应的提示信息
placeholder:占位符,当获取焦点或者输入框中的值输入为空时显示,否则显示自己填写的内容
autofocus:进入该页面自动获取焦点,原则上只允许设置一个,如果设置多个,则只有第一个有效果
autocomplete:是否在输入的时候自动补全,默认值为on,另一个值为off
multiple:支持用户输入多个此类行的文本,以逗号隔开,每个文本均会进行验证,适用于类型type为email属性值和file属性值
pattern:正则表达式,一般和title属性配合说明该项填写的内容
国家代码:<input type=“text” name=“country_code” pattern=“[A-z]{3}” title="三个字母的代码" />
min:最小值,适用于属性type为number和range
max:最大值,适用于属性type为number和range
step:间隔
list属性:结合datalist元素使用
取消验证:可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证

59、请写出video和audio常用的一些属性

controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。
autoplay属性:如果出现该属性,则视频在就绪后马上播放。
loop属性:重复播放属性。
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。

Type属性值: 用于视频:video/ogg   video/mp4     video/webm 用于音频:audio/ogg   audio/mpeg

60、如何设置文本框处于未输入状态时文本框中显示的输入提示

placeholder

61、如何给文本框、选择框、自动获得焦点

autofocus="autofocus"

62、如何设置表单验证不能为空

required="required"

63、如何取消表单的验证?

novalidate="novalidate"

64、简述一下你对HTML语义化的理解?

用正确的标签做正确的事情。

html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;

及时在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的;

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;

使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

65、渐进增强和优雅降级

渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

66、层级选择器都哪有些

E+F  E>F  E~F

67、主流浏览器的前缀有哪些?

-ms-      IE
-moz-     火狐
-webkit-   谷歌
-o-       Opera

68、background-size有哪几个值?每个值的意思都是什么?

1、以百分比为值设置背景图大小

2、cover
   把背景图像扩展至足够大,以使背景图像完全覆盖背景区域

3、contain
  把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

69、video与audio常用的格式有哪些

用于视频:video/ogg   video/mp4    video/webm
用于音频:audio/ogg   audio/mpeg

70、.px,em,rem,pt 、ppi 的每个代表什么意思

)px实际上就是像素,用px设置字体大小时,比较稳定和精确
但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的web页面时,如果对浏览器进行了缩放,这时会使我们的web页面布局被打破。因此,这时就提出了使用“em”来定义web页面的字体。
2)em就是根据基准来缩放字体的大小
em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小
3)rem是相对于根元素字体大小来显示的
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值
4)pt的大小等于1英寸的1/72
磅:他是作为文字的一种计量单位
这种度量方式来源于打印-设计背景,最适合于媒体,但同样广泛应用于显示器

PPI是图像分辨率的单位,图像ppi值越高,画面的细节就越丰富,因为单位面积的像素数量更多。

71、css选择符有哪些?

1)通配选择符      *
2)类型选择符 /元素选择符     a
3)属性选择符      input[type="button"]
4)包含选择符     div .code a
5)子对象选择符     ul.test>li
6)ID选择符     #
7)类选择符     .
8)群组选择符     body,ul,li
9)伪类及伪对象选择符     div:first-letter     a:hover
10)相邻选择符     li+li

72、请你说一下标准盒模型与怪异盒模型的一个区别?他们的组成部分是如何组成的

标准盒模型:content+border+padding
怪异盒模型:content

一个算盒子的宽度的时候加上border和padding另一个不加

怪异盒模型实现:box-sizing:border-box
标准盒模型:box-sizing:content-box

73、html+css经典布局

1)左列定宽 右列自适应----------------->悬挂式布局
2)两列定宽  中间自适应---------------->圣杯布局

74、弹性盒知识点

弹性盒
1、要使用弹性盒、必须要给父级加上display:flex
2、我们要设置主轴的排列方式:flex-direction;主轴的默认排列方式是row(也就是沿X轴排列)  如果需要沿Y轴排列的话就设置值column
3、设置主轴的对其方式:如果主轴的排列方式是column那么现在的主轴就是Y轴   如果是row 那么主轴就是X;属性:justify-content
4、设置侧轴的对其方式:align-items;也就是说设置Y轴的对齐方式
5、align-content:用多行对齐方式
6、flex-wrap是来设置换行主要用到的值就是wrap
7、flex:1  这个的意思就是说将剩余部分全部占用;假设header与footer各占88px(高度)那么main部分就占剩余页面的全部空间
8、order:排列顺序  跟z-index相似
9、align-self:这个是来控制某一个元素的对其方式

75、H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

width = device-width:宽度等于当前设备的宽度

initial-scale: 初始的缩放比例(默认设置为1.0)

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)


严格按照这种写法来做

78、响应式布局特点

设计特点:

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点:
兼容各种设备工作量大,效率低下

代码累赘,会出现隐藏无用的元素,加载时间加长

其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

79、移动端布局的方式有哪几种

vw :视窗宽度,1vw等于视窗宽度的1%。
rem:根据根元素字体的大小来设置元素的宽度和高度


80、rem布局的一个缺点

1)做出来的效果与效果图有些许偏差。
2)雪碧图定位问题
3)rem单位最好不用在PC端

81、请写出几种渐变的属性

线性渐变:linear-gradient
径向渐变:radial-gradient
重复性渐变:repeating-linear-gradient    repeating-radial-gradient

82、请写出2D中常用的属性和属性值,并写出每个的意思

transform:translate-----------------位移
transform:rotate--------------------旋转
transform:skew----------------------变形
transform:scale---------------------放大缩小

83、如何控制2D或3D中的变形原点

transform-origin

84、3D种景深效果的属性及概念?

perspective:
-webkit-perspective:
近大远小

85、animation动画由哪几部分组成?animation的简写每个值代表什么?

keyframes   animation两部分组成

animation:动画名称  动画持续时间   动画类型  延迟时间  定义是否循环  动画运动方向

86、animation和transition的区别

相同点:都是随着时间改变元素的属性值。

不同点: transition需要触发一个事件(hover事件或click事件等)才会随时间改变其

css属性; 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果,css3的animation就需要明确的动画属性值。

猜你喜欢

转载自blog.csdn.net/markjunhao/article/details/81059685