知识点（更新中）

Jean
331 阅读7分钟

mac快捷键

强制刷新

command+shift+r

HTML|CSS

BFC

触发条件

  • 根元素()

  • 浮动元素（元素的 float 不是 none）

  • 绝对定位元素（元素的 position 为 absolute 或 fixed）

  • 行内块元素（元素的 display 为 inline-block）

  • overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）

  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）

  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）

  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 等等。

BFC渲染规则

  1. 同个BFC垂直方向边距重叠

    • 避免外边距折叠--对这两个块分别设置BFC

  2. BFC的区域不会与浮动元素的box重叠

  3. BFC是一个独立的容器，外面的元素不会影响里面的元素

  4. 计算BFC高度的时候 浮动元素 也会参与计算

    • 防止因 浮动 导致 父元素 高度为0---将父元素设为BFC盒子

怎么让Chrome支持小于12px 的文字？

// 12*0.8=9.6px≈约等于10px
p{font-size:12px;-webkit-transform:scale(0.8);} //0.8是缩放比例

让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

选择器优先级

选择器权值
！important最高

内联样式 权重1000 id 选择器 权重100 类选择器、伪类选择器、属性选择器 权重10 标签选择器、伪元素选择器 权重1 通用选择器、子选择器、相邻同胞选择器 权重0

浏览器如何解析html，css，js

containing block 包含块

重要性

元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值 （比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

如何确定包含块

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：

  • 如果 position 属性为 static 、 relative 或 sticky，包含块可能由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）的内容区的边缘组成，也可能会建立格式化上下文(比如说 a table container, flex container, grid container, 或者是 the block container 自身)。

  • 如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。

  • 如果 position 属性是 fixed，在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。

  • 如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：

    • transform 或 perspective 的值不是 none
    • will-change 的值是 transform 或 perspective
    • filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效).
    • contain 的值是 paint (例如: contain: paint;)

根据包含块计算百分值

  1. 要计算 height top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 auto。

  2. 要计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。

background

background-attachment

值相对固定描述
scroll元素本身默认值，背景图片随着页面的滚动而滚动，并不随着元素的内容滚动（比如文本大于元素高度时的滚动，背景图不动）
fixed页面可视区背景图片不会随着元素或页面的滚动而滚动。
local元素的内容区背景图片会随着元素的内容或页面的滚动滚动
initial默认值（即scroll）
inherit继承父元素的该属性值

background-size

值描述
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

background.jpg 注意： 如果div的background-attachment为fixed，则此时div的background-size是相对于页面可视区。可以实现磨砂玻璃效果 截屏2021-07-02 下午4.33.52.png

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            width: 100vw;
            height: 3000px;
            background: url(./pic/samuel-scrimshaw-361584-unsplash.jpg) no-repeat 0 0/cover fixed;
        }
        
        div {
            position: absolute;
            background: inherit;
            width: 500px;
            height: 300px;
            border: white 1px solid;
            overflow: hidden;
        }
        
        div::before {
            content: '';
            width: 550px;
            height: 550px;
            background: inherit;
            position: absolute;
            left: -25px;
            right: 0;
            top: -25px;
            bottom: 0;
            box-shadow: inset 0 0 0 3000px rgba(255, 255, 255, 0.3);
            filter: blur(10px);
        }
    </style>

<body>
    <div></div>
</body>

JS

reduce()

reduce()方法接收一个回调函数作为第一个参数，回调函数又接受四个参数，分别是：

  1. previousValue => 初始值或上一次回调函数叠加的值；

  2. currentValue => 本次回调（循环）将要执行的值；

  3. index =>“currentValue”的索引值；

  4. arr => 数组本身；

reduce()方法返回的是最后一次调用回调函数的返回值；

注意：

  • reduce还可以接收第二参数initialValue，用来声明回调函数（第一个参数）的previousValue的类型和初始值

    • 需要注意的是，如果设置了initialValue的值，第一次执行回调函数的previousValue的值等于initialValue，此时查看当前索引（index）为0

    • 但如果不设置initialValue的值，previousValue的值为数组的第一项，并且索引值（index）为1；也就是说，不设置初始值的话reduce()方法实际是从第二次循环开始的！

数据求和

let log = console.log.bind(console);
let arr = [1,2,3,4,5,6];
arr = arr.reduce((previousValue, currentValue) => {
     return previousValue + currentValue; //返回的是最后一次调用回调函数的值，15+6；
})
log(arr); // 21

数组去重


let colors = [{
		id: 0,
		colorName: 'red'
	},
	{
		id: 1,
		colorName: "orange"
	},
	{
		id: 2,
		colorName: "yellow"
	},
	{
		id: 3,
		colorName: "green"
	},
	{
		id: 1,
		colorName: "blue"
	},
	{
		id: 2,
		colorName: "purple"
	},
];

let obj = {};
colors = colors.reduce((cur, next) => {
	obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
	return cur;
}, []) //设置cur默认类型为数组，并且初始值为空的数组
console.log(colors);

// 利用set去重
let mys = [4,4,1,3,6,9,9,0,2];
console.log([...new Set(mys)]);//[4,1,3,6,9,0,2]

document.write 作用

当你打开一个页面，浏览器会

  1. 调用 document.open() 打开文档

  2. document.write(...) 将下载到的网页内容写入文档

  3. 所有内容写完了，就调用 document.close()

  4. 触发 dom ready 事件（DOMContentReady)

所以你如果在第3步之前 document.write(1) 那么你就直接追加内容到当前位置，如果你在第3步之后 document.write()，那么由于 document 已经 close 了，所以必须重新 document.open() 来打开文档，这一打开，内容就被清空了。

获取对象的属性值

  • .后面会转换为字符串，（因此不能写变量）
  • []里面是代码，可以是变量，'字符串'
        let data = {
            nameE: 'jean',
            nameC: '33',
            age: 18
        }

        let name = 'name' + 'E';
        console.log(data[name]); // jean
        console.log(data.name); // undefined，因为不存在'name'这个属性

        console.log(data[nameE]); // 报错，因为并不存在nameE这个变量
        console.log(data['nameE']); // jean
        console.log(data.nameE); // jean

页面打开路径

截屏2021-07-09 下午2.31.15.png

iframe的应用

截屏2021-07-11 下午9.12.50.png

  • window.parent 找父页面的window对象

  • window.top这里的TOP是获取的顶层，即有多层嵌套iframe的时候使用

  • iframe.contentWindow 找子页面的window对象

index.html

<dl class="layui-nav-child">
    <dd><a href="/user/user_info.html" target="fm">基本资料</a></dd>
    <dd><a href="/user/user_avatar.html" target="fm">更换头像</a></dd>
    <dd><a href="/user/user_pwd.html" target="fm">重置密码</a></dd>
</dl>

// /user/user_info.html----默认页面  
<iframe name="fm" src="/user/user_info.html" frameborder="0" id="content_ifr">
    ...
    <p></p>
</iframe>

// 修改外层的index.js 的getUserInfo()

window.parent.getUserInfo();

index.js

function getUserInfo();

// 获取子页面ifame 中的元素 
！！！只能通过dom获取
$('#content_ifr')[0].contentWindow.document.querySelector('p')

user_info.js

// 调用 外层 index.js
window.parent.getUserInfo();

// 获取外层 index.html 的dom元素 
！！！只能通过dom获取（jq不行）
parent.document.querySelector('dd a')
avatar
文章
阅读
粉丝