Summary of html css tips and bugs

 

 

1. Firefox and chrome textarea solve automatic stretching

textarea {    resize: none;}

 

Ii. In IE7, <p> and other labels <A> after the float attribute is added, no rows are arranged with the text.

 

<! -- 'Display mode: 'and 'list mode', 'thumbnail mode' are not displayed in the same row --> <Div class = "View"> display mode: <a style = "float: right;" Title = "list mode" href = "#"> list mode </a> <a style = "float: right; "Title =" thumbnail mode "href =" # "> thumbnail mode </a> </div> <! -- 'Display mode: 'and 'list mode', 'thumbnail mode' are displayed in the same row --> <Div class = "View"> <a style = "float: right; "Title =" list mode "href =" # "> list mode </a> <a style =" float: right; "Title =" thumbnail mode "href =" # "> thumbnail mode </a> display mode: </div>

 

Conclusion: When a block element contains text and some text has the float attribute, the floating text should be placed before the block element so that it will float in the same line, instead of floating in the next line

3. In IE7, the padding value is included in the width.

When you view the element layout, you will find that the width in the layout calculates the padding value.

 

 

4. Font spacing

Line spacing: Line-height;

Spacing Between words: letter-spacing;

Indent the first word: Text-indent;

 

 

5. vertical and horizontal center of images

When the width and height of an image are unknown, but the maximum width and height are determined, you can use <Table> <TD> to implement the vertical and horizontal center of the image in the DIV and other boxes:

HTML:

 

<table>      <td></td></table>

 

CSS:

td{    vertical-align:middle;    text-align:center;    width: 355px;    height: 400px;}td img{    max-width:280px;    max-height:400px;}

 

6. Fixed table width and height under IE

In ie, the fixed width and height cannot be achieved for the high value of table width directly. This requires another attribute: Table-Layout

Syntax:
Table-layout:Auto|Fixed
Parameters:
Auto:The default automatic algorithm. The layout is based on the content of each cell. The table is displayed only after each cell is read and computed. Slow speed
Fixed:Fixed Layout Algorithm. In this algorithm, the horizontal layout is only based on the table width, the table Border width, cell spacing, and column width, but is not related to the table content.

table{    table-layout: fixed;    width: 200px;    height: 120px;}

 

 

7. Precautions for clearing the floating property clear:

1. Clear is not a label. It is an attribute in CSS.

2. There are four attribute values.

Clear: Both | left | right | none;

Clear: Both; indicates that no floating element exists on both sides of the element.

Clear: Left; indicates that there is no floating element on the left of the element.

Clear: Right; indicates that there is no floating element on the right of the element.

Clear: none indicates that floating elements are allowed on both sides.

3. The value of this attribute indicates that the edge of a floating object is not allowed. In other words, the role of the clear attribute is to "clear" floating. This attribute is used to control the physical location of the float attribute in the Document Stream. When the float attribute is set, the physical location of the object is already out of the document flow. However, most of the time we want the file flow to recognize float or float) the following elements are not affected by float. In this case, clear: Both; is required.

Clear: An Example of improper use of both: In IE8 +, chrome, Firefox

 

.aa {    float:left;    width:100px;    height:200px;    border:1px solid red;}.bb {    margin-left:110px;    border:1px solid blue;    width:330px;}.cc {    float:left;    width:100px;    height:100px;    border:1px solid green;}.dd {    float:left;    border:1px solid black;    width:100px;    height:100px;}.clear{        clear:both;}

 

HTML:

<div class="aa"></div><div class="bb">    <div class="cc"></div>    <div class="cc"></div>    <div class="cc"></div>    <div class="clear"></div>    <div class="dd"></div></div>

Result: due to the improper use of. Clear, the physical location of the Document Stream is cleared at the <Div class = "clear"> </div> position, so that there is no floating attribute on both sides of the Document Stream. Cause a bug

Modify the CSS code:

 

. AA {float: Left; width: 100px; Height: 200px; Border: 1px solid red ;}. bb {margin-left: 110px; Border: 1px solid blue; width: 330px ;}. CC {float: Left; // change to right width: 100px; Height: 100px; Border: 1px solid green ;}. dd {float: Left; Border: 1px solid black; width: 100px; Height: 100px ;}. clear {clear: Both; // change to right}

// Or add. Clearfix to the parent Element

. Clearfix: After {
Content :".";
Visibility: hidden;
Height: 0;
Clear: both;

Display: block;
}

// The code above is sometimes not very powerful, and the clear attribute is somewhat inadequate.

// This foreign code and Boom

. Clearfix {

Overflow: auto;

_ Height: 1%;

}

// The following section is also true.

. Clearfix {
Overflow: hidden;
_ ZOOM: 1;
}

 

Result:

Conclusion: when using clear, pay attention to whether the floating position to be cleared is left, right, or both.

 

7. line feed

Automatic field wrapping has two attributes: Word-break and word-wrap.

p{word-break : break-allword-wrap : break-word}

Syntax:
Word-break:Normal|Break-all|Keep-all
Parameters:
Normal:Line breaks are allowed according to the text rules of the Asian and non-Asian languages.
Break-ALL:This action is the same as normal in the Asian language. It also allows non-Asian text lines to be broken in any word. This value is applicable to Asian texts that contain non-Asian texts.
Keep-ALL:It is the same as normal in all non-Asian languages. Chinese, Korean, and Japanese cannot be disconnected. Suitable for non-Asian texts that contain a small number of Asian texts
Note:
Set or retrieve the line feed behavior of text in an object. Especially when there are multiple languages.
Use break-all for Chinese characters.
Corresponding script features:Wordbreak.

Word-wrap: normal | break-word
Parameters:
Normal: allows the content to expand the specified container boundary.
Break-word: the content will wrap in the boundary. If necessary, the line feed (Word-break) also occurs.

 

 

8. Clear the 4-pixel interval between tables

Add the border-collapse: collapse; attribute to the table label.

 

table{border-collapse:collapse;}