Simply, bb way to simplify it. Yes, brother.
For front-end development is, css is essential basic skills. You might say css Well, on the way, the first time with this, in the case. For I know exactly what you're talking about, so you can think css is very simple, because we are not deeply involved.
Let's look at a very simple code (really very simple):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } body, html { height: 100%; width: 100%; } .btn { display: inline-block; margin: 100px; padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; } </style> </head> <body> <div class="btn"> ydb！ </div> </body> </html>
Here we simply write a simple button style, running in the browser's kinda nice.
But, but ask any questions you feel there is no (do not pull layout issue with me).
Yes is the problem, not us was wrong, but there is a problem of maintenance.
1. We use too much absolute value (you can easily control the absolute value, but it can also allow you to easily modify a lot of code to achieve a new style)
2. Some times the value of interdependence, we should take their relationships expressed in code (code after reducing the amount of maintenance, such as where the line-height)
Let's take a look at the second question, we have, for example, the font size and line height are a certain percentage of the line height is 1.5 times the font size, do not believe your own to count. So we now modify it:
After the modification like this, just change the font size, line height, it will maintain this relationship between them.
We look at the first issue, we use too many absolute prerequisite for the emergence of this problem is to assume that behind us we will modify the style of the button.
Using too many absolute time, once we modify the button style, it will modify a lot of code, is there any way to modify the code as long as we can make very little style button to get a unified style changes.
Here, when we do the mobile side, I have never used such a thing, to do the adaptation. It is the rem, rem as to what, I think this need not explain it. Yes, you are not mistaken, our protagonist is following em (actually rem can also see their own). em what I have Needless to say it. Think about where we put before them the absolute value of the button style to use, instead of using em (of course, may not be completely replaced, look at the actual situation), then we simply change the font size of the parent element, not be able to achieve unity of styles change a thing. Well, we modify the code as follows:
html { height: 100%; width: 100%; font-size: 18px; } .btn { display: inline-block; margin: 100px; padding: 0.3em 0.89em; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 0.22em; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 1.11em; line-height: 1.5; }
Now we modification, of course, you will find that with effect style we presented originally defined, a little different. Yes, I admit it, I see color spur of the moment, without taking into account the time value in terms of convenience, leading some are infinite decimals, but not big problems, mainly to see the use em if you wish which you could have as a standard style now beginning.
Now let's look at the results:
Well, now we modify the parent element font size 40px, then look at the results:
Zeyang, the overall style is not changed, and we spent the least amount of code, to achieve the change.
Of course, there will be someone to sneer at you this very peculiar needs of ah. It is strange, but I am not to Tucao this demand, but to illustrate a point, css is also a major problem, so that DRY as possible, so that your future maintenance is very good. When you finish css, you can see if it is good maintenance? The relationship between them is how they look like?
To, build on the progress, let's expand. We based this style were written in a red button and a green button, we all know that this way is the easiest to write:
But the results?
We know the 
problem of the red part. Set css background, the background picture is always at the top of the background color, so you always see a linear gradient generated background image, so we need to change.
amend as below:
Look at the results:
Other issues are not right, but our first button how become like this (no explanation, resolve itself ha ha ha).
In fact, you will find us in the style of the original definition of the button, the main color is # 58a, the buttons glossy and dark surfaces (ie, shaded setting), is written, so that the other buttons on the back of expansion only need to modify the above line to introduce other main colors corresponding to the light and dark versions.
Now we make a change, we change the background of the body element is black, to see what works:
There is no shaded found very strange? Yes, even the font shadow very strange. Please carefully compare the style on a white background. Not like this, we make the UI should in any case have the overall performance. In fact, I know you do not find, because our cause is a border color, shadow box color, text shadow color is only used fixed values, this can not do this for a reason. We found that three of them are dimmed, so you can consider instead of black. There we want to achieve a unified display (that is, whatever the circumstances colors), transparency should be used in different contexts.
amend as below:
Look at the results
One thing I want to explain that I was easy to chart, with a black background, leading to the first figure is not obvious (in fact, the case of a black background as a little, little), in fact, replaced by other background colors better.
, We understand a little more:
A closer look at the border of the two buttons, is not a relationship with the main colors, like what color is the main color, border color is what color (can only say that close to it), because we have to set the transparency of the border .
But ah, the feeling of transparency, but also to set the border here, why go to such background border went below, and then the transparent display integrated border out of color? Congratulations reason is that like you said.
We turn now to a little exaggeration:
See no (do not forget the invasion of background, can be a background color, background image may be, here is the background of the icon, the gradient is a way to show the background image) is the same with us think is the background invasion.
So we can reach the main colors change, along with changes in the border.
That's fine, we need like this, at least here like this. But sometimes we do not want this child, I frame can not be invaded, it is necessary original flavor.
Of course, can be solved, we can adjust the default behavior of the above-mentioned background-clip property, which is the border-box (that is, the invasion will), we just set padding-box, this way the browser will use the padding to cut off the outer edge of the background (that is, not invade).
Look at the code:
Look at the results:
This time is the original flavor of the border. very beautiful.