Learn CSS Tutorials: learn CSS page layouts

Article Introduction: you may know what the selector is, what is called the attribute, what is the value, maybe you have a little bit of one or two on the CSS layout, but that's not enough. If you want to learn HTML and CSS from the beginning, I suggest you take a serious look at this tutorial. Otherwise, in the work, you still fall into the mire of confusion struggling.

This article introduces the CSS basics that are now widely used in the field of site layout.

You may know what the selector is, what is called the attribute, what is the value, maybe you have a little bit of one or two on the CSS layout, but that's not enough. If you want to learn HTML and CSS from the beginning, I suggest you take a serious look at this tutorial. Otherwise, in the work, you still fall into the mire of confusion struggling.

0 Layout

If you want your page content to be displayed as a column, then you don't need to use CSS layout. However, if the user's browser interface adjustment is very wide, then every time after reading a line of text, your vision to move from right to left to the next line, very troublesome Ah, you adjust the size of the interface to know what I said.

Before we solve this problem, let's take a look at the next very important display attribute.

"Display" Property

In the control layout aspect, display is the most important CSS attribute, each element has its default display property value, most of the default value is not block is inline, the element that uses blocks tag is commonly called chunk level element, and inline element is commonly called inline element.

Block

Div tag is a block-level element representation, block-level elements occupy a whole line of independent, the other common block-level elements have p and form, as well as HML5 joined Header,section and footer, and so on.

Inline

A span label is a representative of an inline element that can be added to a paragraph if the inline element avoids breaking the paragraph structure. Element A is the most common inline element, often used by him as a link.

None

Another common display property value is None, and the default property value of the more specific elements like script is none, and he is often used to hide JavaScript statements and hide elements that are temporarily unused to display. But this is different from visibility. Set the Display:none element, after the page is rendered, as if the element does not exist. While setting the Visibility:hidden, the element is also hidden, but if he is completely hidden, it still occupies the original space. In other words display:none will really get you out, and Bisibility:hidden is just a cloak for you, you are still in the same place.

Other Display Properties

In addition to the display attribute values mentioned above, there are actually many display property values, such as list-item and table. (link) Here is a detailed list. We'll talk about Inline-block and Flex next, so stay tuned.

<4> Friendly Tips

As I mentioned, each element has a default display property value. In fact, you can completely ignore this sentence! Although the div is not possible to be inline by default, you customize the display attribute value element that you want. As a common example, the Li inline element is often used as a horizontal menu.

View Online

Extended Reading

1. "Display" Property
2. Display
3. CSS display:inline-block:why It Rocks, and Why it Sucks
4. Use CSS display:table for Layout
5. Display

--Desert

Margin:auto;

#main {   width:600px;   margin:0 Auto;  }	 

Designing the Width property in block-level elements prevents the container from being filled horizontally. Then you can also set the left and right margin to be centered horizontally. Occupies the specified horizontal width in the middle, and then the remaining width space divides into the left and right margins.

The only problem that needs to be solved now is that once the browser's display window is wider than the width of the element you set. The browser will automatically add a horizontal scroll bar to the content display, sometimes this is not what we want, we need to improve.

View Online

Extended Reading

1. Box model
2. CSS Centering 101
3. How to Center anything with CSS
4. Equal Height Column Layouts with Borders and Negative margins in CSS
5. collapsing margins

--Desert

Max-width

#main {   max-width:600px;   margin:0 Auto;  }	 

Using Max-width instead of width can enhance the browser's ability to handle small window situations. This approach is particularly important on the mobile side. Now you can adjust the size of the window, to control it!

By the way, Max-width gets all the mainstream browser support including IE7, so even if you use it.

Box Model

When we talk about width, we should talk about an important attention point about width, the box model. When you set the width in an element, the actual size of the element is generally larger than the value you set: The border of the element and the padding will further support the width of the container in the size of the original set width. Looking at the example below, two containers with the same width size are displayed in different sizes.

.simple {   width: 500px;   margin: 20px auto; }  .fancy {   width: 500px;   margin: 20px auto;   padding: 50px;   border-width: 10px; }	 

View Online

In general, we need to calculate to solve this problem, CSS developers always need to set the container in advance (minus border and padding occupied width) to achieve the desired size, and thankfully, now you don't have to be so hard to force.

box-sizing

As day after day, people increasingly find that the size of the container is very hard to calculate, so, a name called Box-sizing CSS Properties fresh out of the oven. When you set the Box-sizing:border-box in the container, the border and padding in the container cannot affect the width of the container. The following example and most of the above examples are the same, but the following example has a box-sizing:border-box;

.simple {   width: 500px;   margin: 20px auto;   -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;           box-sizing: border-box; }  .fancy {   width: 500px;   margin: 20px auto;   padding: 50px;   border: solid blue 10px;   -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;           box-sizing: border-box; }	

View Online

This is the best way to keep the width and size consistent so far, and CSS developers put the following CSS code on their pages so that all the containers on the page have this attribute.

* {   -webkit-box-sizing:border-box;      -moz-box-sizing:border-box;           Box-sizing:border-box; }	 

This way, all the elements on the page can be more visually formatted.

Since Box-sizing is a fairly new attribute, you should add the-webkit-and-moz-prefixes as I did in the previous example, so that they are better displayed in their corresponding browsers. ie8+ supports this property.

Extended Reading

1. CSS3 box-sizing
2. Box Sizing
3. A look INTO:CSS3 box-sizing
4. Box-sizing
5. Start using CSS box-sizing today
6. ' Box-sizing ' property

--Desert

Position

In order to cope with more complex layout requirements, we cannot ignore the position attribute. It has a package of useful attributes, and their names are abstract and difficult to remember, OK, let's break it one by one, but you have to be prepared for a protracted war.

Static

. static {   position:static;}	 

Static is the inherent default attribute of an element. It means no special positioning. In general, the static property indicates that the element is not positioned, and once the Position property is set to another value, it indicates that the element is positioned.

Relative

. relative1 {   position:relative}. relative2 {   position:relative;   Top: -20px;   left:20px;   Background-color:white;   width:500px; }	 

Relative behaves like STAITC, unless you add additional attributes.

Setting the Top,left,right,bottom property in a relative (position:relative) positioned element will change the position of the modifier. And the location of the other content will not change because of the position of the element.

Fixed

The element of the fixed property value is positioned relative to the window, which will always appear in the same position on the screen regardless of where your scroll bar rolls. As with position, both attribute Top,right,bottom and left are used.

I think you must have noticed the fixed property at the bottom right of the screen. Well, now you can study it carefully, and here's the relevant CSS code.

. fixed {   position:fixed;   bottom:0;   right:0;   width:200px;   Background-color:white; }	 

A fixed element does not affect the layout that it has positioned on the page. However, the mobile-side browser's support for the fixed properties is poor, and there are corresponding solutions .

Absolute

Absolute is the most complex position attribute value, absolute is similar to fixed, but the fixed is positioned relative to the window, and absolute is positioned relative to the nearest patriarchal positioning element. If absolute does not have a patriarchal positioning element, then he or she is relative to the BODY element in the document, which means it will follow the scrolling of the page. Remember, the positioned elements are those that have the position attribute and the attribute value is not static.

The following is a simple example

. relative {   position:relative;   width:600px;   height:400px; }. Absolute {   position:absolute;   top:120px;   right:0;   width:300px;   height:200px; }	 

Class= "Relative", change elements belong to relative positioning. If the element is set to position:static, then the absolute position of the child is not detached from the element and run to the body.

Class= "Absolute": this element is absolutely positioned and positioned relative to its parent.

This is a tricky thing, but if you want to make a good CSS layout you have to learn it. Here are a few more examples of position.

View Online

Position Example

A practical example can give us a more profound impression of position. Here's a real page layout

. container {   position:relative;} nav {   position:absolute;   left:0px;   width:200px; Section {/   * position is static by default *   /margin-left:200px;} footer {   position:fixed;   bottom:0;   left:0;   height:70px;   Background-color:white;   width:100%; } body {   margin-bottom:120px;}	 

View Online

The Margin-left is set in the section to allow enough space for the nav, otherwise the absolute elements overlap with the static elements.

Notice what happens when you change the size of the window. The effect is very good.

If you set a position:fixed on a footer or header, remember to make a place for them, and for footer I set a margin-bottom value to it in the body.

When the container height is greater than nav, it can be displayed normally. Otherwise NAV will be out of container. Next, we will continue to analyze the pros and cons of other CSS layout techniques for you.

Extended Reading

1. Ten steps to illustrate the position of CSS
2. HTML and CSS Advanced Guide bis--Positioning detailed
3. CSS Positioning 101
4. CSS Positioning:a Comprehensive look
5. Position

--Desert

float

Another CSS layout property to introduce is float. Float enables you to float text around a picture, as shown in the following illustration.

img {   float:right;   margin:0 0 1em 1em; }	 

View Online

Extended Reading

1. One of the float of CSS
2. The second float of CSS
3. should not use Inline-block instead of float
4. All About Floats
5. CSS Floats 101
6. Float vs. Inline-block

--Desert

Clear

Clear is a useful property for controlling float, and we can compare the following two examples:

. box {   float:left;   width:200px;   height:100px;   Margin:1em; }	 

View Online

In this example, the section element is actually after the DIV (the DOM structure). The div element, however, floats to the left, so the text in the section surrounds the Div, and the section element surrounds the entire element. What if we want to have the section displayed after the floating element?

. box {   float:left;   width:200px;   height:100px;   Margin:1em; }. After-box {   Clear:left}	 

View Online

With clear we can move the paragraph below the floating element div. You need to use the left value to clear the floating element. You can also use right or both to clear or clear the left and right float.

Clear Float (clearfix hack)

When we use float, we sometimes have some unexpected and difficult problems.

img {   float:right;}	 

View Online

There's a method called Clearfix hack to solve this problem, but it's annoying, let's try to add a new CSS statement.

. clearfix {   Overflow:auto}	 

Now let's see what happens:

View Online

This can work in a modern browser. If you want to support IE6, you'll need to add the following style:

. clearfix {   overflow:auto;   Zoom:1; }	 

Some unique browsers require "extra care". Clear float This tan is deep , but this simple solution is already working on all the major browsers today.

Extended Reading

1. Clear Float
2. CSS Float theory:things you Should Know
3. Page layout with floats and clearing
4. Clearing floats

--Desert

Floating Layout Example

It's a common thing to see the layout everywhere with float. The following layout is used when we introduce position, and now using float instead of position can achieve the same effect.

Nav {   float:left;   width:200px; section {   margin-left:200px;}	 

View Online

This example looks exactly the same as before. Please note that we did a "clear float" on the container. This is not necessary in this case, but it is needed when the NAV is higher than the non floating content.

percent width

You can use percentages to lay out the layout, but this requires more code. In the example below, the Nav container is flattened when the window is too small. So when choosing a layout plan, consider what you are designing.

Article img {   float:right;   width:50%; }	 

View Online

You can even use both min-width and max-width to limit the maximum or minimum width of a picture!

Percentage Width layout

You can use percentages to lay out the layout, but this requires more code. In the example below, the Nav container is flattened when the window is too small. So when choosing a layout plan, consider what you are designing.

Nav {   float:left;   width:25%; section {   margin-left:25%;}	 

View Online

When the layout is very narrow, the nav will be squashed. To make matters worse, you can't use min-width on nav to fix the problem, because the column on the right will not follow it.

Media Queries

"Responsive Design" is a Web site based on different browsers and device platform can make different performance of the scheme, you can now change the size of the window, no more cool than this.

To do this, media inquiries are essential to this step. Now let's use a percentage width layout, and then resize the browser until it can't hold the nav menu, the layout begins with a column showing the code as follows.

@media screen and (min-width:600px) {   nav {     float:left;     width:25%;   }   Section {     margin-left:25%}} @media the screen and   (max-width:599px) {   nav li {     display:inline;   }}	 

View Online

Now our layout is great on the mobile browser as well. Here are some famous sites that also use media queries . You can also learn more about media queries in the MDN document .

Friendly Tips

After using meta viewport , the layout on the mobile side is more icing on the cake.

Extended Reading

1. CSS3 Media Queries
2. Media inquiries
3. CSS3 Media Queries to Create a Mobile Version of Your Website
4. Media Queries
5. CSS Media Queries & Using Available Space
6. How to use CSS3 orientation Media Queries

--Desert

Inline-block

We can use the grid to fill the entire browser. We've been using float for a long time, but now Inline-block can do it more easily. Inline-block is similar to Inline but they have a width and height. Let's compare the two examples below.

Difficult way (using floating)

. box {   float:left;   width:200px;   height:100px;   Margin:1em; }. After-box {   Clear:left}	 

View Online

Easy Way (using Inline-block)

You can also use Display:inline-block to achieve the same result at the end.

. box2 {   display:inline-block;   width:200px;   height:100px;   Margin:1em; }	 

View Online

If you need IE6 and IE7 support Inline-block This property is worth talking about, you need to do some work. When you talk about Inline-block, you just have to remember to trigger something called haslayout in an old-fashioned browser. If you are interested in this aspect, then please click on the previous link, in-depth understanding of it, if there is no problem, we continue to enter the next step of learning.

Inline-block Layout

You can also use Inline-block for layout, but there are some areas that need our attention:

• Vertical-align properties can affect Inline-block, you may need to set the Vertical value to top.
• You need to set the width above each column.
• If they have a space code in HTML, there will also be gaps between columns and columns.

Nav {   display:inline-block;   Vertical-align:top;   width:25%; }, column {   display:inline-block;   Vertical-align:top;   width:75%; }	 

View Online

Extended Reading

1. What ' s The Deal with Display:inline-block?
2. Using Inline-block to Display a Product Grid View
3. Fighting the Between Inline block Elements
4. How to resolve white space between inline-block elements
5. Inline-block

--Desert

column

Here are a series of new CSS properties that can help you easily implement multiple-column layouts of text. Let's see:

. three-column {   padding:1em;   -moz-column-count:3;   -moz-column-gap:1em;   -webkit-column-count:3;   -webkit-column-gap:1em;   Column-count:3;   Column-gap:1em; }	 

View Online

CSS column is a very novel attribute, so you need to use a prefix to indicate it, and this attribute is not supported by IE9 and the following and opera Mini . There are more properties related to column below, Click here to learn more , if that's okay, let's go on to the next one.

Extended Reading

1. The Column-gap column-rule of CSS3 Multi-columns
2. Number and column widths of CSS3 multi-columns
3. Cross column of CSS3 Multi-columns
4. Multiple Columns Layout (magazine-alike) with CSS3
5. An Introduction to the CSS3 multiple Column Layout Module
6. CSS multi-column Layout Module
7. CSS3 multi-column Layout
8. Multiple Columns

--Desert

Flexbox

The new Flexbox layout pattern is used to redefine how the layout in the CSS is laid out. Unfortunately, there have been too many changes in the specification recently, resulting in different browsers implementing it. But I still want to share some examples to let you know about the changes that are about to happen. These examples are currently available only in the Chrome browser that supports Flexbox, the latest standard .

There are too many outdated flexbox related resources on the Internet. If you want to have a deeper understanding of Flexbox from here , learn to identify whether the Flexbox resource is up to date. I have sorted out a detailed article on the latest standards .

You can do more with flexbox; Here are just a few examples of what you should know about concepts:

. container {   display:-webkit-flex;   Display:flex; } nav {   width:200px}. flex-column {   -webkit-flex:1;           Flex:1; }	 

View Online

Using the Flexbox layout

. container {   display:-webkit-flex;   Display:flex; }. initial {   -webkit-flex:initial;           flex:initial;   width:200px;   min-width:100px; } none {   -webkit-flex:none;           Flex:none;   width:200px; }. flex1 {   -webkit-flex:1;           Flex:1; }. flex2 {   -webkit-flex:2;           Flex:2; }	 

View Online

Using the center layout of Flexbox

. vertical-container {   display:-webkit-flex;   Display:flex;   height:300px; }. vertically-centered {   Margin:auto}	 

View Online

Extended Reading

1. Flexbox
2. A complete guide to Flexbox
3. Deep understanding of the Flexbox telescopic box model
4. Flexible box ("Flexbox") layout in IE10
5. "Old" Flexbox and "new" Flexbox
6. Using Flexbox: New and old syntax mix to achieve best browser compatibility
7. Cross-browser Flexbox
8. See what happens next: CSS3 flexible Boxes
9. The future--flexbox of responsive design
10. Use CSS3 flexbox layout
11. flexbox--Quick Layout Artifact
12. The inside of Flexbox animation
13. CSS3 Achieve Horizontal Vertical Center

--Desert

CSS Framework

CSS framework is extensive and profound, in order to let us better implement CSS layout, some CSS framework came into being, the following for you to provide some CSS framework for reference. Finally personal advice, do not always send hope in these CSS framework, only you know how to understand CSS is kingly.

Extended Reading

1. Framework
2. 8 Practical Responsive Design frameworks
3. 16 Excellent responsive CSS Frames
4. Tianya HTML & CSS Foundation framework
5. 30+ CSS Grid System

--Desert

End If you have any feedback on this tutorial, please contact me on Twitter !

Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!

About LL

Guangdong University in Reading college students, love the front end of the web, the front-end technology has a strong interest, here hope to have the opportunity to share and exchange with you, so as to better improve themselves. Please pay attention to me: Sina Weibo

If you want to reprint, please indicate the source:

Original English:http://learnlayout.com/