Home > Developer > Web Develop
pixel and relative length
In our previous notes, we talked about setting the size of the picture with the property width and height, whose cells are px (pixels).
Length unit summary, at present more commonly used to px (pixels), EM,% percent, you should pay attention to the fact that these three units are relative units.
1, Pixel
Why are pixels relative units? Because pixels refer to dots on the display (the CSS specification assumes "90 pixels = 1 inches"). The reality is that the browser uses the actual pixel value of the display, and most designers now tend to use pixels (px) as units.
2, EM
is the font-size value of the given font for this element, 1em = 14px If the element's font-size is 14px, and 1em = 18px If the font-size is 18px.
p { font-size:12px; Text-indent:2em;}The code above is the ability to indent the first line of a paragraph by 24px (that is, the distance of two font sizes).
3. Percentage
Set the line height (line spacing) to the font's 130% (* 1.3 = 15.6px).
p{ font-size:12px; line-height:130%}Features of PX:
1. IE cannot adjust the font size using PX as the unit;
2. Most of the foreign sites can be adjusted because they use EM or REM as font units;
3. Firefox can adjust PX and em,rem, but more than 96% of Chinese netizens use IE browser (or kernel).
Features of EM:
1. The value of EM is not fixed;
2. Em inherits the font size of the parent element.
Features of REM:
REM is a new relative unit of CSS3 (root em, root em), and this unit has aroused widespread concern. The difference between this unit and EM is that when you use REM to set the font size for an element, it is still relative size, but the opposite is the HTML root element.
Look at the code for HTML and CSS:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Linkrel= "stylesheet"type= "Text/css"href= "Index.css"> <title></title></Head><Body><H1>Pixels and relative lengths</H1><Div>Youth</Div><Div>Wealth</Div><Div>Love</Div></Body></HTML>
body { margin:0;} div { width:100px; height:100px; line-height:100px; Text-align:center; margin-left:20px; margin-bottom:20px; font-size:24px; Font-weight:bold; Background-color:lightgreen; Color:rgb (0, 0, 0);} div + div { background-color:lightpink; margin-left:70px;} Div + div + div { background-color:brown; Color: #FFFFFF; margin-left:120px;}More learning content, just in the code bud Net Http://www.mayacoder.com/lesson/index
Html&css Basic Learning notes 1.31-pixels and relative lengths
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
