Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the practical skills of css". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what are the practical skills of css.

1. How to clear the gap between how many pixels appear at the bottom of the picture?

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

2. How to align the text vertically to the text input box?

Input {vertical-align:middle;}

3. How to center a single line of text vertically in the container?

# test {height:25px;line-height:25px;}

/ * just set the line height of the text to be equal to the height of the container * /

4. How to make the color of the hyperlink different after access and before access, and still retain the hover and active effect after access?

A:link {color:#03c;}

A:visited {color:#666;}

A:hover {color:#f30;}

A:active {color:#c30;}

/ * set the hyperlink style in the order of L-V-H-A, and you can write shorthand as LoVe (like) HAte (hate) * /

5. How to make the text overflow boundary without wrapping force to be displayed on one line?

# test {width:150px;white-space:nowrap;}

/ * set the width and white-space of the container to nowrap, which is similar to the label * /

6. How to make the text overflow boundary appear as an ellipsis?

# test {width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/ * you first need to force the text to be displayed on one line, then truncate the overflowed text through overflow:hidden, and display the truncated text as an ellipsis in text-overflow:ellipsis. , /

7. How to make continuous long strings wrap automatically?

# test {width:150px;word-wrap:break-word;}

/ * the break-word value of word-wrap allows word wrapping * /

8. How to clear the float?

Method 1:

# test {clear:both;}

/ * # test is the next sibling element of the floating element * /

Method 2:

# test {display:block;zoom:1;overflow:hidden;}

/ * # test is the parent of the floating element. 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 is the parent of the floating element * /

9. How to center a picture of unknown size horizontally and vertically in a container of known width and height?

# 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 is the grandfather node of img, and p is the parent node of img. Know More: how a picture of unknown size is centered horizontally and vertically * /

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

Span {display:block;width:200px;height:100px;}

/ * to enable inline elements to set width and height, simply define them as block-level or inline block-level elements. So there are a variety of ways to set the display property, the float property, or the position property, and so on. , /

11. How to remove the dotted wireframe of the hyperlink?

A {outline:none;}

12. How can the container be transparent and the content not transparent?

.outer {width:200px;height:200px;background:rgba; background:#0009;filter:alpha (opacity=20) 9;}

.outer .inner {position:relative9;}

I am opaque content.

/ * Advanced browsers are directly implemented using rgba color values; IE browsers can also achieve the effect of relative positioning of child nodes while defining the transparency of containers.

13. How to make table with a thin frame of 1 pixel?

Method 1:

# test {border-collapse:collapse;border:1px solid # ddd;}

# test th,#test td {border:1px solid # ddd;}

Name 喜悦 Du

Age 26

Method 2:

# test {border-spacing:1px;background:#ddd;}

# test tr {background:#fff;}

Name 喜悦 Du

Age 26

/ * IE7 and earlier browsers do not support the border-spacing attribute, but it can be replaced by the tag attribute cellspacing of table. , /

14. How to make the layer display on falsh?

15. How do I insert flash on a page using the standard method?

/ * as for the width and height of flash, you can set it in css * /

Thank you for your reading, the above is the content of "what are the practical skills of css". After the study of this article, I believe you have a deeper understanding of what practical skills of css have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.