10 most useful css codes for novices in DIV CSS [Transfer]_html/css_WEB-ITnose
WBOY
Release: 2016-06-24 12:28:57
Original
1323 people have browsed it
Based on my personal experience, I have summarized some commonly used CSS tips, hoping it will be helpful to novice friends:
1.float:left Function: Make multiple divs parallel and side by side Usage:
2.clear:both Function: When multiple divs are arranged parallel to each other, you have to add an empty space The div is described with clear:both. Because if no restrictions are imposed, IE will display normally, but Firefox will have typographical errors. Usage:
3.margin:0 auto Function: If you You want the page to be centered and the width not equal to the screen width. In this way, margin:0 auto will show its huge value Usage:
4.margin: 0px Function: Have you added a form to the page and then you can’t adjust its layout no matter how you adjust it. It will always give you a line break or expand the outer container. Just use margin:0px Usage:
5.margin:-x px Function: If you want to place an img and a span text content side by side, you will find that the high and low will always be inconsistent. In this way, margin can be used to define the outer margin. This value can be negative Usage: (Indicates that the image moves up 2px) 6.padding:x px Function: How to allow a certain distance between the content and the container? This is the role of padding. The reason why I mention it here is to pay attention to its usage Usage:
Here is data!
(What is the display height of this div? 30px) 7.line-height:x px Function: Many times a piece of text is too close and looks annoying. Then widen the line spacing, and use line-height to define its line height Usage:
Here is data!
8.a Function: Define link attributes. Many times newbies tend to ask: Why do I define css properties but they are not displayed correctly? Then you are likely to mess up the order of a. The correct order should be lvha Usage: a:link{ font-size:12px;font-family:宋体;font-weight:bolder ;color:red;text-decoration:none; } a:visited{ font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration :none; } a:hover{ font-size:12px;font-family:宋体;font-weight:bolder;color:orange;text-decoration:underline; } a:actived{ font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none; } 9:border:0px Function: If you add a link to an img, an annoying border will appear. At this time, define it as 0 to remove it. Usage: 10:display:none Function: Sometimes you may need to hide objects, and display is most appropriate at this time. Especially useful in the edit mode of many online editors Usage:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn