Original text: https://blog.csdn.net/qq_35440678/article/details/53073194
Backstage staff just started writing front-end pages, and the most troublesome thing is page layout:
- I want to center an element, but I can't find a good method on the Internet for a long time?- Add a float: left, why is the whole page messed up?
- How to make this element wrap, and how to make that element not wrap?
- How to arrange these divs horizontally without wrapping?
- Seeing someone else's code fills the screen with divs, dazzled?
- I have read the book and followed the online tutorials. Why can't I write it when I really want to start writing? There are so many tags and so many CSS styles, which one should I use?
- …
I myself have been going around for a long time, and I have watched many video tutorials and classic books, such as "HTML5 Authoritative Guide", "CSS Authoritative Guide", "Javascript Advanced Program Guide", "Sharp jQuery". When I read a book, I can understand it, but when I actually start to write a simple page, I feel that the whole person is blinded, and I don't know where to start. If you think about it carefully, in addition to the lack of practice, but more importantly, there is a big essential difference between front-end and back-end development. My personal summary mainly includes:
- The background is a single language, and the entry and mastery points are relatively simple. For example, if you learn one of php, C/C++, java, and python, you only need to buy an introductory tutorial and write it according to the examples inside. Threads are executed sequentially, and the execution process is relatively clear. The front-end requires HMTL, CSS, and JS to be implemented together, so the knowledge learned is relatively scattered, and it will be messy if you have not experienced practice;
- Front-end knowledge basically relies on practice and experience, which is exactly what the classic books lack. The books are all about basic concepts, the use of every label and every style, and the actual page needs to be combined in many ways;
- Front-end knowledge is too flexible and changeable, and the framework changes once a year or even a few months.
In short, it is difficult to write front-end development in the background, and the thinking mode is very different. Although most people think that writing the background is the real peak of technology, the daily contact is with servers, databases, high concurrency, mass, TCP, and hackers. But it was made alive by the front-end labels and styles.
In view of the painful experience of learning front-end, I wrote this blog, hoping to give some practical advice to those who want to write front-end or turn to front-end.
Well, without further ado, let's get to the point.
I hope this article can achieve one purpose: after reading it, you can basically realize the custom layout, master some basic layout skills, and be able to make the page layout you want.
First, understand a few concepts related to layout:
- Sort out inline and block-level elements
- Understand the box model. width, height, margin, padding, bodder
- position property positioning
- float property
- display property
In-line element, 块级 element
I believe that everyone has been exposed to these two concepts, so let me ask a question, why do we need to understand these two concepts, it is simple and clear to know which tags are inline elements and which tags are block-level elements, which have a direct impact on the layout. The main differences are:
Inline elements are only inline elements, and block-level elements are not wrapped.
Block-level elements are one element that fills one line. If two block-level elements are written together (such as two divs), they are displayed in two lines by default, unless float or display is set (will be displayed later). mentioned), and block-level elements can also set margins (box model properties).
Inline element setting width is invalid, height is invalid (line-height can be set), margin is invalid up and down, and padding is invalid up and down.
Therefore, an obvious way to judge whether a position uses inline elements or block-level elements is whether it needs to wrap or whether it needs to set the length, width and top and bottom borders/spacing. First select the inline element. For example, if there is a text in a line that needs to be changed in color/bold, then the inline element span can be used directly.
See which are inline elements and which are block-level elements
box model
The box model, I believe everyone has heard bad, the core is that margin, padding plus width, height affect the size of a block-level element.
See information
position property
| value | describe |
|---|---|
| absolute | Generates absolutely positioned elements, positioned relative to the first parent element other than static positioning. The position of the element is specified by the "left", "top", "right" and "bottom" properties. |
| fixed | Generates absolutely positioned elements, positioned relative to the browser window. The position of the element is specified by the "left", "top", "right" and "bottom" properties. |
| relative | Generates a relatively positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position. |
| static | Defaults. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations). |
| inherit | Specifies that the value of the position attribute should be inherited from the parent element. |
display property
The display property specifies the type of box the element should generate. w3c definition
After reading the above knowledge, it is estimated that I am still confused. It does not matter. The following is a combination of practice:
Easy layout first: use absolute positioning for child elements
The parent element sets position: relative
to the child element: position:absolute, "left", "top", "right" and "bottom"
can position the child element to any position.
Easy layout No. 2: conversion of inline elements and block-level elements
Inline elements -> block-level elements: display:block, block elements are exclusive to the entire line, you can set the width and height
of block-level elements -> inline elements: display:inline-block, and typesetting can be placed on the same line.
With this conversion there is no float:left unmanageable layout.
Easy layout third: width and height from inside to outside
The size of the box model is set from the innermost element upwards, and the width and height of the innermost element are set first, as well as margin and padding. In that way, the outer div will be automatically stretched, and there is no need to display the declaration.
A few practical tips
Horizontal/vertical centering of single line text
Horizontal centering can be set: text-align: center, vertical centering has a trick for a single line to set the line height equal to the overall height: line-height: 40px;
When to use float:left layout
http://en.learnlayout.com/float.html
float can be used to wrap text around images
https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-layout. html
Make good use of ul/li
For the use of ul/li for obvious list items, instead of laying out divs, use ul/li to contain divs
html/css/js writing is smooth
Obviously, the html page layout is written first, the page is disassembled and written out of the html structure, and then rendered using css.