前端随手笔记-html-css-js-vue

最新推荐文章于 2024-07-04 23:22:42 发布

黑天后白天

最新推荐文章于 2024-07-04 23:22:42 发布

阅读量507

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_43992935/article/details/90106075

版权

本文主要探讨前端开发中的关键点，包括兼容性配置、双核浏览器渲染、DNS预解析、三栏布局实现、CSS盒模型、DOM事件、MVVM框架、浏览器渲染机制、JS运行机制、页面性能优化和跨域通信。深入讲解了各种布局方式的优缺点，BFC的概念与应用，以及错误监控和职业规划。

摘要由CSDN通过智能技术生成

1 兼容性配置

<meta http-equi
v="X-UA-Compatible" content="IE=Edge,chrome=1"

2 双核浏览器渲染，优先使用webkit内核渲染

<meta name="renderer" content="webkit">

3 提升网站性能，DNS预解析

<link rel="dns-prefetch" href="../static/img.com">

4 实现三栏布局

<div class="box">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

<style>
*浮动的方式*
.box {}
.left{
	width: 300px;
	float:left;
	background:pink;
}
.center{
	background:green;
}
.right{
	width:300px;
	float:right;
	background:red;
}
</style>

*绝对定位的方式*
.left {
	position:absoulte;
	width:300px;
	left:0;
	background:pink;
}
.center{
	position:absoulte;
	left:300px;
	background:green;
}
.right{
	position:absoulte;
	right:0;
	background:red;
}

*flexbox方式*
.box{
	display:flex;
}
.left{
	width:300px;
}
.center{
	flex:1;
}
.right{
	width:300px;
}

*表格布局*
.box{
	width:100%;
	display:table;
	height:100px;
}
.left, .right, .center{
	display:table-cell;
}
.left{
	width:300px;
}
.center{
	background:green;
}
.right{
	width:300px;
}

*网格布局*
.box{
	display:grid;
	grid-template-rows:100px;
	width:100%;
	grid-template-columns:300px auto 300px; 三列
}
.left{
	background:pink;
}
.center{
	background:green;
}
.right{
	background:red;
}

这五种的优缺点，比较？
浮动，优点清楚浮动后，兼容性比较好，缺点脱离文档流，。
绝对定位，优点快捷，缺点脱离文档流可使用比较差。
flex，优点比较完美，缺点ie8以下不兼容
表格布局，优点兼容性比较好，高度会自动撑高。
网格布局，优点代码量简化。
高度未知，高度可以自动撑开？
flex布局和table布局，高度会随内容自动撑开。
兼容性那个更好？
table兼容性比较好
练习题
三栏布局（左右宽固定，中间自适应上下高度固定，中间自适应）
二栏布局（左固定，右自适应上固定，下自适应）

5 css盒模型
$![\在这里插入图片描述$
标准模型：内容的width height
IE盒模型：内容width height+padding+border

css设置盒模型：
box-sizing:content-box; 标准模型
box-sizing:border-box; IE盒模型

js如何获取盒模型的宽和高

dom.style.width/height取内联样式的宽和高
dom.currentStyle.width/height 拿到渲染以后的宽和高，但是只有ie浏览器支持
window.getComputedStyle(dom).width/height  兼容firfox chrome
dom.getBoundingClientRect().width/height  拿到及时运行完，计算元素的绝对位置&#