Home > Web Front-end > HTML Tutorial > 10 most useful css codes for novices in DIV CSS [Transfer]_html/css_WEB-ITnose

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:

(New to database When adding content)

(Update database content)
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template