Frontend practice summary and practice summary

Frontend practice summary and practice summary
1. Front-end basic box model location (relatively absolute) browser rendering Order (from top down, from outside to inside; if there is width inside, then from inside, if the div does not set the width, it will keep up until the div with the configured width) floating 2. The basic layout is fixed in the middle and adaptive on both sides (that is, the center is located). display is available: inline-block and text-align: center or margin: 0 auto are used to process fixed center self-Adaption on both sides (starting from the box model) you can use two fixed floating div s on the left and right plus the divs with the margin-left margin-right offset in the middle to move the layout of other waterfall flows to the left, right, and up and down. 3. Practical Application Module
It should be noted that, except for the exclusive box, the actual percentage or width should be exclusive. The internal content should not be specified and should be written according to the percentage. The above should be <div> <! -- You must first have a padding width --> <div> </div> the image used above sets the percentage width, and then the browser automatically fills the height, (defect: 1. loading height drops, but unimportant images are loaded as soon as they are loaded to form blocking. If background-image can solve post-loading problems, however, if you want to implement delayed loading, you need to write the style to the page.) The second method is to use padding-top = (Image Height/image width) * 100%, in this way, you can use background-image to set the image. For example :. figure {padding-top: 30.85%;/* 316/1024 */background: url ("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat; background-size: cover; background-position: center ;} <div class = "figure"> </div>
Pay attention to the four items, and divide them equally by percentage, the text in the image is centered 4. Attention should be paid to the following: div span text and image text are centered as long as text-align is specified, but the image cannot use margin: 0 auto to specify the center div and span, the difference is that if you use text, you need to specify the container as the text (display: inline-block ), we recommend that you use the "display: inline-block verxxxalign: middle parent object" to use margin: 0 auto vertical center to specify the line-hight to distinguish the text height from line-height. How can we achieve equality? The mobile phone version percentage and rem usage percentage are only used for the width percentage, and rem is generally used for the text size and height. To clear float, We Need To summarize the code of the common clearing Floating Method.

From Weizhi note (Wiz)