前端开发必会的HTML/CSS硬知识 (二)
时间:2022-07-28
本文章向大家介绍前端开发必会的HTML/CSS硬知识 (二),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
文/小魔女
本文简介
- 前端开发系列的第二篇文章
- 基础知识就像是一把宝剑,能让你驰骋在前端领域的战场
- 知识亦有温度,让我们对新知识永远保持热度吧
- 分享小魔女的音乐?
html渲染、css解析
- 在面试中,这部分基础知识,非常常见。
- 将以最简洁的文字,让读者掌握。
浏览器从开始解析HTML到渲染结束都经历了什么?
- 解析HTML文件,创建DOM树
- 解析CSS,形成CSS对象模型
- 将CSS与DOM合并,构建渲染树(rendering tree)
- 布局和绘制
浏览器解析CSS是从左开始还是从右?为什么?
- 从右。
- 因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点);
- 而从左向右的匹配规则的性能都浪费在了失败的查找上面。
reflow(回流)和repaint(重绘)的区别?
回流一定会触发重绘,重绘不一定触发回流。
reflow:改变元素在网页中的布局和位置
导致回流发生的情况:
- 改变窗口大小
- 改变文字大小
- 内容的改变,如用户在输入框中敲字
- 激活伪类,如:hover
- 操作class属性
- 脚本操作DOM
- 计算offsetWidth和offsetHeight
- 设置style属性
对应的css属性如下:
- 盒子模型相关属性
- 定位及浮动属性
- 节点内部的文字结构
repaint:改变不影响元素。在网页中的位置的元素样式时,根据浏览器新属性重新绘制一次。不会带来重新布局。
导致重绘发生的情况:
- 改变visibility
- outline
- 字体颜色、背景色
导致重绘的css属性如下:
css 隐藏属性的对比
- display:none; 重排 (不占空间)
- visibility: hidden; 重绘 (占空间)
- overflow:hidden; 重绘+重排 (占空间,超出隐藏)
HTML的解析会因为什么阻塞?静态文件引用如何放置合理?
- css加载不会堵塞html解析
- css加载会堵塞dom树渲染
- css加载会堵塞js语句的执行
- js的加载会堵塞html解析
css文件放前面,js文件放在html和css的后面
如何做页面加载优化(减少白屏时间,加快页面打开速度)
- cdn加速
- css代码压缩
- 合理使用浏览器缓存(设置cache-control,expires,E-tag。注意,文件更新后,缓存带来的影响。可以在文件名字后面加一个版本号)
- 减少http请求
为什么要用语义化标签?
- 增加代码的可读性,以及便于代码维护
- 便于SEO
- 让浏览器或者网络爬虫更好地解析以及分析内容
如何适配移动端?
meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
图片适配
//使用这个
img {max-width:100%} //最大宽度显示为自身的100%
//不用这个
img {width: 100%} //宽度为外层容器的宽度 图片会被无情地拉伸
media 媒体查询
media screen and (min-width:1000px) {
body{
background:red;
}
}
动态rem方案(跟媒体查询配合,实现响应式布局)
- 为html设置基准值 font-size:100px
- 页面上的使用,margin:500px 400px; => margin:5rem 4rem; 因为rem是相对根html计算的 x/100 = ?rem
- 根据当前屏幕的宽度和设计稿的宽度,算出html的基准值 假设当前屏幕宽度为375px 设计稿上是640px
- 当前屏幕宽度/设计稿宽度 = x / 100 => x = 当前屏幕宽度/设计稿宽度*100 = 58.59375 px
动态计算 js代码
(function (){
const desWid = 640
const winWid = document.documentElement.clientWidth
const oMain = document.getElementById('main')
const ratio = winWid / desWid
if(winWid > desWid) {
oMain.style.width = desWid + 'px'
oMain.style.margin = '0 auto'
return
}
oMain.style.fontSize = ratio*100 + 'px'
} ())
CSS小知识
除px还有什么单位?都如何计算?
任意浏览器的默认字体高都是16px。
- px:相对于显示屏分辨率而言
- em: 相对于父元素 .father{font-size:16px;} .son{font-size:2em} 2em = 2*16
- rem:相对于html根元素 html{font-size:20px;} .div{font-size:2rem} 2rem = 2*20
- rpx: 微信小程序(规定屏幕宽为750rpx)
如何实现0.5px的边框?
- transform:scale(0.5)
//下边框有线
<style>
div{
width: 200px;
height: 200px;
position: relative;
background-color: pink;
}
div::before{
content: '';
position: absolute;
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
border-bottom: 1px solid black;
transform: scale(0.5);
}
</style>
<div>11</div>
//四条线都有线
<style>
div{
width: 200px;
height: 200px;
position: relative;
background-color: pink;
}
div::before{
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid black;
transform-origin: 0 0;
/* 设置元素基点 x和y坐标 */
transform: scale(0.5);
}
</style>
- 渐变
<style>
div{
width: 200px;
height: 200px;
position: relative;
background-color: pink;
}
div::after{
content: ' ';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-image:linear-gradient(0deg, transparent 50%, black 50%)
}
</style>
写个波浪线
<style>
div{
height: 0.25em;
width: 20rem;
background-size: 0.5em 0.5em;
background-image: linear-gradient(45deg, transparent 45%, red 55%, transparent 60%), linear-gradient(135deg, transparent 45%, red 55%, transparent 60%);
background-repeat: repeat-x;
}
</style>
禁止用户操作
如何禁止用户缩放?
- 缩放系数是0.0-1.0 用户缩放选项是yes|no
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- ios10之后不接受meta标签,监听gesturestart,阻止默认事件
document.addEventListener('gesturestart',function(e) {
e.preventDefault()
})
如何禁止用户全选文字内容?
- css
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
- js
在需要禁止的dom加上这句
ontouchstart="return false;"
备注:手机uc浏览器,meta标签的name=browsermode content= application 这样就无法调起长菜单
- 解决WordPress4.4.1不支持图片暗箱问题,Begin主题适用
- MySQL源码安装总结(r12笔记第12天)
- 全站启用SSL之后,如何兼容不支持https抓取的搜索引擎?
- sandbox和MHA快速测试(r12笔记第32天)
- 分享一个支持https的CDN及启用SSL后续问题汇总
- 分分钟搭建MySQL一主多从环境(r12笔记第31天)
- 相同update语句在MySQL,Oracle的不同表现(r12笔记第30天)
- 升级Nginx1.9.5以上版本,开启博客网站http2.0时代
- Oracle Data Guard压缩归档测试(二)(r12笔记第27天)
- Oracle Data Guard压缩归档效果对比(r12笔记第26天)
- PHP7.0正式版编译安装升级及WordPress问题解决分享
- MySQL自增列的重复值问题(r12笔记第25天)
- 借助腾讯云CDN开启全站https及问题解决分享
- 分分钟搭建MySQL Group Replication测试环境(二)(r12笔记第41天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- android特卖列表倒计时卡顿问题的解决方法
- dotnet 多线程禁止同时调用相同的方法 禁止方法重入调用 双检锁的设计
- android实现倒计时功能(开始、暂停、0秒结束)
- 【-Flutter/Dart 语法补遗-】 sync* 和 async* 、yield 和yield* 、async 和 await
- android实现条目倒计时功能
- Android实现简单手电筒功能
- k8s安装自动证书签发cert-manager letsencrypt
- Android仿Keep运动休息倒计时圆形控件
- android通过led实现手电筒功能
- Android 7.0 手电筒控制实现
- 【STM32H7】第13章 RL-TCPnet V7.X之创建多个TCP客户端
- Android倒计时的开始与停止 剩余时分秒的展示
- 由LFI引起的Zimbra邮件管理系统0day
- Android手电筒兼容各个手机与版本
- 【STM32F429】第13章 RL-TCPnet V7.X之创建多个TCP客户端