CSS entry series: Part 2 attributes (III)

-- From "getting started with CSS (version 3rd)" by LAN Pouncey and Richard York

Box Model: controls the outer margin, border, inner margin, width and height]

· Margin

Attribute	Value
Margin	[<Length> | <percentage> | auto}
Margin-top Margin-Right Margin-bottom Margin-left	<Length> | <percentage> | auto

// Margin has three values following the sequence conventions of top, left, right, and bottom; margin has two values following the order conventions of top, bottom, and left; margin has one value and four sides at the same time.

· Border-width controls the Border width of the box.

Attribute	Value
Border-top-Width Border-right-Width Border-bottom-Width Border-left-Width	<Border-width> Initial Value: Medium
Border-Width	<Border-width> {1, 4} Initial Value: Medium
<Border-width> values include: thin | medium | thick | <length>

// Percentage value is not allowed.

· Border-style specifies the border Style

Attribute	Value
Border-style Values: None | hidden | dotted | dashed | Solid | double | groove | ridge | inset | outset	<Border-style> {1, 4} Initial Value: None
Border-top-style Border-right-style Border-bottom-style Border-left-style	<Border-style> Initial Value: None

// The abbreviation follows the upper-right lower-left order.

· Border shorthand attributes

Attribute	Value
Border-top Border-Right Border-bottom Border-left	<Border-width >||< border-style >||< color>
Border	<Border-width >||< border-style >||< color>

· Padding is the area between the content and the border.

Attribute	Value
Padding	[<Length >|< percentage>] {1, 4}
Padding-top Padding-Right Padding-bottom Padding-left	<Length> | <percentage>

· Overflow Overflow

Attribute	Value
Overflow	Visible | hidden | scroll | auto Initial Value: visible
Overflow-x	Visible | hidden | scroll | auto Initial Value: visible
Overflow-y	Visible | hidden | scroll | auto Initial Value: visible

// The Difference Between Auto and scroll is that even if the content is smaller than the specified width or height, scroll always displays the scroll bar, while auto only displays the scroll bar when necessary.

[Floating and vertical alignment] · float floating Elements

Attribute	Value
Float	Left | right | none

// The margin of the floating element is not folded. Only the content of the element after the floating element is affected. The floating element is treated as a block-level element.

// The following code uses a floating navigation list. H1 {float: Left; margin-top: 0 ;}. navigation {float: Right; margin: 0; List-style: none ;}. navigation Li {display: block; margin-left: 0.5em; padding: 0.5em; Border: 1px solid # CCC; color: #233; text-Decoration: none ;}... 
· Clear cancels floating content

 

 
  
 
   
 
    
Attribute
 
    
Value
 
   
 
   
 
    
Clear
 
    
None | left | right | both
Initial Value: None
 
   
 
  

 
// Use the float element to edit the paragraph text. The text in the paragraph starts from the gap between floating elements, rather than the text we want to follow the title. In this case, clear is used to cancel the floating effect on the text behind the title, as shown below.

.intro{Clear:both;}


 

 
  
 
   
 
    
Write CSS for Internet Explorer
CSS cannot be implemented due to bugs in earlier browsers. Here we will introduce two technologies: Conditional comments and hack.
Condition comment
<! -- [If lte ie 6]>
<! [Endif] -->
// If the version is earlier than or equal to IE6... This means that if the browser that runs this code is Internet Explorer and its version is 6 or lower, the content in the comment block will be output rather than treated as a normal comment.
Hack
Hack is a tip that can be used to take advantage of bugs in the CSS analyzer. Two types of hack are introduced.
The first type is the underline hack, which allows you to write CSS for IE6 only. The syntax is as follows:
P {
_ Height: 1px;
}
As you can see, the general height attribute is preceded by an underscore. Because this is not a valid CSS attribute, most browsers will ignore it, but IE6 is different, it only ignores the underline.
The second is the asterisk hack. It works in the same way as the underline hack, but uses IE6 and IE7. The syntax is as follows:
P {
* Width: 100px;
}
The principle is the same as the underline hack, which is ignored by most browsers, while IE6 and IE7 only ignore asterisks.
P {
Width: 100px;
_ Width: 97px;
}
This rule applies the width of PX to paragraphs in all browsers, but IE6 is 97px. Order is very important, because both attribute declarations can be applied to IE6, and underlined attributes must be placed at the end of the application.
The hack should be used less, and excessive use of the hack will make CSS difficult to read and maintain. If you want to write a large number of CSS codes for a specific version, we recommend that you use conditional annotations to include a different style sheet.
 
   
 
  

 
· Vertical-align vertical Align content
The vertical-align attribute is mainly used in two cases: 1. Vertically align the text that appears in a paragraph row, such as creating superscripts and subscripts; 2. Align the content in a table cell.

 

 
  
 
   
 
    
Attribute
 
    
Value
 
   
 
   
 
    
Vertical-align
 
    
Baseline | sub | super | top | text-top | Middle | bottom | text-bottom | <percentage> | <length>
Initial Value: Baseline
 
   
 
  

 
// Vertical-align applies to inline elements, such as  and <span>.
// When this attribute is applied to table cells, only the baseline, top, middle, and bottom keywords can be used, and the vertical-align attribute is used to align the content of the entire form.

The main differences between top and text-top:Top will cause the top of the text to align with the top of the row containing the inline box, which is determined by line-height, while text-top is aligned with the highest character in the font.

// Create the superscript and subscript text :...... <Style type = "text/CSS"> H1 span {font-size: 0.5em ;}. superscript {vertical-align: Super ;}. subscript {vertical-align: Sub ;}</style> ...... <H1> <SPAN class = "superscript"> tasty </span> recipes for <SPAN class = "subscript"> tasty </span> cheese 

: