浏览器盒子模型——CSS基础篇
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器盒子模型——CSS基础篇相关的知识，希望对你有一定的参考价值。
参考技术A 浏览器盒子模型一般来说有两种：IE版和标准W3C版
IE版和W3C版主要差别在于IE把border和padding都算进width中，而W3C版的则是width只包括content
默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置box-sizing: border-box来实现。 这样就可以告诉浏览器使用border-box来定义区域，从而设定您想要的大小。
.box
box-sizing:border-box;
如果你希望所有元素都使用替代模式，而且确实很常用，设置box-sizing在<html>元素上，然后设置所有元素继承该属性，正如下面的例子。如果想要深入理解，请看 the CSS Tricks article on box-sizing 。
html
box-sizing:border-box;
*, *::before, *::after
box-sizing:inherit;
基础前端面试题
CSS篇
1.CSS 盒子模型，绝对定位和相对定位
css盒模型有两种，一种是标准盒模型 一种是怪异盒子模型
1.box-sizing: content-box; // width = content + padding + border 2.box-sizing: border-box; // width = 定义时的宽度(包含padding + border)
2.绝对定位和相对定位
绝对定位： position: absolute; // 使元素脱离文档流，绝对定位的参照物是最近的已经定位的的元素 相对定位： position: relative;
3. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
(1) 给父级定义具体的height
(2) 在标签尾部增加空的 div标签 (style="clear: both;")
(3) 在父级元素增加 :after伪类 <div class="parent"></div>
.parent:after {
display: block;
clear: both;
content: ‘‘;
visibilty: hidden;
height: 0;
}
.parent {
zoom: 1; //兼容IE5一下的版本
}
(4) 给父级标签定义overflow: hidden || auto;
4.如何保持浮层水平垂直居中
(1) 知道父级元素的高度
父元素定位 position: relative;
.class {
position: absolute;
htight: 200px;
width: 100px;
left: 50%;
top: 50%;
margin: -100px 0 0 -50px;
}
(2) flex布局
.class {
display: flex;
justify-content: center;
align-items: center;
}
(3) 使用绝对定位以及transform
.class {
position: absolute;
height: 200px;
width: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
5.行内元素（display: inline）块级元素（display: block） 融合行内于块级（display: inline-block）
display: inline --> 宽度和高度由元素的内容决定，与其他元素共占一行，
例如<span> <i> <a> ,可以使用padding上下左右都有效，margin只有left、right有效
display: block --> 默认宽度由父容器决定，高度由内容决定，独占一行且可以设置宽高，
例如 <div> <p> <ul>，padding、margin无论上校左右都有效
display: inline-block --> 可以是两个块级元素在同一行水平排列，padding、margin都有效，
inline-block存在间隙问题，解决方案：父元素设置font-szie: 0px;
void(空元素) <br> <link> <meta>
6.css隐藏元素的方法，以及区别
1. visibility: hidden; 文档流中的位置依然存在，只是被隐藏掉
2. display: none; 文档流中的位置不存在
3. opacity: 0; 使元素的透明度变为透明，文档流中的位置依然存在
4. position: absolute; margin-top: -9999px; margin-left: -9999px;
使用绝对定位使元素被推离出可视区，达到隐藏元素的目的
7.css中link和@import的区别
1. link使html的标签元素，而@import是css提供的 2. 在页面加载时，link是同时加载的，而@import引用的css是当页面加载完成以后，才会加载 3. 兼容问题：link无兼容问题，而@import不兼容IE5一下的版本
8.position的absolute和fixed之间的共同点与区别
1. 共同点：（1）都会把元素设置为display：inline-block
(2) 让元素脱离文档流，不占据空间
(3) 默认会覆盖非定位元素上
2. 不同点： (1) absolute的“根元素”是可以设置的，是离他最近的已定位的元素；而fixed的“根元素”不可设置，
永远都是浏览器窗口，当浏览器滚动的时候，使用了fixed布局的不会随着浏览器滚动而改变位置
9.css3有哪些新特性
1. 圆角：border-radius 阴影：box-shadow
2. 文字特效：text-shadow, 线性渐变：gradient 旋转：transform
3. 旋转：transform: rotate(90deg) scale(0.85, 0.90) translate(0px,-30px) skew(-9deg,0deg);
// 旋转； 缩放； 偏移； 倾斜
4. 多背景：rgba
5. 在CSS3中唯一引入的伪类是 ::selection.
6. 媒体查询，多栏布局
7. border-image
10.css初始化样式---选择淘宝初始化样式
11.HTML与XHTML有什么区别
1. XHTML元素必须被正确的嵌套 2. XHTML元素必须被关闭 3. 标签名必须用小写字母 4. XHTML必须含有根元素
12.多行文本的省略号问题
overflow: hidden; text-overflow: elipsis; display: -webkit-box; -webkir-line-camp: 3; -webkit-box-orient: vertical;
13.使用css画出一个三角形
<div class="text"></div>
.text {
content: ‘‘;
border-width: 10px 0 10px 20px;
broder-style: solid;
border-color: transpaent transpaent transpaent #f5f5f5;
}
JS篇
1.JavaScript数据类型， null 和 undefined，原始数据类型，引用数据类型
数据类型： null number string boolean function object
null 指的是用来表示尚未存在的对象
（1）作为函数的参数，表示函数的参数不是一个对象
（2）用来表示原型链的终点
原始数据类型：null number string boolean symbol 引用数据类型：Object(array function date)
1表示我定义的number类型,而number(1)则表示我定义的一个函数（方法）
2.讲一下 prototype 是什么东西，原型链的理解，什么时候用 prototype
prototype是函数对象上预设的对象属性
（1）js中所有的东西都是对象，每个对象都有一个prototype属性，这个属性是一个对象（object）
（2）JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype
原型: 指的是一个对象上面的原型，这个原型通常是它的构造器的prototype属性
什么时候用 prototype
使用prototype的好处是不会额外产生内存，所有实例化后的对象都会从原型上继承这个方法。
也就是需要一个子类拥有父类的某些特性（同种特性可以覆盖），又可以添加自己的特性，而不会影响父类时候使用prototype。
3.函数里的this什么含义，什么情况下，怎么用。箭头函数呢
普通函数：随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this
指的是，调用函数的那个对象。
箭头函数：this的作用域指的是定义的时候的对象
4.apply和 call 什么含义，什么区别?什么时候用
add.call(o,5,7); //1+3+5+7=16 //call 传参的时候是扁平的把每个参数传进去 add.apply(o,[10,20]); //1+3+10+20=34 //apply 传参的时候是把参数作为一个数组传进去
5.怎样避免全局变量污染?ES5严格模式的作用，ES6箭头函数和ES5普通函数一样吗?
尽量使用let来定义变量，防治全局变量污染，
es6中的箭头函数的 this 指的是定义时的对象，是固定的，
而普通函数的this的指向时调用函数时的对象，是可以改变的
复制代码
6.描叙一下事件流
事件流分为两种，一种是捕获事件流，一种是冒泡事件流
捕获：是从根节点开始执行，一直往子节点查找执行，知道查找到执行节点
冒泡：是从目标节点开始执行，一直往父节点冒泡查找，知道查到根节点，
用e.stopPropagation() 可以阻止事件冒泡
7.简单实现双向绑定mvvm
<input id="input" />
// const data = {}
// const input = document.getElementById(‘input‘)
// Object.defineProperty(data, ‘text‘, {
// set(value) {
// input.value = value
// this.value = value
// }
// })
// input.onchange = function(e) {
// data.text = e.target.value
// }
8.理解闭包吗?请讲一讲闭包在实际开发中的作用;闭包建议频繁使用吗?
闭包就是在函数中的局部变量，在函数返回的时候不会被释放掉，依然暴露在外面可以被其他函数调用
当在一个函数内定义另外一个函数就会产生闭包
9. ajax 跨域有哪些方法，jsonp 的原理是什么，如果页面编码和被请求的资源编码不一致如何处理?
ajax指的是： 异步的javascrupt adn XML,可以实现异步的数据交互，实现局部刷新；
json指的是： 轻量级的数据交互格式，本质是字符串； 优点：轻量级，易于人的编写和阅读，便于js解析，支持复合数据类型
ajax跨域的交互流程：
（1）创建ajax对象 xhr = new XMLHttpRequest
(2) 规定请求地址 xhr.open(method, url, async)
(3) 等待服务器响应 xhr.onload()
(4) 发送请求 xhr.send()
ajax 中的readyState
readyState用来存放XMLHttpRequest的状态，监听从0-4发生不同的变化
0 -- 请求未初始化（此时还没有调用open）
1 -- 链接已建立，正在监听发送请求
2 -- 完成请求，并拿到返回数据
3 -- 请求处理中，解析服务器响应内容
4 -- 请求已完成，且响应就绪
10.javascript的同源策略
这是javascript的一种安全协议，为了方式某个脚本从不同的源装载,同源指的是：同端口号、同协议、同域名，这样子才能相互发送ajax请求
11.如何解决跨域问题？
跨域指的是 不同的端口号、不同的域名、不同的协议
（1）使用 jsonp（json + padding）把数据内填充起来，来解决跨域的问题
（2）使用 cors（跨域资源共享），可以在后端上配置可跨域
（3）使用服务器代理来实现跨域
12.jsonp 实现跨域的原理
ajax受同源策略的影响，不允许使用跨域请求，但是javascript中的 <script>标签中的src属性是可以用来访问异域的js脚本的,利用这个特性，服务端不再返回json格式的数据，而是返回了调用了某个函数的js代码，这样子就实现了跨域
13.reduce对象去重
let temp = {}
data = data.reduce((prev, curv) => {
if(temp[curv.name]) {
} else {
temp[curv.name] = true
prev.push(curv)
}
return prev
})
14.提取url中携带的参数
var url = ‘https://juejin.im/search?query=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%
98&type=all‘;
function splitUrl () {
let url1 = url.split(‘?‘)[1] //获取url中问号后面的数据
let url2 = url1.spliy(‘&‘) // 以&来分割数组
let url3 = []
url2.forEach(item => {
url3.push(item.split(‘=‘)[1])
})
return url3
}
15.防抖函数debounce(在固定时间内只执行一次，若在固定时间内再次触发，则重新计算时间)
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
function debounce(func, wait, immediate) {
let timeout;
return function () {
let context = this
let args = arguments
if (immediate) {
var callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) {
func.apply(context, wait)
}
} else {
timeout = setTimeout(() => {
func.apply(context. args)
}, wait)
}
}
}
16.节流函数(在固定时间内无论触发多少次，只执行一次)
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
*/
function throttle(func, wait) {
let timeout;
return function () {
let context = this
let args = arguments
if (!timeout) {
timeout = setTimeout(() => {
timeout = null
func.apply(context, args)
}, wait)
}
}
}
17.js中DOM操作
1. 创建新节点 (1) createDocumentFragment() //创建一个DOM片段 (2) createElement() // 创建一个具体的元素 (3) createTextNode() // 创建一个文本节点 2. 添加、移除、替换、插入 (1) appendChild() // 创建一个节点 (2) removeChild() // 移除一个节点 (3) replaceChild() // 替换一个节点 (4) insertBefore() // 在已有的节点前增加一个节点 3. 查找 (1) document.getElementsByTagName() // 通过标签名称查找 (2) document.getElementsByName() // 通过元素的name属性的值 (3) document.getElementById() // 通过元素Id,唯一性
18.如何实现浏览器内多个标签页之间的通信?
(1)localStorage // 本地存储 (2)sessionStorage // 会话存储
共同点：
(1) localStorage和sessionStorage的存储数据大小一般都是：5MB
(2) localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信
不同点：
(1) localStorage不会随着浏览器关闭而消失，而sessionStorage会随着浏览器关闭而消失
复制代码
19.document.write和innerHTML的区别
document.write会重绘整个页面， 而innerHTML只会更新页面的一部分
20. var let const
var 定义的是一个全局作用域的变量
let 定义的是局部作用域的变量，在相同作用域下不可重复定义同名变量
const 定义的是一个常量. 注意：当使用const定义一个对象的时候，对象内的值是可以修改的，因为该对象的内存地址并未发生改变，所以改变对象内的值的时候就不会报错
作者：上学威龙
链接：https://juejin.im/post/5dda0026518825732c76495d
以上是关于浏览器盒子模型——CSS基础篇的主要内容，如果未能解决你的问题，请参考以下文章
CSS3--Flex弹性盒子布局:使用弹性盒子模型布局微信客户端
CSS的盒子模型,怎么才能让盒子不会随着浏览器窗口的变化而移动或者改变大小
css基础 盒子模型border边框marginpaddingCSS分组和嵌套选择器Display(显示) 与 Visibility（可见性）Position 定位