04 2021 档案
摘要：1. 在一对script标记中写代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { margin: 0; padding: 0; wid
阅读全文
摘要：第一种方法：绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { margin: 0; widt
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #container { width: 400px; } #target {
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body { height: 100%; } body { wid
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #triangle { width: 0; height: 0; border
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table tr:nth-child(even)>td { backgroun
阅读全文
摘要：meta，元数据 不显示 为浏览器提供描述信息，包括： 网页的描述 关键词 作者 修改时间等 <meta name="keywords" content="HTML,ASP,PHP,SQL"> 设定meta的主要用处： 设定字符集 SEO优化 设定viewport
阅读全文
摘要：语法： E:after 或者E::after, 后者是CSS3中的写法，建议使用前者 用于设置E对象在其最后部（相当于last child）发生的内容 使用以下样式： content：内容 display：显示样式 其他样式，如height等
阅读全文
摘要：包含块：containing block, CSS2.1中的概念 一个元素盒子的位置和尺寸需要根据一个确定的矩形进行计算，确定这个矩形的元素称为包含块。 确定包含块的规则： html根元素包含块，也称为初始包含块，是viewport的大小 position: relative\static的元素，最
阅读全文
摘要：有一种可能，同时写了四种伪类，:link, :visited, :hover, :active, 一旦链接被点击过，并且又把:visited写在最后，CSS的选择器优先级一样，定义在后的覆盖定义在先的，造成:hover无法生效 解决方法： 按照:link, :visited, :hover, :ac
阅读全文
摘要：BFC，块格式化上下文（Block Formatting Context）。W3C CSS2.1中的一个概念。 FC：它是一块渲染区域，遵守相应的渲染规则，这些规则决定了： 内部元素的定位方式 与外部元素的位置关系 BFC的布局渲染规则： 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向
阅读全文
摘要：W3C标准盒子模型： 包括：内容（width，height），padding，border，margin 盒子的可视宽度为：width + padding + border 标准盒子模型： IE盒子模型： 包括：内容，padding，border，margin 盒子的可视宽度为：width 盒子的内
阅读全文
摘要：CSS link： link是html标签 加载页面的过程是异步的，不会阻塞浏览器的解析过程 举例 html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link
阅读全文
摘要：display:none; 元素从Render tree上被拿下 不参与layout过程，其宽度和高度不会影响渲染 visibility：hidden; 元素还在Render tree上 参与layout过程，宽度和高度影响渲染，但是内容透明 把元素的宽度或者高度设置为0 幻灯片等使用情况下，通过z
阅读全文
摘要：高度或者宽度的单位 px：像素，绝对长度单位 em：相对长度单位，表示相对当前元素font-size的倍数 例如：font-size：16px；2em = 16 * 2px = 32px rem：root em，相对长度单位，表示相对html根元素font-size的倍数 %： width：基准是父
阅读全文
摘要：考虑点：水平还是垂直；块还是行内；是否需要知道宽高；兼容性 水平居中： 块元素：margin： 0 auto 行内元素，行内块元素：text-align：center 垂直居中： 行内元素：line-height:xxpx 行内块元素：line-height:xxpx；vertical-align：
阅读全文
摘要：垂直方向：line-height 未设置line-height之前的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *
阅读全文
摘要：都能实现透明的效果 rgba只针对元素的颜色和背景色；opacity针对整个元素
阅读全文
摘要：也称为外边距的重叠（margin collapse） 两个相邻盒子（可以是兄弟关系，也可以是祖先关系），合并为一个外边距，称为外边距重叠。 兄弟关系 计算规则： 两个外边距都是正数，重叠结果是两者较大的 <!DOCTYPE html> <html lang="en"> <head> <title>D
阅读全文
摘要：块级元素独占一行，相邻的行内元素可以和排在一行上 块级元素可以设定宽高，行内元素设定宽高无效 块级元素可以设定内边距，上右下左都有效；行内元素可以设定内边距，左右有效，上下设定后会影响background，但是不参与高度计算。 例子： <!DOCTYPE html> <html lang="en">
阅读全文
摘要：reset CSS，旨在用默认样式覆盖浏览器自带的样式，保持各个浏览器的一致性 normalize.css，是reset CSS的升级版，处理方式更加优雅： 保护了部分有价值的自带样式 修复浏览器bug 减少继承链，让调试变得简单 模块化 有详细的文档
阅读全文
摘要：兼容性问题就是相同代码在不同浏览器上行为不一致。 主要的IE兼容性问题都是IE6引起的，但是现在基本要求都是兼容IE8+ IE常见兼容性问题列举： IE6的双边距bug：实际展示出来的margin是200px <!DOCTYPE html> <html> <head> <meta charset="
阅读全文
摘要：不同浏览器、或者同一浏览器的不同版本对CSS的支持不同 利用这种不同，使得同一段CSS代码可以在不同的浏览器上都能正常展现 条件注释Hack 属性前缀Hack 选择器前缀Hack CSS Hack的策略 放弃IE6/7，兼容IE8/9/10 不再支持Quirks模式 关注：百度统计tongji.ba
阅读全文
摘要：标签选择器 类选择器 id选择器 后代\子代选择器 相邻\兄弟选择器 并集选择器 属性选择器 伪类选择器 伪对象选择器
阅读全文
摘要：行内样式表 内部样式表 引用外部CSS文件的外部样式表
阅读全文
摘要：图片懒加载： 使用JS，当页面滚动到图片显示的位置时，才加载。 幻灯片、相册，预测即将加载的图片，加载 CSS中的背景等图片： CSSSprite，Base64，Iconfont 如果图片过大，加载时可以加载缩略图，然后替换为清晰图像 如果图片的实际展示尺寸远小于图片实际尺寸，可以缩小图片到显示大小
阅读全文
摘要：google研发 体积小，大约是JPEG的2/3 同时支持无损压缩和有损压缩，需要更多的CPU资源 其他常用格式： JPEG PNG GIF SVG
阅读全文
摘要：src（同步的） 表示引入 浏览器遇到src通常会暂停解析过程，（加塞处理）并开始下载资源和资源处理，处理完成后再继续解析过程。 通常用于js脚本。 例外：img的src是异步下载的。 href（异步的） 表示引用 浏览器遇到href不会暂停解析过程，下载资源和资源处理将有其他并行线程完成 通常用于
阅读全文
摘要：在HTML文件头部，用于告诉浏览器使用什么规范： HTML 4.01 SGML：标准通用标记语言 DTD：文档类型定义 HTML4.01的三种类型：Strict（严格）、Transitional（过渡）、Frameset（框架） XHTML XHTML 1.0的三种类型：Strict（严格）、Tra
阅读全文
摘要：Quirks（怪异） 在W3C的CSS标准出现以前，IE有自己的实现标准，成为Quirks模式，而支持CSS标准的模式是Standards模式 区别很多，比如： Standards模式宽度和高度不包括padding和border，Quirks模式包括。 Standards模式下给span标签设定wi
阅读全文
摘要：符合W3C标准 内容和样式分离，易于维护 易于优化SEO，搜索引擎更友好
阅读全文
摘要：Safari：webkit Chrome\Opera:Blink 2013年前Chrome使用Webkit，2013年后使用Blink 2013年前Opera使用Presto，2013年后使用Blink Blink只是一个渲染引擎，其余部分尚未大幅改动 IE：Trident IE Edge用的不是T
阅读全文
摘要：标签选择器： 范围太大，用于定义全局的缺省样式 ID选择器： 排他的，只用于设定body的子元素，用于布局；组件不可以使用ID选择器 类选择器： 有比较好的灵活性和适应性的；不要在过多的元素上添加类 爬DOM树的方法是经常使用的方法 伪类选择器： hover：从集合中选择其中的一部分 伪对象选择器：
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：关系选择符 用法： <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style type="text/css"> #container>li>.a { width: 100px; height: 100px; back
阅读全文
浙公网安备 33010602011771号