Web front-end Big God finishing: CSS layout Classic problem

This article is from the front-end of the big God, mainly on the CSS layout Common classic problems, and provide reference links to relevant solutions, involving three columns layout, negative margin, clear floating, center layout, responsive design, Flexbox layout, and so on.

CSS Basics

Here are some good introductory tutorials:

• Screen Lesson Net –HTML+CSS Basic Course: Partial basis, can practice online and preview

• Mdn–css Getting Started Tutorial: MDN's official documentation

• Learn CSS layouts: typography and color matching are particularly comfortable, short but not in depth, suitable for an overview of getting Started

CSS Positioning issues

The main is the classic absolute positioning, relative positioning problems.

• 10 documentation Layouts: 10 Examples of layout, mainly related to relative layout, absolute layout, floating.

• Baidu Front-end College notes – Understanding Absolute positioning: The article itself general, a few references more detailed

• HTML and CSS Advanced Guide II-Positioning Details: Introduction to the use of floating, detailed description of positioning techniques, including how to accurately position the elements on the X-axis, Y-axis and Z-axis

Three-column layout

involves floating and clearing floats, mainly on the "Holy Grail" and "Double Flying wings" two solutions. These two methods are implemented by the three-column layout, both sides of the box width fixed, the middle box adaptive, they achieve the same effect, the difference lies in its realization of the idea.

Holy Grail Layout

Holy Grail: The parent box contains three sub-boxes (left, middle, right)

• The width of the middle box is set to width:100%; Exclusive line;

• Use negative margins (all margin-left) to pull the left and right boxes on the same line as the middle box;

  • . left {margin-left:-100%;} pull up the box on the Ieft.

  • Right {margin-left:-box width px; Pull the right box up.

• The parent box sets the left and right padding to leave a position for the left and Right boxes;

• The left and right boxes use relative layout to occupy padding blank, to avoid the contents of the middle box is covered by left and right box;

<!--the HTML structure of the holy grail--

<div class= "Container" >

<!--the middle Div must be written in front---

<div class= "middle" > Intermediate Elastic Zone </div>

<div class= "left" > Sidebar </div>

<div class= "Right" > Sidebar </div>

</div>

Dual Wing layout

Wings: The parent box contains three sub-boxes (left, center, right), and a sub-box in the middle of the sub-box.

• The width of the middle box is set to width:100%; Exclusive line;

• Use negative margins (all margin-left) to pull the left and right boxes on the same line as the middle box;

• Add a div to the middle box, then set Margin-left and Margin-right on the div to leave the position for the left and Right boxes;

<!--the HTML structure of the wings--

<div class= "Container" >

<!--the middle Div must be written in front---

<div class= "Middle" >

<div class= "Middle-inner" > Intermediate Elastic Zone </div>

</div>

<div class= "left" > Sidebar </div>

<div class= "Right" > Sidebar </div>

</div>

Similarities and differences between the Holy Grail and the winged wings

The Grail layout and the two-wing layout solve the problem is the same, both sides of the fixed width, the middle of the adaptive three-column layout, the middle bar to be placed in front of the document flow priority rendering.

• The basic ideas of the two methods are the same: first let the middle box 100% width of the same height of space, in the left and right two boxes are squeezed out of the middle box area, using the negative value of the margin-left will be left to two boxes back to the middle box with the same height of space. Next make some adjustments to prevent the contents of the middle box from being obscured by the left and right boxes.

• The main difference is how to make the contents of the middle box not obscured by the left and Right boxes:

  • Grail Layout method: Set the padding value of the parent box to leave space for the left and Right boxes, and then use the relative layout to adjust the position of the left and the padding to occupy the vacancy;

  • Two-wing layout method: Add a sub-box in the middle box, directly set the margin value of the sub-box to make up the empty space, instead of adjusting the left and right boxes.

To put it simply, the two-wing layout creates a div more than the Grail layout, but does not have a relative layout and sets a few properties.

Using floating implementations

My own use of floating also implemented a three-column layout: Left box left floating, right box floating, the middle box using margin-left and margin-right to leave the left and right box position, while the parent box set Overflow:auto; To avoid a child box overflow.

<!--floating implemented HTML structure--

<div class= "Container" >

<div class= "left" > Sidebar </div>

<div class= "Right" > Sidebar </div>

<!--the middle Div must be written at the end--

<div class= "middle" > Intermediate Elastic Zone </div>

</div>

The three-column layout refers to the following links:

• CSS three-column layout--middle fixed on both sides of the adaptive width: W3cplus's article, the use of double-wing and floating to achieve both sides of the fixed width, the middle self-adaptation, but also to achieve the two sides of the adaptive, the middle fixed width

• Jane Book – Grail layout and double-wing layout (front-end interview must SEE): Only the Holy Grail, but particularly detailed

• In Search of the Holy Grail: source of the Holy Grail layout

• Baidu Front-end College notes – The three-column layout of the two wings and the Holy Grail: the front-end learning notes of the front-end college students at Baidu

The three-column layout involves the problem of negative magin and clear floating.

Negative Magin

This raises the question of "negative margin":

• Negative margin Usage authoritative guide: The definitive guides to Using negative Margins, introduces some properties of negative magin and a lot of practical tips

• The impact of –margin on negative values and common layout applications: including its impact on the flow of the document, as well as some application techniques in the layout (such as removing the right border of the list, negative margin + positioning to achieve horizontal vertical center, remove the last Li element of the list of Border-bottom, Multi-column equal height)

• Blog Park –css layout singular kinky inventions-powerful negative margin: similar to the previous content

Briefly summarize several points:

• Negative margin elements do not break the document flow of a page without the use of float. So if you use a negative margin to move up one element, all the elements that follow are moved up (and the elements that relative positioned are different, preserving the original position, affecting the flow of the document).

• When the margin-top/margin-left of a static element is given a negative value, the element is pulled into the specified direction.

• If you set margin-bottom/right to a negative number, the element will not move Down/right as you think, but instead drag the subsequent elements into the original element.

• Negative margin increases the width of the element when the element does not have a width property or Width:auto.

• Margin-top negative does not increase the height, will only produce upward displacement, the negative value of margin-bottom will not produce displacement, will reduce the height of its own for the CSS read, affect the position of the element below, both the upper and lower adjacent elements are negative, the effect does not overlap, take negative more of that effect.

Clear floating

The removal of floats is mainly to solve the problem of high collapse. The simple clear:both does not solve this problem, so it leads to a lot of solutions.

• Stackoverflow–what methods of ' clearfix ' can I use?: Clear floating Black technology complete interpretation

• All those years we cleared together. Floating: Divine, the "clear float" is defined as "closed floating", the problem of origin and solution are clear, and analysis of the pros and cons of various solutions.

The various solutions are explained in detail in the links above, and we will not repeat them here. Broadly divided into two categories:

First, by adding an empty element at the end of the floating element and setting the Clear:both property, the after pseudo-element is actually a block-level element that generates content as a point after the element in the contents;

Second, by setting the parent element overflow or the Display:table property to close the float

By the way, clear float (for example, Clear:left) is set on an element to avoid having a floating element on one side, that is, constraining the current element, and that the bounds of the constraint are other floating elements. Setting clear float is not valid for elements that have already been floated.

Center layout

Centering in Css:a full guide: A very comprehensive center positioning blog, including horizontal centering in various cases, vertical centering and horizontal vertical centering scheme. There are demonstration examples and corresponding HTML and CSS code

The approximate structure of the article:

• Center horizontally

  • For in-line elements (inline): text-align:center;

  • For block-level elements: Set the width and Marigin-left and margin-right are set to auto

  • For multiple block-level elements: Set text-align:center on the parent element, set display:inline-block on the child element, or use the Flex layout

• Center vertically

  • For in-line elements (inline)

    • Single line: Sets the upper and lower pandding equal, or sets Line-height and height equal

    • Multiple lines: Set the upper and lower pandding equal, or set Display:table-cell; and vertical-align:middle;; or use flex layouts, or use pseudo-elements

  • For block-level elements (blocks): The first two scenarios below, the parent element needs to use relative layout

    • Known height: The child element uses the absolute layout top:50%, and then uses the negative margin-top to pull up half the height of the element

    • Unknown height: Child elements use absolute layout position:absolute; top:50%; Transform:translatey (-50%);

    • Use Flexbox: Select direction, Justify-content:center;

• Horizontal Vertical Center

  • Fixed height fixed width: first with absolute layout top:50%; left:50%, re-pull the element back with the same negative margin as half the width and height

  • Height and width unknown: first with absolute layout top:50%; left:50%;, and then Set Transform:translate (-50%,-50%);

  • Use Flexbox:justify-content:center; Align-items:center;

Responsive design

Responsive design is a strategy for responsive sites to "render" different display effects for different browsers and devices.

Media Queries is the most powerful tool you need to do this.

Note: responsive web design = rwd,adaptive web design = AWD

Rwd:

• Media Query technology using CSS

• Fluid layout (fluid grids)

• Adaptive image/Video and other resource materials

(For small, medium and large screen to do some optimization, the purpose is to make any size of screen space can be fully utilized)

Awd:

• CSS Media Query Technology (designed for limited number of preset screen sizes)

• Using JavaScript to manipulate HTML content

• Manipulate HTML content on the server side (for example, reduce content for mobile and provide more content to the desktop)

Above RWD and AWD explanations to be aware of @ Yi Feng

Refer to the Bootstrap grid system: http://getbootstrap.com/css/#grid-less

The Bootstrap 3 grid system has a four tiers of classes:xs (phones), SM (tablets), MD (desktops), and LG (larger desktops).

Implement your own grid system: Creating Your Own CSS Grid Systems

Flexbox layout

Flexbox Layout Reference The following a few articles on it, a few articles are similar, see one or two articles on the know probably, speaking of quite detailed, here do not repeat

• w3cplus– a full Flexbox guide: A complete guides to Flexbox translations

• Segmentfault–flexbox detailed

• w3cplus– schematic CSS3 Flexbox properties

• w3cplus–flexbox--Quick Layout Artifact

  Brianway

  brianway.github.io/2017/05/18/css-layout-classical-problems/

• Web front-end Novice learning platform: knowledge of the Sea Carpenter Library http://www.zhihaijiangku.com

Web front-end Big God finishing: CSS layout Classic problem