HTML&CSS FAQ (iii)

Compatibility issues with 41.input tags?

When the input tag is in type text, the default height in Firefox and Safari is 22px (including the top and bottom borders) width is 146px (including the left and right borders), while the default height in IE is 24px, while the width is consistent with Firefox and Safari. Also 146px.

When the input tag is in type Sumbit, the height in Firefox is 23px (including shadows) and the width is 75px. In Safari, the height is 21px, the width is 73px, in IE the height is 25px, the width is 73px.

What is the difference between disabled and readonly in 42.input?

ReadOnly is valid only for input (Text/password) and Taxtarea, and disabled is valid for all form elements, including Select, Radio, CheckBox, Button, and so on.

Form elements after using disabled, when we submit the form as a post or get, the value of this element will not be passed out, and ReadOnly will pass the value out (this happens when we set the TEXTAREA element in a form to Disabled or readonly, but the Sumbit button is available)

What are the 43.input attributes?

Button---Define clickable buttons (in most cases, use JavaScript to launch scripts)

CheckBox---definition check box

File---Define input fields and "Browse" buttons for uploading files

Hidden---Defining the hidden input fields

Image---To define the submit button in the form of images

Password---Define the password field, the character in the field is masked

Radio---define radio buttons

Reset---Define reset button, reset button clears all data in form

Sumbit---Define the submit button, the Submit button will send the form data to the server

The text---Defines the input field for a single line in which the user can enter text with a default width of 20 characters.

44.position attribute value, such as write only absolute, is relative to who fixed the bit

To his nearest, already positioned parent element

45.CSS selector div.ps What does that mean?

The class name is the div of PS

46. Using Display:inline-block in the IE6 can not display properly, how to solve?

Method 1: Set the block element directly to the inline object presentation (set property display:inline), and then trigger the layout of the block element (for example, zoom:1, etc.). The code that is compatible with each browser should be "display:inline-block; Display:inline; Zoom:1, ... "

Method 2: First use the Display:inline-block property to trigger the block element, and then define the Display:inline, so that the block elements are presented as inline objects (two display to be placed in two CSS style declarations have effect, this is a classic IE bug, If Display:inline-block is defined first, then the display is set back to inline or block,layout does not disappear. The code should be "Display:inline-block;*display:inline;"

There are several formats for 47.png images

PNG has 3 different depth formats: PNG8,PNG24,PNG32

What are the property values for 48.display?

None---This element is not displayed

Block---This element will be displayed as a block-level element with a newline character before and after this element

Inline---By default, this element is displayed as an inline element with no line break before or after the element

Inline-block---inline block element (CSS2.1 added property)

List-item---This element is displayed as a list

Run-in---This element is displayed as a block element or inline element based on the context

Compact---The compact, but has been removed from CSS2.1 due to a lack of broad support

Marker has value marker---css, but has been removed from CSS2.1 due to lack of broad support

Table---This element is displayed as a block-level table (like a table label) with line breaks before and after the table

Inline-table---This element is displayed as an inline table (like a table label) with no line break before or after the table

Table-row-group---This element is displayed as a grouping of one or more rows (similar to tbody labels)

Table-header-group---This element is displayed as a grouping of one or more rows (similar to thead labels)

Table-footer-group---This element is displayed as a grouping of one or more rows (similar to tfoot labels)

Table-row---This element is displayed as a table row (similar to TR label)

Table-column-group---This element is displayed as a grouping of one or more columns (similar to colgroup)

Table-column---This element is displayed as a cell column (similar to COL tags)

Table-cell---This element is displayed as a table cell (similar to TD and TH tags)

Table-caption---This element is displayed as a table header (similar to caption)

Inherit---Specifies that the value of the display property should be integrated from the parent element

49. The difference between the hidden tags (display:none and Visibility:hidden)

Visibility:hidden hidden, but retains location while browsing
Display:none is considered non-existent and does not load

50. Center inside the page (horizontal and vertical)

Center vertically: Sets the text-align for the parent element horizontally, using the left margin value of auto

Vertical: Sets the Line-height value to the element height, and sets the absolute position of the element. top:0;bottom:0;margin:auto,0;

51. How to make hover disappear after link access

Under normal circumstances: love and hate principle: l---V---h---a
To achieve this effect, the order can be changed: L---h---v---a

Why can't I set a 1px high div in 52.ie6

When you use DIV to build a Web page, sometimes it takes a very small height, which can cause problems, because the IE6 div has a default height, about 10-12px. When you try to define a high-altitude small fish This default value of the div, IE will stubbornly believe that the height of this layer should not be less than the font row height.

Workaround:

First: Define the div font size

Second: Direct limit automatic adjustment

53.div content does not open the height of the reasons, how to solve

Parent Div is not set height, child div set height, at this time, the height of the parent div is propped up by the child Div, but when the child div floats, the height of the parent will not have, at this time need to add a sibling div, and clear:both, can solve the problem

54. Double margin Bug

In the element that produces the double margin bug, add a line attribute: Display:inline;
or, using csshack:margin-left:12px;_margin-left:20px;

55. How to align div horizontally

Floating or positioning

56. What is the difference between defining the ID name and the class name?

Conceptually, the ID is the first to find the structure/content, and then define the style for him, class is to define a style first, and then set to the chrome structure/content.

From the style effect, the priority of the ID is higher than the class level, the HTML does not have a few IDs, in the CSS gets all, but in JS through the document gets the first

There are several ways to introduce 57.CSS, what is the difference between link and @import?

See my blog: http://www.cnblogs.com/shireyhu/p/7827082.html

Link is the XHTML tag, in addition to loading CSS can also define other transactions such as RSS, @import belong to the CSS category, can only load CSS.
When a link references a CSS, it loads at the same time as the page loads; @import need page pages to load completely

Link is an XHTML tag, no compatibility issue, @import is proposed in CSS2.1, the lower version of the browser does not support

58. Set the div display:inline-block in IE; does it still occupy a line?

IE does not support display properties

59. How to make a gradient effect (not applicable to CSS)

60. The top and bottom two div set the Margin-bottom and Margin-top respectively, what is the distance between the two div?

The fusion effect will occur, and the distance is the one with the larger value.

HTML&CSS FAQ (iii)