前端知识总结一

  1. 基础知识
    js的六种基本数据类型:
    number string undefined null Boolean object
    css 定位属性position的四个值以及区别
    static 默认值
    fixed 固定定位 相对于浏览器窗口进行定位
    absolute 绝对定位,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    relative 相对定位 相对于其正常位置进行定位
    CSS3的box-sizing属性的值有哪些
    box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素
    box-sizing: content-box|border-box|inherit;
    这里写图片描述
    盒模型的组成部分
    content padding border margin
    如果没有内容的话 将会显示为空
    整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成,而css样式中width所定义的宽度仅仅是内容部分的宽度
    ⑤display的属性有哪些以及区别
    inline 内联对象inline给它设置属性heightwidth是没有用的,致使它变宽变大的原因是内部元素的宽+padding。观察inline对象的前后元素我们会发现inline不单独占一行,
    其它元素会紧跟其后。
    block 块对象
    block是可以设置宽高的,但是它的实际宽高是本身宽高+padding,单独占一行
    inline-block 即具有
    block的宽高特性又具有inline`的同行元素特性
    none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留
    ⑥height属性与line-height
    line-height行高是包含了文字的高度在内的,而height并非是文字的高度,而是文字所在标签的高度
    例如下面这段代码
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文

如果我们定义.class {line-height:20px;},那么这个元素的实际高度将取决于其中内容的多少,假如文字部分在浏览器里面显示为一行,那么这个div的实际高度就是20px,如果文字显示为两行,那么div的实际高度就是40px,而且文字的行高是20px的;
如果我们定义.class{height:40px},那么这个元素的实际高度一般并不会因为内容的多少而发生改变,如果文字显示为一行,那么这个div的高度仍然是40px,如果显示为2行,但是文字的行高不够20px,这个div的高度也不会因为文字内容的高度小于height而发生改变。不过如果文字内容的高度大于40px了,一般来说这个div的高度还是会相应增加的
⑦rem和em
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的.
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。特点如下
a. em的值并不是固定的 b. em会继承父级元素的字体大小
rem是CSS3新增的一个相对单位(root em,根em)。这个单位与em区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
两个图片设置成block以后,成行显示,中间有时会出现空隙,为什么?
参考:http://99jty.com/?p=1085&replytocom=776
因为行内元素是默认沿着基线对齐的,所以 1 行内变块级 2 把参考元素大小置零3 改变默认对其方式 均可以解决此问题。
⑨js里Input type的类型有哪些
text password email
单选按钮 ‘< input name=”Fruit” type=”radio” value=”” />
多选按钮 ‘< input name=”Fruit” type=”checkbox” value=”” / >
2.
① 移动端的手机页面如何实现屏幕的自适应
使用的属性宽和高的百分比实现自适应
或者当用户使用软件时,确定屏幕的尺寸
② 跨域问题的解决
参考:http://blog.csdn.net/joyhen/article/details/21631833
只要协议、域名、端口三者有一个不一样就算跨域
jsonP
JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。
参考:http://www.csdn123.com/html/blogs/20130601/18419.htm
jsonp中涉及到回调函数
④rdf
http://www.phpstudy.net/e/rdf/
RDF 是一个框架,用来描述网络资源,诸如网页的标题、作者、修改日期、内容以及版权信息等。
⑤protottype
自定义的方法如何在原型链中使用
比如针对一个字符的reverse()函数的使用
string.prototype.reverse()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值