1: Possible CSS-dispaly values:
Value |
Description |
None |
This element is not displayed. |
Block |
This element is displayed as a block-level element with a line break before and after it. |
Inline |
Default value. This element is displayed as an inline element, and there is no line break before and after the element. |
Inline-block |
The block element in the row. (Newly added value of css2.1) |
List-item |
This element is displayed as a list. |
Run-in |
This element is displayed as a block-level element or Inline element based on the context. |
Compact |
Compact is a value in CSS, but it has been deleted from css2.1 due to lack of extensive support. |
Marker |
CSS has a value of marker, but it has been deleted from css2.1 due to lack of extensive support. |
Table |
This element is displayed as a block-Level Table (similar to <Table>), with a line break before and after the table. |
Inline-table |
This element is displayed as an inline table (similar to <Table>) without line breaks before and after the table. |
Table-row-group |
This element is displayed as a group of one or more rows (similar to <tbody> ). |
Table-header-group |
This element is displayed as a group of one or more rows (similar to <thead> ). |
Table-footer-group |
This element is displayed as a group of one or more rows (similar to <tfoot> ). |
Table-row |
This element is displayed as a table row (similar to <tr> ). |
Table-column-group |
This element is displayed as a group of one or more columns (similar to <colgroup> ). |
Table-Column |
This element is displayed as a cell column (similar to <Col>) |
Table-Cell |
This element is displayed as a table cell (similar to <TD> and <TH>) |
Table-Caption |
This element is displayed as a table title (similar to <caption>) |
Inherit |
Specifies that the value of the display attribute should be inherited from the parent element. |
The difference between display: none and visible: false: Setting visible: false is not included in the DOM structure of the client.
- The border-collapse attribute sets whether the border of the table is merged into a single border or is displayed separately as in standard HTML. The default value is as follows:
Border-collapse: Separate; |
Border-collapse:Collapse |
|
|
2. About text align: justify;
Text-justify Version: ie5 + private property inheritance: No Syntax:
Text-justify:
Auto |
Distribute |
Distribute-all-Lines |
Distribute-center-last |
Inter-cluster |
Inter-ideograph |
Inter-word |
Kashida |
Newspaper Valid value:
Auto |
: |
Default Value. Allow the browser agent to determine the two-end alignment rules used |
Distribute |
: |
Processing space is very similarNewspaperFor East Asian documents. Especially Thai |
Distribute-all-Lines |
: |
The two ends are in lineDistributeThe same does not contain the last line of the two aligned paragraphs. Applies to ideographic documents |
Distribute-center-last |
: |
Not Implemented |
Inter-cluster |
: |
Adjust the line of text with no space between words. This adjustment is used to optimize the Asian language documentation. |
Inter-ideograph |
: |
Provides full two-end alignment for ideographic text. He adds or removes spaces between ideographic words and words. |
Inter-word |
: |
Align text by adding spaces between words. This behavior is the fastest way to align all text rows. The alignment at both ends of the paragraph is invalid for the last line of the paragraph. |
Kashida |
: |
Adjust the text by extending the characters of the selected vertex. This adjustment mode is especially provided for the Arabic scripting language. Ie5.5 + is required |
Newspaper |
: |
Align text by adding or removing spaces between words or letters. Is the most precise format used for alignment at both ends of the Latin alphabet |
Note: You can set or retrieve the alignment of the text in an object.
Because this attribute affects the text layout, the text-align attribute must be set
Justify .
This attribute only applies to block objects.
This property
Currentstyle The object is read-only. Other objects can be read and written.
Corresponding script features:
Textjustify . 3:
Set all background attributes in a declaration.
You can set the following attributes in sequence:
- Background-color:
Color_name |
Specifies the background color (such as red) of the color name ). |
Hex_number |
Specifies the background color of the hexadecimal value (for example, # ff0000 ). |
Rgb_number |
The specified color value is RGB.CodeBackground color (such as RGB (, 0 )). |
Transparent |
Default value. The background color is transparent. |
-
- Background-Image
-
- Background-repeat:
Repeat |
Default value. The background image will be repeated in the vertical and horizontal directions. |
Repeat-x |
The background image will be repeated in the horizontal direction. |
Repeat-y |
The background image will be repeated in the vertical direction. |
No-repeat |
The background image is displayed only once. |
- Background-attachment (specifies whether the background image is fixed or scrolled along with the rest of the page, with two values: Scroll and fixed ):
Scroll |
Default value. The background image will move along with the rest of the page. |
Fixed |
When the rest of the page is rolled, the background image is not moved. |
-
- Background-Position
Commonly used is to implement the list-type style in the label inside li without list-tyle: # HR2 ul Li {
Color: #777575; padding-left: 10px; Background: transparent URL (/eq_art2/eq_images/listtypeimage.jpg) No-repeat fixed left ;}
4: IE6 is not transparent. This is an old problem: first, let's look at a script,
Function chekc (){
VaR arversion = navigator. appversion. Split ("MSIE ")
VaR version = parsefloat (arversion [1])
If (version> = 5.5) & (document. Body. filters )){
For (var j = 0; j <document. Images. length; j ++ ){
VaR IMG = Document. Images [J]
VaR imgname = IMG. SRC. touppercase ()
If (imgname. substring (imgname. Length-3, imgname. Length) = "PNG "){
VaR imgid = (IMG. ID )? "Id = '" + IMG. ID + "'":""
VaR imgclass = (IMG. classname )? "Class = '" + IMG. classname + "'":""
VaR imgtitle = (IMG. Title )? "Title = '" + IMG. Title + "'": "Title = '" + IMG. Alt + "'"
VaR imgstyle = "display: inline-block;" + img.style.css text
If (IMG. align = "Left") imgstyle = "float: Left;" + imgstyle
If (IMG. align = "right") imgstyle = "float: right;" + imgstyle
If (IMG. parentelement. href) imgstyle = "cursor: hand;" + imgstyle
VaR strnewhtml = "<span" + imgid + imgclass + imgtitle
+ "Style = \" "+" width: "+ IMG. Width +" PX; Height: "+ IMG. height +" PX; "+ imgstyle + ";"
+ "Filter: progid: DXImageTransform. Microsoft. alphaimageloader"
+ "(Src = \ '" + IMG. SRC + "\', sizingmethod = 'Scale'); \"> </span>"
IMG. outerhtml = strnewhtml
J = J-1
}
}
}
}
After Dom loading is complete, modify the outerhtml attribute of each PNG image. 5: outerhtml contains not only all the content of innerhtml, but also the object tag itself. 6: Overflow implements textarea with no borders and no scroll bars Overflow version: css2 compatibility: ie4 + ns6 + inheritance: None
Syntax:
Overflow: visible | auto | hidden | scroll
Parameters:
Visible: Do not cut the content or add a scroll bar. If this default value is explicitly declared, the object is cut to the size of the window or frame containing the object. And the clip attribute settings will be invalid.
Auto: the default value for the body object and textarea. Cut the content and add a scroll bar as needed
Hidden: Do not display content that exceeds the object size
Scroll: Always displays the scroll bar
Note:
Retrieves or sets how to manage content when the content of an object exceeds its specified height and width.
Setting the textarea object to a den value will hide its scroll bar.
For a table, if the table-layout attribute is set to fixed, the TD object supports
There is an overflow attribute whose default value is hidden. If it is set to hidden, scroll, or Auto, the content beyond the TD size will be cut. If
Visible, causing extra text to overflow to the right or left (depending on the setting of the direction attribute) cells.
This attribute is available on Mac platform since ie5