Tag:Block level

  • The grammar of BFC


      Let’s talk about BFC (block formatting contexts) BFC: block level formatting context (independent rendering area). Generally speaking, it’s block level element layout logic or rule. If you want to trigger BFC, you should use block level element, or turn it into block level element( display:block; )   The trigger condition of BFC. 1. BFC can be […]

  • CSS layout strategy


    Left and right layout Left middle right layout horizontally Vertical center And other tips The foregoing This paper introduces some common CSS layout schemes, the usage of tags used in layout and the precautions Left and right layout 1 floating layout First, clear the float of the parent pseudo element .clearfix::after { content: “”; display: […]

  • Differences and relations between JavaScript execution environment and scope


    Click the blue “dada front end” to follow me! Add a “star sign”, an article every day, learn programming together ​ ​ Supplement What is a block level scope. JS has no block level scope. How to make a pair of statements in curly braces belong to a block, and all variables defined in this […]

  • CSS style summary


    Keep records updated~ CSS text border style -WebKit text fill color: # FFF; // internal color of text -WebKit text stroke color: # ff3e16; // text border color -WebKit text stroke width: 1px; // text border width CSS block level element adaptive text width width: fit-content; width: -webkit-fit-content; width: -moz-fit-content; 3. CSS hide scroll bar […]

  • Center the box


    1、 The box under standard flow is horizontally centered Works only on block level elements margin : 0 auto ; 2、 The absolute positioning box is horizontally and vertically centered 1. Center the box through specific calculation position : absolute ; /*Move half the width of the parent element*/ left : 50% ; top : […]

  • XHTML element type


    XHTML element classification According to the CSS display state, XHTML elements are divided intoThere are three typesMassive elements,Inline (inline) elements,Variable element。 Block element Three characteristics: 1. By default, block elements occupy one line, and two adjacent block elements will not be displayed side by side; by default, block elements will be arranged from top to […]

  • My notes – BFC knowledge


    What is BFC? BFC(block formatting contexts) a block level formatting context, which is a pageCSSPart of the visual rendering,An area used to determine the layout of block level boxes and the extent of floating interaction 。 Creation of BFC Root element(<html> ) Floating element(floatNot fornone ) Absolute positioning element(positionbyabsoluteorfixed ) Table titles and cells(displaybytable-caption , […]

  • Position positioning


    Then the last article floating, this article talks about the use of positioning Static positioningposition:static position:staticThis is the default style. It will follow the text flow. And in this statetop, right,bottom,left,z-index They will not upgrade themselves, so they will befloatElements cover Relative positioningposition:relative Relative positioning is relative to the element itselfWhat we should pay attention […]

  • [JS01] variable and block level scope of ES6


    1. Variable characteristics of JS 1.1 promotion of variable declaration Let’s look at an interview question first console.log(v1); var v1 = 100; function foo() { console.log(v1); var v1 = 200; console.log(v1); } foo(); console.log(v1); When var declares a variable, it will be promoted to the top of its scope to be executed, and assigned to […]

  • Answers of front end interview day: March 16, 2020


    Today’s knowledge points (March 11, 2020) 53. Convert date format to timestamp52. What is your understanding of the new operator? Manually implement a new method51. The difference between for in and for of?50.(‘b’+’a’+ + ‘a’+’a’).toLowerCase() === ‘banana’?49. How to make the value of (a = = 1 & & A = = 2 & & […]

  • float


    floatCSS positioning mechanismNormal flow (standard flow)The elements are automatically arranged from left to right, from top to bottom Block level element: exclusive row, width and height can be set. If not, the default value is 100% In line element: width and height cannot be set. Width and height are the width and height of text […]

  • Floating style


    Normal flow First, understanding floats requires understanding the document flow.Web page is a multi-layer structure, layer by layer, CSS can control the style of each layer, and users can only look at the top layer, no matter how many layers at the bottom will be covered by the front layer, causing users to be unable […]