Back then, CSS3 didn’t come out. There have been interesting front-end CSS implementations since THE days of CSS2. It is also a good experience to review the past and learn something new. So without further ado, let’s start with a problem that we had about seven or eight years ago.

1. Title: A div is 200px wide and 200px high. If you add any four divs to a div, the width and height of the div will be 50% of their original width, left, right, top, and bottom. If you add any divs, it goes to all four corners. Also, the entire div is vertically and horizontally centered browser. (As shown below)

Illustration: Add any div to each of the four corners


At first glance, this question makes no sense. In fact, there are only two points.

The first point is vertical horizontal center. Back in the day, vertical horizontal center was achieved by positioning + negative margins, or using the table method. Now, in addition to this, you have the flexibility to use flex layouts, or translate(-50%, -50%) for vertical and horizontal centralization.

The second point is positioning. The thing to notice here is whether the child is going to be 50% or minus 100%. (See the implementation code)

In general, for code brevity, the child element should inherit the style of the parent element, so that it can be done for good. Now I will throw pig lead meat, released a method of implementation, looking forward to partners more implementation methods.

<! Doctype HTML > < HTML > <head> <meta charset=" utF-8 "> margin:0; background-color:#F00; position:absolute; } .top{width:250px; height:250px; top:50%; left:50%; margin: -125px 0 0 -125px; } .lt,.lt div{ width:50%; height:50%; left:-50%; top:-50%; } .rt,.rt div{ width:50%; height:50%; right:-50%; top:-50%; } .lb,.lb div{ width:50%; height:50%; left:-50%; bottom:-50%; } .rb,.rb div{ width:50%; height:50%; right:-50%; bottom:-50%; } </style> </head> <body> <div class="top"> <div class="lt"><div><div></div></div></div> <div class="rt"><div><div></div></div></div> <div class="lb"><div><div></div></div></div> <div class="rb"><div><div></div></div></div> </div> </body>Copy the code

Post: by the way to realize url:http://jsbin.com/picureporu/edit?html, output

Topic 2:

This is a question to test how much you know about positioning. Test point and question 1 very similar, or test orientation and vertical horizontal center.

1. The difficulty is that the 4 pictures should always keep the same horizontal line, and should be vertical and horizontal on the page. 2. In fact, as long as the picture as a benchmark, to achieve the line. The rest of the text is based on these images. 3. But because the number of the text is unable to determine, the positioning here is more test your understanding of positioning. No more words, continue to throw the pig to lead the meat.

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset = utF-8 "/> <title> </head> <style>. Mod-ju {width:630px; margin: -50px 0 0 -315px; position:absolute; top:50%; left:50%; height:100px; } .lists{ float:left; width:150px; margin-right:10px; background-color:#9C9; position:relative; } .lists img{ position:relative; clear:both; zoom:1; z-index:1; } .mr0{ margin-right:0; } .lists-top{background-color:#9C9; position:absolute; left:0; top:0; } .lists-top div{ position:absolute; left:0; bottom:100%; background-color:#9C9; width:150px; } .lists-bottom{background-color:#9C9; position:absolute; left:0; top:100%; clear:both; zoom:1; width:150px; } </style> <body> <div class="mod-ju"> <div class="lists"> <div class="lists-top"> <div> < H3 > subtitle subtitle subtitle 211111111111 Desa Assad Sada sada sada Sada Sada Shanda Sada Subtitle subtitle </h3> < H2 > God come kasadin into Lhasa drooler big </h2> </div> </div> <img src="http://photo.tuchong.com/1377265/f/31442058.jpg" width="150" height="100" /> <div class="lists-bottom"> </p> </div> <div class="lists"> <div class="lists-top"> <div> < H3 > subtitle </h2> </h2> </div> </div> <img src="http://photo.tuchong.com/1377265/f/31442058.jpg" width="150" height="100" /> <div class="lists-bottom"> <p> Contents </p> </div> <div class="lists"> <div class="lists-top"> <div> </h2> </h2> </div> </div> <img src="http://tb1.bdstatic.com/tb/r/image/2014-08-15/e6e4db30b0798bb045fa1c9e4ac0787d.jpg" width="150" height="100" /> <div class="lists-bottom"> <p> <div class="lists-bottom"> <p> <div class="lists-bottom"> <p Class = "lists mr0" > < div class = "lists - top" > < div > < h3 > subtitle subtitles subtitle subtitles subtitle subtitles subtitle subtitle < / h3 > < h2 > drooling big advantage to the great god came in Lhasa < / h2 > < / div > </div> <img src="http://photo.tuchong.com/1377265/f/31442058.jpg" width="150" height="100" /> <div class="lists-bottom"> <p> </p> </div> </div> </body> </ HTML >Copy the code

Demo URL: jsbin.com/rezinofaje/… Conclusion: the two questions are actually the knowledge of the investigation of positioning, along with a bit of vertical horizontal middle point. I throw the example did not use cSS3 knowledge to achieve, look forward to partners to provide more better and more concise implementation methods.

Sign: The front end is like rowing upstream. If you don’t advance, you fall back.