MAC shortcuts

Forced to refresh

command+shift+r
Copy the code

HTML|CSS

BFC

The trigger condition

• The root element ()

• Float element (float of element is not None)

• Absolute position element (element position is absolute or fixed)

• Inline block element (element display is inline-block)

• Block elements with overflow values not visible – elastic elements (display is a direct child of the flex or inline-flex element)

• Table cell (element display is table-cell, HTML table cell default value)

• Table title (display element as table-caption, HTML table title default to this value)

• Anonymous table cell elements (element display is table, table-row, table-row-group, table-header-group, table-footer-group) (HTML, respectively Default properties for table, row, tBody, thead, tfoot) or inline-table)

• Grid elements (display is grid or a direct child of the inline-grid element), and so on.

BFC rendering rules

1. The same BFC has overlapping vertical margins

   • Avoid margin folding – set the BFC for both blocks separately

2. The region of the BFC does not overlap the box of the floating element

3. The BFC is a separate container, and the elements outside do not affect the elements inside

4. Floating elements are also involved in calculating the height of the BFC

   • To prevent the height of the parent element from being 0 due to floating – set the parent element to a BFC box

How to make Chrome support text smaller than 12px?

// 12*0.8=9.6px≈ approximately 10pxp{font-size:12px; -webkit-transform:scale(0.8); }//0.8 is the scaling scale
Copy the code

To make the font on the page clear and thin how do YOU do that with CSS?

When used, antialiased, greyscale smoothing does not work on Windows, but it does on IOS devices.

Selector priority

Inline style weight 1000 ID selector weight 100 Class selector, pseudo-class selector, attribute selector weight 10 tag selector, pseudo-element selector weight 1 General selector, child selector, adjacent sibling selector weight 0

How do browsers parse HTML, CSS, js

Containing block contains blocks

The importance of

The size and position of an element is often affected by its containing blocks. For attributes such as width, height, padding, margin, and the absolute positioning element offset (such as position being set to absolute or fixed), the calculated value of these values when we assign a percentage value to them, It’s computed by the inclusion block of the element.

How do I determine the containment block

The process of determining an element’s containing block depends entirely on the element’s position property:

• If the position attribute is static, relative, or sticky, the contain block may consist of the edge of the content area of its nearest ancestor block element (such as inline-block, block, or list-item), Formatting contexts may also be established (such as a Table Container, Flex Container, Grid Container, or the Block Container itself).

• If the position attribute is absolute, the containing block consists of the edge of the inner margin of its ancestor element whose nearest position is not static (that is, fixed, absolute, relative, or sticky).

• If the position property is fixed, the continuous media block is a viewport, and the Paged media block is a Page area.

• If the position attribute is absolute or fixed, the include block may also consist of the edge of the inner margin region of the nearest parent element that satisfies the following conditions:

  • The value of transform or perspective is not None
  • The value of will-change is transform or perspective
  • The value of filter is not None or will-change is filter(only valid in Firefox).
  • Contain: paint (e.g. contain: paint;)

Calculates the percentile value based on the contained block

1. To calculate the percentile in height top and bottom, use the value containing the height of the block. If the containing block’s height changes according to its contents, and the containing block’s position property is given relative or static, then these values are evaluated as auto.

2. To calculate the width, left, right, padding, and margin properties, calculate the percentile from the value of the width property that contains the block.

background

background-attachment

background-size

Note:If div’s background-attachment isfixed, then the background-size of div is relative toPage viewable area. Can be implementedFrosted glass effect

    <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>

Copy the code

JS

reduce()

The reduce() method takes a callback as its first argument, which in turn takes four arguments:

1. PreviousValue => Initial value or superimposed value of previous callback function;

2. CurrentValue => The value to be executed for this callback (loop);

3. Index => Index value of currentValue;

4. Arr => array itself;

The reduce() method returns the value of the last call to the callback function;

Note:

• Reduce can also accept a second parameter, initialValue, that declares the type and initialValue of the previousValue of the callback function (the first parameter)

  • Note that if initialValue is set, the value of previousValue of the first callback is equal to initialValue, and the current index is 0

  • If initialValue is not set, the value of previousValue is the first item in the array and the index value is 1. That is, the reduce() method actually starts the second loop without setting the initial value!

Data summation

let log = console.log.bind(console);
let arr = [1.2.3.4.5.6];
arr = arr.reduce((previousValue, currentValue) = > {
     return previousValue + currentValue; // Returns the value of the last call to the callback function, 15+6;
})
log(arr); / / 21
Copy the code

Array to heavy

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;
}, []) // Set cur to an array with a default type of array and an initial value of null
console.log(colors);

// use set to remove weight
let mys = [4.4.1.3.6.9.9.0.2];
console.log([...new Set(mys)]);/ /,1,3,6,9,0,2 [4]
Copy the code

Document. The write function

When you open a page, the browser will

1. Call document.open() to open the document

2. document.write(…) Write the downloaded web content to a document

3. When we’re done, we call document.close()

4. Trigger the DOM Ready event (DOMContentReady)

So if you write document.write(1) before step 3 then you append directly to the current location, if you write document.write() after step 3 then since document is already close, So you have to reopen document.open() to open the document, which clears the contents.

Gets the property value of the object

• . Is converted to a string, (so no variables can be written)
• [] inside is code, can be a variable, ‘string’

        let data = {
            nameE: 'jean'.nameC: '33'.age: 18
        }

        let name = 'name' + 'E';
        console.log(data[name]); // jean
        console.log(data.name); // undefined because 'name' does not exist

        console.log(data[nameE]); // Error because nameE does not exist
        console.log(data['nameE']); // jean
        console.log(data.nameE); // jean
Copy the code

Page opening path

The application of the iframe

• window.parentFind the window object of the parent page

• Window. top Here, top is the top level of the fetch, which is used when there are multiple layers of nested iframes

• iframe.contentWindowFind the window object of the child page

index.html

<dl class="layui-nav-child">
    <dd><a href="/user/user_info.html" target="fm">Basic information</a></dd>
    <dd><a href="/user/user_avatar.html" target="fm">Replace the picture</a></dd>
    <dd><a href="/user/user_pwd.html" target="fm">To reset your password</a></dd>
</dl>// /user/user_info.html---- default page<iframe name="fm" src="/user/user_info.html" frameborder="0" id="content_ifr">.<p></p>
</iframe>/ / modify the outer index. The js getUserInfo () the window. The parent. GetUserInfo ();Copy the code

index.js

function getUserInfo();

// Get the element in the child page ifame!!!!!!!!! You can only get $('#content_ifr') [0].contentWindow.document.querySelector('p')
Copy the code

user_info.js

// Call the outer index.js layer
window.parent.getUserInfo();

// Get the dom element of the outer index. HTML!!!!!!!!! Not only through the dom access (jq) parent. Document. QuerySelector ('dd a')
Copy the code