• Explain HTTPS with Cowherd and Weaver Girl


    preface This paper attempts to use Cowherd and weaver girl to explain HTTPS. Information exchange and transmission have existed since ancient times, but the transmission conductor and exchange mode are constantly changing. Modern information transmission is carried out through the network. The steps of information transmission are simplified: Packaging — > transmission — > unpacking. […]

  • Did you make promise monad


    Monad is a difficult concept to explain. You can understand it as a lazy or unknown box. It sounds likeSchrodinger cat(it’s estimated that you will feel more dizzy when you go in). In fact, before you open the box, you don’t know what kind of state the cat is in Monad is a black box. […]

  • Vue 4.0 and above modify the default 8080 port number


    The detailed process is shown in:Vue 4.0 and above modify the default 8080 port numberModifying the default port number in vue4.0 is greatly different from previous versions. The modification method is as follows: Find the corresponding file to modify the portThe directory is:Project folder / node_ modules/@vue/cli-service/lib/options.js• 2. Open the options.js file, drag the bottom, […]

  • About BFC


    What is BFC? BFC (block formatting context) is a block level formatting context. It is an independent rendering area that specifies how the internal boxes are laid out and will not be affected by the outside world. In a BFC, row boxes and block boxes are arranged along the parent element border. How to form […]

  • What is the box model?


    What is the box model In page layout, the layout model adopted by Dom elements is the box model in the popular sense. <!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> <style> .box{ width: 100px; height: 30px; margin: 10px; padding: 20px; border: 5px solid chocolate; […]

  • Basic concepts of CSS


    CSS knowledge points Box model: W3C standard box model: width only includes content Ie box model: width only includes content + padding + border Clear floating method The purpose of clear floating is to solve the problem that the floating of child elements causes the high collapse of parent elements Pseudo class clear: both Common […]

  • CSS box model (3)


    CSS box model Key point of web page layout: box Box model components Composition of the box Margin (outer margin) Border Padding (inner margin) Content border Border width: the width of the box Border style: the style of the borderDefault: none solid dashed dotted Border color: the color of the border Abbreviation border:border-width border-style border-color […]

  • CSS tips


    Knowledge point 1: Transform: translate (- 50%, – 50%) scale (1.5) In the state of position: fixed, set the transform to – 50% horizontally and vertically, and both top and left are 0Scale (1.5) is the current box from 1 to 1.5. It is used for special effects Knowledge point 2: pointer events: None To […]

  • Floating of CSS layout mode (4)


    Three patterns of CSS layout Standard flow Arranged according to the display mode of elements, it is called standard flow float It is mainly used for displaying multiple block level boxes on the same line location It is mainly used to locate the box to a certain position in the browser, which is often used […]

  • CSS positioning and rounded rectangle (6)


    location The core of the layout: the location of the CSS box Positioning: set the box in a certain position and float freely on other boxes Positioning = positioning mode + edge offset Edge offset Top down order of three layout mechanisms Standard flow + floating + positioning Positioning mode Selector {position: property value} Static […]

  • CSS float summary


    Introduction In the maintenance of some projects, we found many places to usefloatTo carry out layout, we know the effect of this attribute and how to solve related problems, but we can’t give a further reason, so let’s sort it out. Origin My GitHub appointment This is for understandingfloatInstead of comparing their advantages and disadvantages […]

  • Advanced skills of CSS (7)


    Display and hide of elements Display show (hide) Show and hide Display: none (hidden) Display: block (display) characteristic Hide elements first <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; margin: 20px 20px; background-color: blue; } .box1 { […]