Summary of the front end • Basic article · CSS Layout

This is the front end summary • Basics · CSS series of the first, the main summary of the basic knowledge of the layout.

First, display    1.1 box model (Box-model)    1.2 inline element (inline) & Block Element (block)    1.3 inline block Element (Inline-block ie8+ ie6-7/ Tools)    1.4 Flex (ie11+ ie10/-ms-)    1.5 None two, position (position) three, supplemental    3.1 floating (float)    3.2 cascade (Z-index)    3.3 Overflow (overflow)    3.4 Resize (notie) (CSS3)    3.5 columns (column) (ie10+ notoperamini) (CSS3)

First, display (displays)

1.1 Box Model (Box-model)

Look at the picture to understand the box mould

The box model includes the contents (content), padding (padding), Border (border), margin (margin). The height that we set for the element is the height of the content. When you add a fill (padding) to an element, the element looks higher.

The following is a demo example of a box model that can be viewed in Google Chrome using the right-click > Properties >computed.

<p class= "Box-model" >box-model</p>.box-model {    border:1px solid red;    padding:20px;}

Box model with border boundary

There are times when we don't want to add a fill (padding) to an element, the height of the element changes, which is not conducive to our layout. The box model of the element can be set to a box model bounded by a border (border) (Box-sizing:border-box;). In the strange mode of IE, this box model is used by default.

The following is an example.

<p class= "Box-model" >box-model</p>.box-model {    box-sizing:border-box;  /* Set to border-bound box model */    border:1px solid red;    height:80px;    padding:10px;}

1.2 Inline elements (inline) & block elements

Layout generally uses block elements

Block elements can be set to a wide height, which occupies one row by default. The inline element cannot be set to a wide height, and the width is determined by its contents.

The block element is not high by default and has a content height. Inline elements are not height and width by default, and content is available. Although the inline element cannot be set to a wide height, it can be set to a wide height after it is set to absolute positioning (absolute). (located in section II)

Block element: P P ul li table Form HTML5 (header section footer). Inline elements: A font (EM strong i) img span.

Block elements can become inline elements

We usually turn Li into inline elements to make navigation bars.

<ul class= "NAV" >    <li> Home </li>    <li> articles </li>    <li> message </li></ Ul>.nav li {    display:inline;}

A row has only one block element

However, inline elements can have more than one.

Empty block elements will disappear in the layout

When debugging a page you want to show where the element is in the layout, we usually add a height to the element.

Empty the contents of the inline element will also disappear in the layout (not recommended as empty).

1.3 Inline block elements (Inline-block ie8+ ie6-7/tools)

Compatibility is supported >=ie8,ie6-7 see focus on web front-end development.

Clear two element clearance

The gap between the two elements is derived from the space between elements, the stitching element can be eliminated. You can also use templates to eliminate them. For more discussion please see.

<ul class= "NAV" >    <li> Home </li><li>    articles </li><li>    Guestbook </li></ Ul>

element alignment in special cases

Three Li side by side, all set into Inline-block. When Display:none is set on the leftmost element, the other two Li sinks to the bottom of the container. At this point, you need to align the top of the two Li settings (vertical-align:top;).

<ul class= "nav" id= "nav" >    <li class= "left" ><p class= "hidden" > Home </p></li>    <li class= "center" ><p> articles </p></li>    <li class= "right" ><p> message </p></ Li></ul>.hidden {display:none;}. Left {height:50px;}. center,.right {vertical-align:top;}

1.4 Flexible box (Flex ie11+ ie10/-ms-)

Compatibility is supported >=IE11,IE10 need to add browser private prefix (-ms-).

Using resilient layouts

With the elastic layout, the float clear vertical will fail. See Nanyi's Blog for more information.

Display:flex;  Block elements with Display:inline-flex;  In-line elements with

Flexible layout settings

These are used as reference manuals for the time being.

Flex-direction:row/row-reverse/column/column-reverse;  Direction flex-wrap:nowrap/wrap/wrap-reverse;  NewLine Flex-flow:direction/wrap;  shorthand for direction and line breaks, default to Flex-flow:row Nowrap;justify-content:flex-start/center/flex-end/space-between/space-around;  Spindle (default is horizontal axis) Align-items:flex-start/center/flex-end/baseline/stretch;  Cross axis Align-contents:flex-start/center/flex-end/space-between/space-around/stretch;  The alignment of multiple axes (single invalid) order:number;  Order (default is 0) Flex-grow:number;  When the width is more than the magnification ratio (default is 0) Flex-shrink:number;  Reduce the ratio when the width is over (default is 1) Flex-basis:number/auto;  The main spindle space (default auto) Flex:grow/shrink/basis the project occupies before allocating extra space;  Grow shrink basis Three attributes of the abbreviation align-self:auto/flex-start/center/flex-end/baseline/stretch;;  Alignment of individual items, overriding Align-items (default auto)

Spindle (justify-content) can only center one line of elements

What about the many lines? We can nest multiple rows in a single p and construct a single-line element.

Below is an example of a horizontal and vertical center.

<p class= "Parent" >    <p class= "Child" >        <p> two lines </p>        <p> Center </p>    </p></p>.parent {    Display:flex;  /* Use Flex Layout */    align-items:center;  /* Cross Axis Center */    Justify-content:center;  /* Spindle (default is horizontal axis) center */    background:red;    height:200px;}

1.5 None

Hide elements

The following two methods can be used to hide elements, but Display:none will clear the original occupied layout space.

Visibility:hidden;  hidden element display:none;  Hide elements and clear the original occupied layout space

Second, position (position)

The Top,right,left,bottom element can be used for absolute (absolute), relative (relative), and stationary (fixed) positioning. But the meaning of the expression is different.

Clear location of layout space (absolute fixed)

Fixed positioning does not change position as the mouse scrolls. He really is a fixed screen of a certain location, the more common is the bottom right corner of the page ads.

The location origin of absolute positioning (absolute) is the parent node of the non-default positioning (static). Can be absolute fixed relative, if the parent node does not have these, the positioning origin is the body. Using one of these two types of positioning, the layout space that the element originally occupies will disappear (out of the document stream).

Here is an example of absolute positioning (absolute). The left image is the default layout, and the right image is after using absolute positioning (absolute) (the original layout space of the element is cleared).

<p class= "Border" >i ' m in front of You.</p><p class= "parent" >hello</p><p class= "Border" > I ' m next to You.</p>.border {    border:1px solid blue;}. parent {    Position:absolute;    left:20px;    top:20px;    background-color:red;    padding:5px;}

Preserving the positioning of the layout space (relative)

The layout space that the element originally occupies remains in the document flow.

Relative positioning (relative) is positioned relative to the original position. Change the absolute in the example above into relative to see the effect. Using this method, the layout that the element was originally occupied is preserved.

Default positioning

The default location is static.

Using Relative+absolute positioning skillfully

The parent uses relative, and the descendants use absolute. The location origin of the descendant becomes the upper-left corner of the parent element.

Third, supplementary

3.1 Float (float)

Just started to do the page, still do not know the floating after the need to clear, only Chi want to hit the keyboard. It's better now, I know a little bit of tricks. For more tips, see Tomson.

Clear float (. Clear)

This method requires adding an empty node after the floating element, and then writing the clear property. Compatible IE6 need to add zoom:1;.

<ul class= "NAV" >    <li> Home </li>    <li> articles </li>    <li> message </li></ Ul><p class= "Clear" ></p> <!--used to clearly float the empty element--><p> I'm another line </p>.nav li {    background-color:red;    Float:left;    List-style-type:none;}. Clear {    clear:both;    zoom:1;  /* IE 6 */}

Clear float (overflow:hidden;)

Using this method means that the floating element has a parent element and adds a overflow:hidden to the parent element;

<ul class= "NAV" >    <li> Home </li>    <li> articles </li>    <li> message </li></ Ul><p> I was another line </p>.nav li {    background-color:red;    Float:left;    List-style-type:none;}. Nav {    Overflow:hidden;}

Text Wrapping

Another magical thing for floating elements is the realization of text wrapping.

<p class= "article" >    <p class= "Photo" ></p>    <p> This text is long and is used to test text wrapping. The placeholder for the picture will be simulated with the P block. This text is very long, is used to test text wrapping. The placeholder for the picture will be simulated with the P block. </p></p>.article {    width:200px;}. Photo {    width:60px;    height:60px;    background-color:red;    Float:right;}

3.2 Cascade (Z-index)

cascading controls the upper and lower placement relationships of elements. The larger the value, the higher the upper.

<p class= "z zOne" ></p><p class= "z ztwo" ></p>.z {    position:absolute;    top:200px;    left:200px;    width:60px;    height:60px;    background-color:red;    Opacity:. 5;  /* Set the transparency to 0.5 */}.ztwo {    top:220px;  /* and the first block stagger to see effect */    left:220px;    Background-color:blue;    Opacity:. 5;}

3.3 Overflow (overflow)

When there are multiple industry tabs within the page, a page that has a scroll bar will be generated from one of the pages without the right scroll bar, resulting in a page bounce. The workaround is that the default setting displays the right scroll bar.

overflow-x:visibility;

3.4 Resize (Notie) (CSS3)

Defines whether the user can adjust the border size of the current element.

Resize:horizontal (horizontal)/vertical (vertical)/both/none/inherit;

3.5 Column (column) (ie10+ notoperamini) (CSS3)

Compatibility is ie>=10 and does not support Opera Mini. See the beginner's tutorial for more details.

<p> This section of text is used to test the column. This section of text is used to test the column. This section of text is used to test the column. </p>p {    width:200px;  /* Set the width of the paragraph short to facilitate the presentation of the effect * *    column-count:3;  /* settings need to be divided into several columns */    column-gap:20px;  /* Set two columns of space */}

Conclusion

This section mainly refers to learning CSS layout, Nanyi blog, Tomson, focus on web front-end development, rookie tutorials, and I am reading a book "CSS Design Guide."

Write a long article on the front end for the first time. Write a change, change the writing, and then continue to change, and continue to write. In this cycle, it is only to make the words more appropriate. What is inappropriate in the text, also hope to point out.