Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "layout skills commonly used in CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Vertical alignment, using Transform of CSS3.

If you use CSS, you will be confused: how should I align the elements in the container vertically? Now, with CSS3's Transform, this puzzle can be solved elegantly:

.verticalcenter {position: relative; top: 50%;-webkit-transform: translateY (- 50%);-o-transform: translateY (- 50%); transform: translateY (- 50%);}

Using this technique, everything from single-line text to paragraphs to box is vertically aligned. At present, browsers need to pay attention to the support of Transform. Chrome 4, Opera 10, Safari 3, Firefox 3 and and Internet Explorer 9 all support this attribute.

2. Stretch an element to the height of the window in a specific scene.

You may want to extend an element to the height of the window, and the adjustment of the basic elements can only resize the container, so to extend an element to the height of the window, we need to extend the top-level elements: html and body:html

Body {height: 100%;}

Then apply 100% to the height of any element

Div {height: 100%;}

3. Use different styles based on the file format.

To make it easier to know the goal of a link, sometimes you want some links to look different from others. The following snippet adds an icon in front of the text link to use different icons or pictures for different resources:

A [padding-right ^ = "http://"]{ padding-right: 20px; background: url (external.gif) no-repeat center right;} / * emails * / a [padding-right: 20px; background: url (email.png) no-repeat center right;} / * pdfs * / a [href$=" .pdf "] {padding-right: 20px; background: url (pdf.png) no-repeat center right } this is the end of the content of "layout skills commonly used in CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.