Various layouts and CSS techniques

In this paper, reference CSS layout classic problem preliminary consolidation , as well as some of his views.

About layout

1. float and a negative margin, there is a container in two sub-elements, the left floating first child, the second child element, margin: -第一个子元素的宽度
2. And with absolute positioning margin: a vessel or two sub-elements, a first absolute positioning, width may be dead, and then the second element of the margin-left: ah is a width of the first element;

Left-right layout

Flying wing and chalice conventional layout, and the layout Grail Flying wing problem is the same, they are fixed width on both sides of the middle three-column layout adaptive

Holy Grail layout

Parent box contains three sub-boxes (left, center, right)

• Three child elements are floating

• Width of the intermediate box is provided to width: 100%;a separate line;

• A negative margin (both margin-left) the left and right sides of the box and intermediate box dragged up the same line;

  • .left {margin-left:-100%;} The left side of the box to pull up
  • .right {margin-left：-右边盒子宽度px;} Pull up the right side of the box

• Disposed about the parent box to the left position of the padding is about the box

• Then it needs to be around two cartridges using relative positioning, to occupy the paddingvacated position to avoid the contents of the intermediate box are covered with a box around;

<!-- 圣杯的 HTML 结构 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 -->
    <div class="middle">中间弹性区</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>

Demo jsbin

Flying wing

Parent box contains three sub-boxes (left, center, right), the middle sub-box plus a sub-box.

• Width of the intermediate box is provided to width: 100%;a separate line;
• A negative margin (both margin-left) the left and right sides of the box and intermediate box dragged up the same line;
• Add in the middle of a div inside the box, and then provided to the div margin-leftand margin-rightto remain around the position of the box;

<!-- 双飞翼的 HTML 结构 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 -->
    <div class="middle">
         <div class="middle-inner">中间弹性区</div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>

Demo jsbin

Flying wing similarities and differences and the Holy Grail

Flying wing and Grail layout problem is the same, they are fixed width on both sides of the middle three-column layout adaptation, to the intermediate column to preferentially render the document in front of the stream.

• Both methods have the same basic idea: all three columns float float. First let the intermediate box 100% of the width of the space filled at the same height, the intermediate region of the extruded box located at the left and right boxes, using the negative margin-left back left and right two boxes and the intermediate boxes of the same height space. Next, the contents of some adjustments to avoid a box around the intermediate box is blocked.
• The main difference is how to make the contents of the intermediate box are not blocked around the box:
  • The method of Grail Layout: Set the parent box padding value of about leave room boxes, recycled box relative layout of the left and right to adjust the position of the space occupied by padding out;
  • Flying wing methods: in the middle of the box to add a sub-box directly set the value of the margin of the box to make the sub-space, without readjustment approximately box.

Simply put it is the Holy Grail Flying wing layout and more than create a div, but not relative placement, and set several small properties.

Floating achieve triple layout

I also realized using a floating three-column layout: The left box left floating, floating right side of the right box, use the middle of the box margin-leftand margin-rightto leave the position around the box, but the parent box set overflow: auto;to avoid sub-box overflow.

<!-- 浮动实现的 HTML 结构 -->
<div class="container">
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
    <!-- 中间的 div 必须写在最后面 -->
    <div class="middle">中间弹性区</div>
</div>

Horizontal Centers

• For inline elements (inline): text-align: center
• For block-level element (block): and setting the width margin-leftand margin-rightis set to auto
• A plurality of block-level elements: parent element is provided text-align: center, disposed subelementsdisplay: inline-block
• A plurality of block element (flex), the parent element is provided display: flex; justify-content: center

Vertical center

• For an element (inline) inline
  • Single line: set equal vertical pandding; or set line-heightand heightequal
  • Multi-line: vertically disposed equal pandding; or set display: table-cell;and vertical-align: middle;; or using flex layout; or using pseudo-element
• For block-level element (block): before both solutions need to use parent element relative layout
  • Known height: sub-elements using absolute layout top: 50%;, then a negative margin-tophandle pull up half the height of the element
  • Unknown Height: sub-elements using absolute layout position: absolute; top: 50%; transform: translateY(-50%);
  • Use Flexbox: choose the direction,justify-content: center;

Horizontal and vertical center

• Given the high fixed-width: first with absolute layout top: 50%; left: 50%;, and then half the width and height equal to the negative margin handle elements pull back
• The height and width unknown: first with absolute layout top: 50%; left: 50%;, then settransform: translate(-50%, -50%);
• Use Flexbox:justify-content: center; align-items: center;

Other tips

With floating when the need to clearfixclear the float, remember:

.clearfix::after{
    content:'';
    display: block;
    clear:both
}

The parent of the floating element coupled with clearfixthis class, we can do without the side effects of clear float.

Note :

• The browser's default font-size: 16px
• text-decoration: attribute can have two values: the first is in the form, the second is the style, such as: line-through redfont intermediate red line
• All elements can be inline elements, it can be said inline element. The default is the default browser vendors to the
• The selector priority principle: the greater the more accurate
• color: inherit
• Text word-break: break-all can all be interrupted
• In general, it can be said inline element is determined by the height of the line-height, font size, line height is less than
• Upper and lower margin is not incorporated in the case of inline-block
• Less than a last resort situation do not set the height.
• css longitudinal priority document is provided position: relative; rely than normal stream before
• span is not set display:inline-blockis not the margin-bottom in force
• Inline elements do not set display:inline-blockcan not be used padding-top distraction
• display:inline-blockThere will be bug, there will be a void at the bottom, and needs vertical-align: top;(remember)

What determines the height of the elements

Div height determined by the content determined by the sum of the height of the flow elements within the document (decision are not equal)

Document flow: flow direction in the document element, the element row from left to right, top to bottom block-level elements.

Reproduced in: https: //www.jianshu.com/p/fb205c00813c