If you want to practice JavaScript, you must first learn CSS – a casual discussion on the road to front-end practice

Personal css history:

Let me talk about the history of my CSS learning. In 12 years, my teacher taught me the fixed layout of div+float one-on-one. All elements were made of float. I made all the front-end pages of the student union website because I had been learning PS for a while. Many, I also made the UI myself, and it was very ugly. The teacher said that it was very good to make it like this for the first time. At that time, the teacher thought that I had the talent to do front-end, and that’s when I started to get in touch with front-end. For my graduation project, I built a full-stack web by myself. After completing the entire graduation project, I decided to do the front-end because I felt I liked it more. When I started working in 2014, I didn’t know how to use Less at that time. I just wrote CSS directly. At that time, I mainly wrote PC pages with fixed layouts. At the end of 2014, I was tossing around in the project and used JQmobile. It was super difficult to use. When I was working on a mobile project in 2015, I researched several CSS libraries, learned bootstrap and part of its source code, and also used webfont. The use of fluid layout improved a lot this time. Later I learned rem and used it in the project. At this point, my CSS has reached a period of slow growth, or I have not deliberately learned CSS.

Dry information

Let’s talk about some details and technical points that I usually pay more attention to, and some knowledge points that you may not be very familiar with.

​

1.boxsizing: borderbox

Boxsizing mainly has two values: contentbox and borderbox. Let’s take a look at the official explanation first:

​

In layman’s terms, by default, padding and border will occupy additional space. If the element width is 10px, if a 1px border is set, the actual width will be 12px, and the same is true for padding. This will cause the width and height of the layout to be difficult to control, and calculations will be particularly troublesome. So we will use borderbox for global elements. As long as the width and height are set, no matter how the border and padding change, the width and height of the element will not change, which facilitates layout and calculation.

​

2. Fixed on the left and adaptive on the right

When laying out, such as some list pages, there is often a fixed-size thumbnail on the left, and the title is displayed on the remaining part on the right, as shown in the figure

Then let’s call it a fixed-left-right adaptive layout. My method is to use paddingleft to leave the position of the image on the left for a 100% wide div. The content part of the div element is the title, and the image is absolutely positioned in the paddingleft area. This is achieved. Left fixed and right adaptive, (provided that boxsizing must be borderbox, otherwise padding plus 100% width will exceed the screen width), the approximate code is as follows:

&n��Some of the styles and ideas designed may not be realized, or the implementation cost is too high. We have to convince them why this place cannot be realized, because they don’t understand, so they are afraid that you will fool them (in fact, sometimes some people fool them ), so if you want to convince others, you must clarify the problem yourself, clarify the knowledge points, and explain clearly to the designer the reasons why it cannot be implemented, and it must be well-founded. At the same time, it is best to find relevant blogs or official explanations online to support it. . There are many contradictions and problems because we neglect communication, or we are lazy. In fact, when we can explain the knowledge points clearly to laymen, it also shows that we have a thorough understanding, and it also improves our abilities. The manuscripts designed by designers must try their best to achieve their effects, and they must also consider scalability and achievability. Attitude is very important. Don’t make people feel that you are perfunctory. What is perfunctory? Say something and don’t do it without explaining it clearly. Be perfunctory, otherwise you will only have yourself to blame if you get in trouble. The technical points must be clarified, otherwise others will not pay if the explanation is unclear. When you find problems with the design draft, patiently remind you of some of the inappropriate points, help others bear more responsibility, and the front-end and designers must get along well .

​

Let’s chat casually

Do not be compatible with lower versions of IE (I think compatibility with version 11 or above is sufficient), especially for startups. For startups, the price/performance ratio is extremely low. It is a problem for startups to survive without technology and accumulation. Compatibility with IE is even It is a waste of labor costs. For example, IE8 does not support rounded corners, so you have to use pictures instead.
There is no placeholder, so you have to use JS to simulate it. For individuals, the upgrading of technology is the general trend. We must look forward. There are many things for you to learn, so don’t waste your youth in this place.

When you have time, everyone should take a look at the bootstrap source code. Just look at some core parts, such as variables and other most commonly used parts. The source code is actually not difficult and you can get a lot of inspiration.