Tag:Block level

  • Understanding and creation of BFC


    1、 Definition 1. BFC is short for block formatting context, which means block level formatting context. It is an independent block level rendering region, which has its own rendering rules and has nothing to do with the outside of the region;2. After rendering the interface, switch to debug mode, press Ctrl + Shift + C, […]

  • HTML and CSS design 01 — HTML framework and Tags


    HTML frames and Tags 1、 Framework 1. Set website Icon < link rel = “shortcut icon” a 2. Set the keywords and description of the website < meta name = “Keywords” content = “Keywords” > < meta name = “description” content = “description content” > 3. Writing scripts <script> ….. </script> 4. Writing style <style> […]

  • HTML and CSS design 04 — the core of CSS


    CSS core 1、 Box model Box model(https://segmentfault.com/a/11…) 2、 Display property: used to set the display mode of elements None: do not display elementsBlock: block display, setting line breaks before and after elements. Purpose: to convert row level labels to block level labels (row level labels do not set width and height, but can also set […]

  • ES6 Series 1: let and Const


    The rookie official account of “Code tailor” provides technical information and a series of basic articles for front-end developers. WeChat pays close attention to the public address of “little and mountain rookie”, and gets the latest articles in time. preface Before learning, we would like to tell you that this article is an introduction to […]

  • CSS of relearning front end (3) BFC and cascading context


    This article mainly introduces BFC and cascading context. Block formatting context (BFC) 1、 Definition of BFC  BFC (block formatting context): is an independent rendering area, the layout of elements inside the box will not affect the outside of the box. It belongs toOrdinary flow。 2、 Which methods create a block formatting context   1) root element (< […]

  • Block level element and in line element collation


    Block level elements: Most of them are structural markers <address>…</adderss> < center >… < / center > address text <h1>… < / H1 > Title Level <h2>… < / H2 > Title Level 2 <h3>… < / H3 > Title Level 3 < H4 >… < / H4 > Title Level 4 < H5 >… […]

  • JavaScript advanced (5)


    ES6 Es: full name ECMAScript, it is a standard specification of scripting language developed by ECMA International Organization for standardization. The so-called ES6 refers to the version after 2015 Let keyword New keyword of declaring variable in ES6 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> The < title > let keyword declares variables < / […]

  • 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 : […]