发表于: 2017-03-07 09:21:35
2 728
3、Doctype用来标明文档的类型。它不是HTML标签,让浏览器知道用哪个版本的HTML来解析代码。
在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML,所以不需要引用 DTD。但是最好还是添加上。
4、CSS盒模型:content区域的width与height,padding和margin。
分为标准盒模型与IE8及以下的怪异盒模型:
标准盒模型:内容区域的宽就是width,高就是height。
怪异盒模型:内容区域的宽是width + padding-left + padding-right + border-left + border-right,高同理。
CSS3中的box-sizing可用来设置:box-sizing: border-box;(怪异盒模型),box-sizing: content-box;(标准盒模型)。
5、常用的inline元素有:span,img,a,i,button,input,label,常用的block元素有:div,p,h1,h2,ul,li,ol,table,section,blockquote.等。
行内元素又分为替换元素和非替换元素:input和img实际上属于行内替换元素,可设置margin与padding,width与height,而非替换元素只能设置margin-left,margin-right,padding-left,padding-right.
区别:inline元素又叫做行内元素,不能设置宽高,大小由内容撑开,并序排列,。block元素又叫做块元素,能设置宽高,可独占一行。inline-block元素又叫做行内块状元素,可设置宽高,margin,padding,不独占一行。
6.什么是自适应,怎么去自适应?
什么是自适应:
自适应网站能自主适应浏览环境的变化。
传统网页设计:固定宽度页面布局。自适应网页设计:流式页面布局。
多种布局方式组合运用:大屏幕中屏幕使用固定宽度布局,小屏幕使用流式页面布局。
如何做到自适应:
一. 允许网页宽度自动调整: 插入<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/>
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
二. 不使用绝对宽度 :width: xx% 或 width: auto 或 max-width,max-height。
三. 相对大小的字体 :字体也不能使用绝对大小(px),而只能使用相对大小(em)。
四. 流动布局(fluid grid) :"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
五. "自适应网页设计"的核心,就是CSS3引入的Media Query模块 。
六. 图片的自适应(fluid image) :img { max-width: 100%;} 老版本的IE不支持max-width,所以只好写成:img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:img { -ms-interpolation-mode: bicubic; }
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。
九. 避免出现水平滚动条 :img,iframe {max-width:100%;box-sizing:border-box;}
评论