Home > Article > Web Front-end > CSS sprites and units_html/css_WEB-ITnose
(1). About css sprite technology
For example:
Improvement:
Summary:
You can’t stick to a certain tip (I want the minimum number of requests) and destroy the overall balance.
(2). Absolute units and relative units
Input, textarea, select control elements themselves have text sizes, and will not directly inherit from parents such as body by default Label. Therefore, we need to reset, otherwise the 16-pixel text will scare the user.
In the beginning, influenced by some big websites, it was set up like this:
input, textarea, select { font-size: 12px; }
I took a look , Eye Weibo still looks like this (//zxx: Countless facts have shown that if you want to give a counterexample, Eye Weibo can find the right one):
However, this setting is very bad. Why, just look at the fate of the crab in the "Story of the Crab and the Octopus" above! If you are inflexible and unable to adapt automatically, you will only become a trapped beast and be slaughtered by others.
The good practice is this:
input, textarea, select { font-size: 100%; }
This is 100% best practice, needless to say, nothing to do with any bullshit experience Little relationship. Why is it set like this? You'll know after you use it.
By the way, I thought of something else. I saw that many people would have code similar to the following when writing two-layer label buttons:
.redbtn { height: 24px; ... }.redbtn .btn { height: 24px; ... }
If you feel insecure if you don’t write a height, you might as well write it like this:
.redbtn { height: 24px; ... }.redbtn .btn { height: 100%; ... }
Actually, having a height is redundant. , this is enough:
.redbtn { ... }.redbtn .btn { height: 24px; ... }
Remember, if the inner and outer labels have the same height, do not have the same fixed value appear at the same time.