Front-End CSS Part knowledge finishing

1, how to clear the image below a few pixels of the gap?

/* method 1:*/img{display:block;} Method 2:/*img{vertical-align:top;} */

2, How to make text vertically align this input box?

input{vertical-align:middle;}

3, How to let single-line text inside the container vertically center?

#test {height:25px;line-height:25px;} /* just set the line of text higher than the height of the container */

4, how to make hyperlinks after access and before access to different colors and access to retain the hover and active effects?

A:link{color: #03c;} A:visited{color: #666;} A:hover{color: #f30;} A:active{color: #c30;} /* set the hyperlink style in L-v-h-a order, shorthand for love (like) HAte (hate) */

5, How to make the text overflow boundary does not wrap force in a row to display?

#test {width:150px;white-space:nowrap;} /* set the container width and white-space to nowrap, and its effect is similar to the label */

6. How to make text overflow bounds appear as ellipses?

#test {width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* first you need to set the text to be displayed on a single line, then truncate the overflow text through Overflow:hidden and display the truncated text as an ellipsis in Text-overflow:ellipsis manner. */

7, How to make continuous long string automatic line wrapping?

#test {width:150px;word-wrap:break-word;} /* Word-wrap's Break-word value allows word wrapping in words */

8, how to clear floating?

/* Method 1:*/#test {clear:both;} /* #test为浮动元素的下一个兄弟元素 *//* Method 2:*/#test {display:block;zoom:1;overflow:hidden;} /* #test为浮动元素的父元素. Zoom:1 can also be replaced with a fixed width or height *//* method 3:*/#test {zoom:1;} #test: after{display:block;clear:both;visibility:hidden;height:0;content: ';} /* #test为浮动元素的父元素 */

9, How to let the unknown size of the picture in the known wide height of the container horizontal vertical center?

#test {display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center; vertical-align:middle;} #test p{*position:absolute;*top:50%;*left:50%;margin:0;} #test P img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;} /* #test是img的祖父节点, p is the parent node of the Img. Know More: How does an unknown size picture be horizontally vertically centered */

10. How to set the width and height of span (that is, How to set the width height of inline elements)?

span{display:block;width:200px;height:100px;} /* to enable the inline element to be set to a wide height, simply define it as a block-level or inline block-level element. So the method is very diverse, you can set the display property, you can set the float property, or the position property, and so On. */

11. How to remove the dotted box of hyperlinks?

a{outline:none;}

12, how transparent container, the content is not transparent?

. Outer{width:200px;height:200px;background:rgba (0,0,0,.2); background: #000 \9;filter:alpha (opacity=20) \9;}. Outer. inner{position:relative\9;} /* I am opaque content *//* Advanced browser directly using the Rgba color value implementation, ie browser in the definition of transparent container, while the child nodes relative positioning, also can achieve the effect */

13. How do I make a 1-pixel table with a thin border?

/* method 1:*/#test {border-collapse:collapse;border:1px Solid #ddd;} #test th, #test td{border:1px Solid #ddd;} Name Joy du age 26/* method 2:*/#test {border-spacing:1px;background: #ddd;} #test tr{background: #fff;} Name Joy du age 26/* IE7 and earlier browsers do not support border-spacing properties, but can be overridden by the Table's label Properties Cellspacing. */

Front-End CSS Part knowledge finishing