CSS Basic styles

Source: Internet
Author: User

Remove the small dot of ul List-style:none;
-------------------------------------------
Text centered: Text-align:center;
Text-align:left; No use, because the default is left
Text-align:right; Text Right
-----------------------------------------
In CSS, any text has a row height.
The height of the line-height:xxpx is usually equal to that of the parent box.
------------------------------------------
Clear all default------will generally be written.
*{
margin:0;
padding:0;

}
-------------------------------------------------
Box Centered margin:0 Auto
--------------------------------------------------
The first line empty two characters of the lattice, the unit is more strange, called Em,em is a width of Chinese characters.
1text-indent:2em;
Indent is the meaning of "indentation".
-----------------------------------------------------------
1.3 Font Property
With the Font property, you can set the font size, line height, font, and so on.
1font:14px/24px "Song Body";
Equivalent to three lines of statement:
1font-size:14px;
2line-height:24px;
3font-family: "Song Body";
------------------------------------------------------------
CSS3 Points of knowledge
How to set rounded corners for a rectangle
a{
border-radius:4px; The larger the value, the greater the rounded.
}
------------------------------
Outline-style:none; /* Outline */style for input
-----------------------------------------------------------------
text box
<input type= "text" value= "Default value"/>
Password box
<input type= "Password"/>
Radio
<input type= "Radio" name= "Xingbie"/> Male
-----------------------------------------------------
check box
<p>
Please choose your hobby:
<input type= "checkbox" Name= "Aihao"/> Sleep
<input type= "checkbox" Name= "Aihao"/> Eat
<input type= "checkbox" Name= "Aihao"/> Soccer
<input type= "checkbox" Name= "Aihao"/> Basketball
<input type= "checkbox" Name= "Aihao"/> Table tennis
</p>
check box, preferably with the same name (although he does not need mutual exclusion, but also to have the same name)
--------------------------------------------------------------------
drop-down list
Select is "choose", Option "options".
The Select label is the same as the UL, OL, DL, which are all group labels.
<select>
<option> Beijing </option>
<option> Hebei </option>
<option> Henan </option>
<option> Shandong </option>
<option> Shanxi </option>
<option> Hubei </option>
<option> Anhui </option>
</select>
-------------------------------------------------------------------
Line break
Page 99.9999% need to break the time, is because another paragraph, so use p, do not use <br/>
-----------------------------------------------------------------------------
Text level: P, span, a, B, I, u, em---inline elements
Container-level: Div, H-series, Li, DT, DD---block-level element p is a block-level element, exception.
----------------------------------------------------
The box model is composed of: width, height, padding padding, border border, margin margin.
Padding-left, Padding-top,
Padding-right, Padding-bottom.
--------------------------------------------------------------------------------------
Eliminate floating methods
1. If the son element is set to float, then set the height of the parent element. This will eliminate the float. However, the general
Do not, the Web page does not set the height.
2. Partition method
Like what
<div class= "Father" >
<div cvlass= "A" > I am a </div>
<div class= "B" > I am two </div>
</div>
The inside of the a.b are set to float. The parent element does not have a height set.
How to solve? Just add a new div between AB, and this div is set to remove the float.

Like what
<div class= "Father" >
<div class= "A" > I am a </div>
<div class= "Al" ></div>
<div class= "B" > I am two </div>
</div>

. al{
clear:both;//Eliminate all floats
}
--------------------------------------------------------------

The method of eliminating floating methods inside the wall

<div class= "a" >
<p></p>
<p></p>

<div class= "Al" ></div>//Interior wall method is to put AL in the Div.


</div>

This, like above, has no height on the parent element. P sets the float so that as the inside changes, the parent element is propped high.
-----------------------------------------------------------------------------------
Clear Floating method 4:overflow:hidden;
The son element is set to float, the parent element is set to width, and no height. This way, the parent element cannot be propped up by the quilt element. Then in the parent element settings
Overflow:hidden can be automatically propped up by floating sub-elements. This is the so-called folk prescription, indicating that white is the browser rendering mechanism brought.
--------------------------------------------------------------------------------------------

CSS Basic styles

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.