1)关于CSS布局中的BFC,相关描述:(从未遇到的知识漏洞,赶紧补上)
- BFC就是”块级格式化上下文“的意思,创建了BFC的元素就是一个独立的盒子,不过只有block-level box可以参与创建BFC,它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当前他也不会影响到外面的元素
- 内部的Box盒子会在垂直方向,从顶部开始一个接一个地放置;属于同一个BFC的两个相邻Box的margin会发生叠加;每个元素的margin box的左边,与包含块border box 的左边相接触(对于从左往右的格式化,刚好相反)。即使存在浮动也是如此。BFC的区域不会与float box 叠加。
如需了解更多,请看我的下一篇关于BFC的详细介绍:https://blog.csdn.net/PINGER0077/article/details/82983648
2)关于CSS选择器的优先级,查询统计后的结果如下:(从上往下降低)
- 在属性后使用!important会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素内的样式
- ID选择器
- class选择器(类选择器)= 伪类选择器 = 属性选择器;两者优先级相同,谁在后面谁起作用,后面的样式会覆盖前面的样式
- 标签选择器
- 通配符选择器
- 浏览器自定义的样式
3)html 置换元素与不可替换元素
- 置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如:浏览器会根据<img/>标签的src属性的值,来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;<input>标签的type属性来决定是显示输入框,还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>、<object>都是置换元素。这些元素往往没有实际的内容,即是一个空元素。置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。 - 不可置换元素:(x)html的大多数元素是不可置换元素,即其内容直接表现给用户端(如浏览器)。
例如:<label>label 中的内容</label>是一个非置换元素,文字label中的年日用将全被显示。
4)请用JavaScript语言实现
1 |
|
答案1:
function repeat(src, n){
return (new Array(n + 1)).join(src);
}
解析:join()函数用来将数组转换成字符串,数组的每一项用join('a')里面的a连接。
function reqeat(src,num){
return (n>0)?src.repeat(num)): "";
}
解析:ES6中新增的repeat(),构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本。
其实就是相当于把一个字符串复制很多分,不会影响原字符串。
扩展:repeat方法巨多不兼容,请尽量不要使用。传递的参数,如果是负数,那么就会报错;如果是0那么将输出空;如果是小数将会向下取整;如果是NaN将会被看做0;如果是字符串将会被转化成Number再执行,如果是a3或者是3a的话将会被看做0执行,结果为空。
语法格式为:
let resultString = str.repeat(count);
示例:
console.log('abc'.repeat(0)) //空
console.log('abc'.repeat(1)) //abc
console.log('abc'.repeat(-1)) //报错
console.log('abc',repeat(3)) //abcabcabc
console.log('abc',repeat(2.9)) //abcabc
console.log('abc',repeat(NaN)) //空
console.log('abc',repeat("3")) //abcabcabc
console.log('abc',repeat("3a")) 和console.log('a3') //空
5)编写一个 js 函数 jsonp 的处理函数
//手写jsonp
function myCallback(data) {
console.log(data);
}
function jsonp(url, data, callback) {
//data是否是字符串,是的话证明data值就是函数名
if(typfof data === 'string') {
callback = data;
data = {};
}
//拼接data
url += url.indexof('?') === -1 ? '?' : '&';
url += 'callback=' + callback;
var params = "";
for( var i in data) {
params += '&'+ i + '=' + data[i];
}
url += params;
//在页面上插入script标签
var script = document.createElement('script');
script.setAttribute('src', url);
document.querySelector('head').appendChild(script);
}
jsonp('http://baidu.com/index.html'),{ id: 34},'myCallback');
jsonp('http://baidu.com/index.html?name="zjn"', {id: 34}, 'myCallback');
(function(window, document) {
"use strict";
var jsonp = function (url, data, callback) {
//1.将传入的data数据转化为URL字符串格式
//{id= 1, name:'zhangsan'} => id=1&name=zhangsan
var dataString = url.indexof('?') == -1 ? "?" : "&";
for(var key in data) {
dataString += key + '=' + data[key] + '&';
};
//2.处理URL中的回调函数
//cbFuncName回调函数的名字 :my_json_cb名字的前缀 + 随机数(把小数点去掉)
var cbFuncName = "my_json_cb_" + Math.random().toString().replace('.','');
dataString += 'callback=' +cbFunction;
//3.创建一个script标签并插入到页面上
var scriptEle = document.createElement('script');
scriptEle.src = url + dataString;
//4. 挂载回调函数
window[cpFuncName] = function(data) {
callback(data);
//处理完回调函数的数据之后,删除jsonp的script标签
document.body.removeChild(scriptEle);
}
//5.append页面中
document.body.appendChild(scriptEle);
}
//因为jsonp是一个私有函数外部不能调用,所有jsonp函数作文window对象的一个方法,供外部调用
window.$jsonp = jsonp;
})(window, document)