preface

Recently in the transformation of the project before the UI, hair under their own knowledge of CSS has not become a system, take a look at the recent time we are familiar with and strange CSS, first said the learning path: rookie tutorial (refers to the people to see the food), MDN, gold nuggets booklet play the beauty of the art of CSS. Combine to see, collect hundred of long, make up oneself of short.

Render flow redraw layout type box model BFC

rendering

Learning CSS we must first understand CSS in the browser is how to render as we see, this section mainly introduces the whole process, detailed rendering principle at present I am not very understand later free to study.

File Parsing Process

  • HTML parser: Parses HTML into a DOM tree
  • CSS parser: Parses CSS into A CSS tree
  • Rendering engine: Merge CSS tree and HTML tree into rendering tree
  • Renderer: Draws layers
  • JS engine: Executes JavaScript

: Parse file = “Draw layer =” Compose layer

Graph TD Parses HTML/ parses CSS --> Merges CSS/HTML tree into Render tree --> Traverses render tree to draw layers: Backflow/Redraw --> Merges all drawn layers and displays them on screen

Reflux and redraw

  • Backflow: Geometry changes will cause the browser to rerender (the browser will clear the page and redraw layers and merge layers, but we don’t feel it). The following common properties trigger backflow: display float margin padding…… .
  • Redraw: Changing the appearance of the DOM does not affect the rendering of geometric properties. The browser only rerenders the changed parts, not the following common properties trigger backflow: Background color Mask Outline…. .
  • Optimization: Minimize backflow and redraw of the browser.

Basic layout

Remember to contact with the front end of my college, and then the teacher in class is taught us to use the front three musketeers Dreamware/flash/ps, Dreamware is especially impressive, drag drag drag can generate a web page, just started to learn is to use the table layout, remember the popular at that time is also a table structured layout, The ability to layout pages should be the basis for getting started with the front end. I think there are three common layouts: block, table, float,position, flex, Grid, Column, VM/VW/REM…

The box model

If we want to master the layout of CSS, we must understand the layout model of CSS – box model, because the concept of box model is the basis of our layout and layout. In CSS, all elements are surrounded by “boxes”.

  • Structure: margin, border, padding, content
  • Box-sizing: Content-box Border-box
  • Weird box model: Margin content composition,
  • Margin collapse: the top div is set to margin-bottom, the bottom div is set to margin-top, and finally their spacing will only take the largest margin, not the sum of the two
  • Margin collapse: Setting the margin top of a child element in a parent element affects the position of the parent element.

The following code

<p> Collapse sibling element </p> <div class="top">top </div> <div class="bottom">bottom </p> <p> Collapse parent element </p> <div class="main"> <div Class ="child"> </div> </div> <style>. height:200px; background:red; } .child{ width:100px; height:100px; margin-top:100px; background:yellow; } .top{ background:green; height:150px; width:150px; margin-bottom:50px; overflow:hidden; } .bottom{ background:green; height:150px; width:150px; margin-top:50px; } </style>Copy the code

Block formatting context

Speaking of the box model, we need to know the next block formatting context. In MDN, block formatting context: Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where the layout process of box blocks takes place and where floating elements interact with other elements.

The BFC has the following features:

  • Layout orientation: The internal boxes will be placed vertically, one on top of the other.
  • Margin Distance: The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap.
  • The left side of the margin box of each box touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.
  • Region non-overlap: The region of the BFC does not overlap with the float box.
  • Standalone container: A BFC is an isolated standalone container on a page, where child elements do not affect the outside elements. And vice versa.
  • Height calculation: Floating elements also participate in the calculation.

The BFC has the following functions:

  • Avoid margin collapse problems
  • Keep the floating elements inside the BFC from running around;
  • And the float element.

The code is as follows:

<p>normal demo</p> <div style="border:solid 10px red; min-height:20px;" > <div class="float1"></div> </div> <p style="clear:both;" >BFC DEMO</p> <div class=" BFC ">< div class="float2"></div> </div> <p >BFC collapse problem parent element </p> <div class="main"> <div Class ="child"> </div> </div> <style>. BFC {display:inline-block; margin-top:50px; border:solid 10px red; min-height:30px; } .float1{ float:left; height:50px; width:100px; background:yellow; } .float2{ float:left; height:50px; width:100px; background:green; } .main{ width:200px; height:200px; display:inline-block; background:red; } .child{ width:100px; height:100px; margin-top:100px; background:yellow; } .top{ background:green; height:150px; width:150px; margin-bottom:50px; overflow:hidden; } .bottom{ background:green; height:150px; width:150px; margin-top:50px; } </style>Copy the code

The layout type

The following is a brief introduction to the common layouts in the next set

  • Table: The Table layout is one of the common properties of the early front-end layouts. It treats the page as a table, and each piece of content is a cell. Remember that implementing complex pages may require a table nested in a cell.
  • Blocks are where we lay out the normal document flow, left to right, top to bottom.
/ / table < table border = "1" > < tr > < th > name < / th > < th > age < / th > < th > height < / th > < th > weight < / th > < th > note < / th > < / tr > < tr > < td > name2 < / td > <td>24</td> <td>168cm</td> <td>57kg</td> <td>eeeee</td> </tr> <tr> <td>name3</td> <td>24</td> <td>168cm</td> <td>57kg</td> <td>eeeee</td> </tr> </table> // block <div>block</div>Copy the code

// Out of the document flow

  • Float: floating layout

  • Position (relative/fixed/absolute) : Location layout is one of the more commonly used in our layout, such as fixed navigation, pop-up window layout, and so on all need positioning properties, its main properties are the position: relative fixed/absolute left top right bottom… , as follows:.

<style>
div.parent
{
	width:100vw;
	height:100vh;
	background:gray;
}
	div.child{
	    width:200px;
		height:200px;
		background:blue;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-100px;
		margin-left:-100px;
	}
</style>
</head>
<body>
	<div class="parent">
		<div class="child"></div>
	</div>
</body>
Copy the code

Center the layout using Position and Margin

// Responsive layout

  • Flex: Flex layout,
<style>
div.parent
{
	width:100vw;
	height:100vh;
	display:flex;
	background:gray;
	justify-content:center;
	align-items:center;
}
	div.child{
	    width:200px;
		height:200px;
		background:blue;
	}
</style>
</head>
<body>
   <div class="parent">
       <div class="child"></div>
   </div>
</body>
Copy the code

Using Flex, you can easily achieve a centered layout

  • Grid: A grid layout
div.parent { width:400px; background:gray; display:grid; The grid - the template - the columns: repeat (4100 px); The grid - the template - rows: repeat (4100 px); justify-items:center; align-items:center; } div.child{ background:blue; border:solid 1px #ddd; font-size:18px; width:50px; height:50px; } </style> </head> <body> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> </div> </body>Copy the code

  • Column: indicates the column layout

According to my current development, I still use a lot of positioning layout and responsive layout, and basically these two layouts can deal with many common problems. The detailed properties of some other layouts are not described here, so you can write more on codeOpen when you are free.

conclusion

Front-end work no matter you are just beginning to contact white, or work for many years of seniors, we should continue to learn and warm. Front-end knowledge is wide and miscellaneous often don’t look will be rusty, out of their comfort zone, accept new skills can continue to progress, in addition, this is the first CSS series, mainly about the layout of the summary and understanding, there will be style and other knowledge summary, interested can continue to see. Insatiable in learning and tireless in teaching, why am I!