An introductory tutorial for learning CSS layout

高洛峰

Release： 2017-03-17 09:33:37

Original

1394 people have browsed it

Overview

After the rise of the Web, the introduction and learning materials about CSS have become overwhelming.
This article does not involve specific CSS syntax, but hopes that from the perspective of beginners, people who have no or little contact with CSS can quickly understand what CSS is and how to use it.

What is CSS

When you understand a concept, the first thing you see is its name, and what is often ignored is also its name.
CSS (cascading style sheets), can be translated into Chinese cascading style sheets. It can be seen from the name:

Cascading: indicates that styles can be stacked, so there will be priority
Style sheet: indicates that CSS is a description style , and it is just a table, not a programming language. Therefore, as the application of CSS becomes more and more, languages such as Sass and Less that extend CSS syntax will come out

CSS Function

The function of CSS is style. In fact, the Web can be created using only HTML. However, as the performance of machines and browsers improves, people have higher and higher requirements for the beauty and ease of use of web pages. CSS The importance has gradually become apparent.
CSS I think has two main functions:

It can uniformly manage the styles of the Web and facilitate modification, similar to the variables or Configuration file
Separates web page content and style, making it possible to flexibly present content

Note that HTML is the actual content of the web page, CSS It just controls how HTML elements are displayed, whether to display them or not.

CSS for Layout

CSS is used the most in layout. It is because of CSS that there is the so-called p+css layout method. In the past, HTML was used All are table layouts.

To have a preliminary understanding of the layout of p+css, I think it is enough to understand 3 points, box model, positioning and floating.

Box model

Each p is a box for css. Each box is composed of 4 parts from the inside to the outside. Content padding border margin
p The length and frame are composed of the sum of the lengths and the sum of the widths of these 4 parts
Example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>CSS Sample</title>
    <link href="index.css" rel="stylesheet"/>
  </head>
  <body>
    <p>Content</p>
  </body>
</html>
body {
  background-color: #FAEBD7;
}
p {
  width: 100px;
  height: 100px;
  padding: 30px;
  border: 10px solid blue;
  margin: 10px;
  background-color: red;
  text-align: center;
}

Copy after login

The example is very simple, but you can see:

From outside to inside, they are margin, border, padding, content
p's width and height are just the size of the content

Positioning

After understanding the box model, positioning is also very simple. In fact, it is to move each The box is positioned on the page.
Positioning is divided into absolute positioning and relative positioning.

Absolute positioning

It is the absolute position on the browser. The distance relative to the upper left corner of the browser is set through the top and left attributes.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<p id="p1">Content1</p>
<p id="p2">Content2</p>
</body>
</html>
body {
  background-color: #FAEBD7;
}
p {
  width: 100px;
  height: 100px;
  padding: 30px;
  border: 10px solid blue;
  margin: 10px;
  background-color: red;
  text-align: center;
  position: absolute;
}
#p1 {
  top: 100px;
  left: 100px;
}
#p2 {
  top: 200px;
  left: 200px;
}

Copy after login

Absolute positioning is clear but inflexible , unless the screen size can be fixed, multiple sets of css are required. Poor settings can cause elements to overlap.
A very key setting in absolute positioning is position: absolute

Relative positioning

In relative positioning, the top and left of each p are no longer relative to the upper left corner of the browser. . But the upper left corner relative to the remaining position.
Same as the above example, replace position: absolute with position: relative and you will find that the two p's no longer overlap.

Floating

p is inline by default, that is, each p occupies one line.
When laying out, if you want multiple p's to be arranged in one row, you will use floating (or use the previous table method)
After setting the p floating attribute, you can use p to lay out various structures.

The following takes a common management system as an example to make a simple p+css layout

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>CSS Sample</title>
    <link href="index.css" rel="stylesheet"/>
  </head>
  <body>
      <p id="head">head</p>
      <p id="middle">
        <p id="nav">nav</p>
        <p id="content">content</p>
      </p>
      <p id="foot">foot</p>
  </body>
</html>
body {
  background-color: #FAEBD7;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
p {
  border: 1px solid black;
  text-align: center;
}
#head {
  height: 50px;
  width: 100%;
}
#middle {
  width: 100%;
  top: 50px;
  bottom: 100px;
  left: 0px;
  position: absolute;
}
#nav {
  float: left;
  width: 200px;
  height: 100%;
}
#content {
  height: 100%;
  overflow: hidden;
}
#foot {
  height: 100px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  position: absolute;
}

Copy after login

In the above example, the head and foot heights are fixed, and the nav width is fixed. Others are adaptive and the effect can be seen by adjusting the size of the browser window.

Summary

CSS layout is very simple. If there are other interactive actions, they can be achieved through js (such as linkage between navigation and content).
Nowadays, almost no one uses the table layout method, because the table is only a way to display data, and the row and cell methods are not suitable for componentization.

The above is the detailed content of An introductory tutorial for learning CSS layout. For more information, please follow other related articles on the PHP Chinese website!