CSS layout problem Finishing

1, multi-element horizontal center

To achieve the effect:

Ordinary people see the topic, the initial feeling to realize the effect of the picture is not difficult, set the small black box width and height margin, font horizontal vertical center. In fact, the topic should actually be to examine the multi-element horizontal center, that is, regardless of the element (small black box) base is how much, they can be as a whole, horizontal center.

In the site layout, many times, the child element uses inline elements such as span or block element Li tag and the number of labels is variable, and we want to make this piece no matter how many (the overall width of the child element variable), always can be centered. This requires setting the child element Display:inline-block. Also, depending on the properties of the Display:inline-block, the child elements themselves have inline properties, so the parent element needs to be set Text-align:center to implement the child elements as a whole in the parent element horizontally centered.

main{  Text-align:center;} p{  Display:inline-block;  *display:inline;/*hack ie*/  *zoom:1;/*hack ie*/}

Using the Display:inline-block property, you can enable inline elements or block elements to define their own width and height without the float property, while at the same time allowing the element to be centered in the parent element.

Define the Display:inline-block property on inline elements and find that the display in IE6 and IE7 is consistent with other browsers, but the fact is that IE7 and the lower versions of IE do not support this property.

Under IE, display:inline-block just triggers the layout of the element. For example, setting the Display:inline-block to P can only guarantee that the P has the feature of the Block element (which can be set to width, height, etc.), but it will still produce a line break. The next step is to set the display:inline so that it does not generate a newline. Display:inline-block;*display:inline is written in the same style, the Inline-block property does not trigger the layout of the element, so we also add *zoom:1 to trigger layout.

In addition to the effective methods mentioned above, there is another way :

Use the Display:inline-block property to trigger the block element, and then define the Display:inline, so that the block element is presented as an inline object (two display to be placed in two CSS style declarations have effect, this is a classic IE bug, If Display:inline-block is defined first, then the display is set back to inline or block,layout does not disappear).

p {display:inline-block; ...} p {*display:inline;}

It is important to note, however, thatextra whitespace is generated between the Display:inline-block elements (the subject is not covered). Workaround: Parent element definition font-size:0 Removes the horizontal blank of the inline block element, and the child element defines the Vertical-align attribute to remove the vertical white space of the inline block element.

http://codepen.io/floralam/pen/XJwWZJ?editors=110

Enables multi-element horizontal vertical centering

Using Flexbox

Http://codepen.io/floralam/pen/MwKmGP

2, the layout of the fencing

To implement the layout:

Http://codepen.io/floralam/pen/OPYyEE

. parent{    Display:flex;    flex-direction:column;//the above two lines are equivalent to Flex-flow:colomn    flex-wrap:wrap;//shows that wrap line shows no end when the line wraps    height:440px;    width:660px;}

A flexbox layout consists of a telescopic container (flex containers) and a scaling project (Flex items) in this container.

Scaling direction and line wrapping (Flex-flow)

The telescopic container has a CSS property of "Flex-flow" that determines how the scaling project is laid out.

If the scaling container has the "Flex-flow" value set to "row", the scaling items are arranged from left to right.

If the "Flex-flow" value is set to "column", the scaling items are arranged from top to bottom.

Make a grid layout of 20%, 60%, 20%

. main-content {      width:60%;}. Main-nav,.main-sidebar {     -webkit-box-flex:1;      /* Old-ios 6-, Safari 3.1-6 */      -moz-box-flex:1;         /* Old-firefox 19-*/      width:20%;               /* for old syntax, otherwise collapses. */      -webkit-flex:1;          /* Chrome */      -ms-flex:1;              /* IE Ten */      flex:1;                  /* NEW, Spec-opera 12.1, Firefox 20+ */}

3, Unknown height multiline text vertically centered

method One, using the display:inline-block+ pseudo-element:http://codepen.io/floralam/pen/WbBrwV?editors=110

. container{   position:fixed;    left:0;    top:0;    height:100%;    width:100%;    Text-align:center;}. mask:after{    content: "";    Display:inline-block;    Vertical-align:middle;    height:100%}.dialog{    Display:inline-block;    BORDER:3PX solid LightBlue;}

The box container generates a "spare tire" of height 100% through after or before, and his height is consistent with the height of the container, and is vertically centered relative to the "spare tire", visually showing that it is centered vertically relative to the container.

Method Two (thanks to super timetable Hu Jin Brother's Tips), use Display:table-cell:

Http://codepen.io/floralam/pen/yNeMPg

The display is transformed into the form of the table, and then the vertical centering method is used to obtain the desired result.

Display:table This element is displayed as a block-level table (similar to <table>) with a newline character before and after the table.

Display:table-cell This element is displayed as a table cell (similar to <td> and <th>)

Method Three (thanks to super timetable Hu Jin Brother's Tips), Flexbox layout:

Http://codepen.io/floralam/pen/yNeMvM

Flexbox Properties:

Telescopic container: An element with "Display:flex" or "Display:inline-flex"
Telescopic project: Child elements of a telescopic container
Spindle, Spindle direction: The user agent along the spindle of a telescopic container to configure the telescopic project, the spindle is an extension of the spindle direction.
Spindle starting point, spindle end point: The configuration of the telescopic project starts at the beginning of the main spindle of the container and ends at the end of the spindle.
Spindle length, Spindle length properties: The width or height of the telescopic project in the spindle direction is the spindle length of the project, and the spindle length property of the telescopic project is the width or height property, which is determined by which one is in the direction of the spindle.
Side axis, side axis direction: axis perpendicular to the spindle is called the side axis, is the extension of the side axis direction.
Side axis start point, side axis end point: The configuration of the retractable row that fills the project starts at the start side of the side axis of the container and ends at the end of the side axis.
Side shaft length, side shaft length properties: The width or height of the telescopic item in the side axis direction is the side axis length of the project, and the side axis length property of the telescopic project is the "width" or "height" property, which is determined by which one is opposite the side axis.

Also, for single-line text, setting the Line-height=height code is more concise:

Http://codepen.io/floralam/pen/eNJvyE

The parent element sets the width height, and then sets the property

Text-align:center; /* Horizontal Center */
line-height:300px; /* line-height = height */

4, multi-column adaptive layout

For mobile device browsers: http://codepen.io/floralam/pen/NPVwgz?editors=110

. container{  Display:-webkit-box;}. left{  -webkit-box-flex:1;}. right{  -webkit-box-flex:1;}

The left and right elements are implemented, and the text of the element on the left does not overflow to the position.

1) Leave the left side of the picture floating or absolutely positioned,

Http://codepen.io/floralam/pen/wBbPPj

. right{

margin-left:150px;

}

2) Leave the left side of the picture floating or absolutely positioned,

Http://codepen.io/floralam/pen/gbJogQ

. right{

overflow:hidden;/* let the right text and the left side of the picture automatically column */

}

3) left picture set to left floating,

http://codepen.io/floralam/pen/bNyaaX?editors=110

. right{

display:table-cell;/* let the right text and the left side of the picture automatically column */

}

the General class statement for the two-column or multi-column adaptive layout is (Block horizontal label, to be matched with float):

Http://codepen.io/floralam/pen/vEwpjV

. cell{

padding-right:10px;

Display:table-cell;

*display:inline-block;

*width:auto;

}

5, force no line break

p{    White-space:nowrap;}

Wrap Line

p{word-wrap:break-word;//sex allows long words or URL addresses to wrap to the next line word-break:normal;//Let the browser implement a newline in any position}

Word-wrap is the control of line wrapping. Break-word is the control of word breaking.

Force English words to break

p{

Word-break:break-all;

}

6, Li over a certain length, with an ellipsis display

Http://codepen.io/floralam/pen/zxQjrK

. nowrap li{   white-space:nowrap;   width:100px;   Overflow:hidden;   Text-overflow:ellipsis;}

7, left navigation

http://codepen.io/floralam/pen/ogrbXW?editors=110

{:;:;:;:;:;} {:;:;:;} {:;}

8, CSS3 text column

http://codepen.io/floralam/pen/ZYdOmN?editors=110

9, Repair Sidebar

The addition of navigation and the main content of the outer container, when the width of the navigation and the main content plus the value of the inner and outer margins is greater than the outer container's width minus the padding values, causes the navigation and main content (one, the elements behind the HTML code) to be squeezed.

http://codepen.io/floralam/pen/XJLRYq?editors=110

Solution:

1) Use Box-sizing:border-box on the section element, and simulate IE6, so that the width of the inner element is the value of wide, not the width plus the value of padding and margin.

2) Width:-moz-calc (75% -1rem * 2); Width:-webkit-calc (75%-1rem * 2); Width:calc (75%-1rem * 2); Subtract the padding value from the Width property

3) Http://codepen.io/floralam/pen/yydPOE

Add an additional container inside the element and place padding in the new internal container, which is a fix and is supported by many browsers.

CSS depicts a triangle

Http://codepen.io/floralam/pen/azgGmZ

A lot about using CSS3 to depict a particular image, using code instead of the picture implementation (many small hill, back to the top) of the topic, are inseparable from the depiction of triangles.

11. Tips for clearing floating

In non-IE browsers (such as Firefox), when the height of the container is auto, and the contents of the container are floating (float is left or right), in which case the height of the container cannot be automatically stretched to fit the height of the content. A phenomenon that causes content to overflow outside the container and affect (or even destroy) the layout . This phenomenon is called floating overflow, in order to prevent the occurrence of this phenomenon of CSS processing, called CSS to clear the float.

1) Add last element <p style = "Clear:both" ></p>

2) parent element set Overflow:hidden;

3) Using CSS: after pseudo-elements

The CSS pseudo-element finally adds an invisible space "020" or a dot "." to the inner element of the container, and gives the clear property to clear the float. Note that in order to IE6 and IE7 browser, to Clearfix this class to add a zoom:1; trigger haslayout.

http://codepen.io/floralam/pen/xboPXK?editors=110