Home > Developer > Web Develop
Length in CSS ------- Day76, css ------- day76
Today I did not continue with yesterday's problem, because today I have no time, I have never felt busy, but fortunately, I was busy with confusion, and now I am busy with inspirational... I remember a saying that "those who want to understand can not do things, often do not want to understand", which impressed me for a long time, those days always remind me to cherish the present.
Let's talk about several css distances. There are roughly pX, em, pt, pc, in, mm, cm, exThere are eight types, the most common of which is px. I have also seen ex, mm, and cm. Of course, the last two will see more in the past.
In fact, we are the most familiar with px, and the most widely used on computers, because the display resolution is... px *.... px. If we know the resolution, is it more convenient and concise for the UI when the browser is the largest, so there should be such a reason.
Em is the unit of relative length, which is relative to the default font size of the system;
As for our most common mm and cm are our pure cm and mm, they are all absolute length units, so we can see it with "absolute.
I have seen few of the remaining four, but here I will record some of its problems:
Ex is also relative length, and its reference is not the default font size, but the height relative to the character "x;
In, pc, and pt are all absolute lengths, and their conversion relationships are:1in = 2.54 = 25.4 = 72pt = 6 pc;
Of course, the relative length also has a corresponding conversion relationship, that is: 16px = 1em = 100% = 12pt;
Note,PxDisadvantages: In ie6, font scaling cannot be implemented.
It's late. Go to bed...
If the html code is:
<Div class = "title"> I'm 123214, ah, by time, ah </div>
Css can be written as follows:
<Style>
. Title {
Width: 8em;
Overflow: hidden;
Text-overflow: ellipsis;
White-space: nowrap;
Word-break: keep-all;
}
</Style>
Tip: This text-overflow is only supported by IE 6.0 + and is invalid in ff/chrome.
Border-solid length in css
<Style>
A {text-decoration: none; color: # fff; font-size: 12px; border-right: 1px solid # ccc; padding: 0px 10px ;}
Ul li {float: left; list-style: none; background: #000; padding: 10px 0px ;}
</Style>
<Body>
<Div>
<Ul>
<Li> <a href = "#"> my shopping cart </a> </li>
<Li> <a href = "#" style = "border: none;"> my favorites </a> </li>
</Ul>
</Div>
</Body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
