CSS skills and experience sharing, CSS skills sharing

CSS skills and experience sharing, CSS skills sharing

CSS skills and experience:

1. How to clear the gap between pixels below an image

Method 1

Img {

Display: block;

}

Method 2

Img {

Vertical-align: top;

}

// In addition to the top value, you can also set it to text-top | middle | bottom | text-bottom, or even specific <length> and <percentage> values.

Method 3

// # The parent element whose test is img

# Test {

Font-size: 0;

Line-height: 0;

}

2. How to vertically align text input boxes

Input {

Vertical-align: middle;

}

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

# Test {

Height: 25px;

Line-height: 25px;

}

// You only need to set the line height of the text to line-height equal to the height of the container.

4. Why link-visited-hover-active is link-visited-hover-active? How to Make the hover and active effect different from those before the hyperlink 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, can be stenographer LoVe (like) HAte (HAte)

5. How to make the text Overflow Boundary display white-space in a line without line breaks

# Test {

Width: 150px;

White-space: nowrap;

}

// Set the container width and white-space to nowrap.

 

6. Details on how to display text overflow boundaries as ellipsis text-overflow

 

# Test {

Width: 150px;

White-space: nowrap;

Overflow: hidden;

Text-overflow: ellipsis;

}

// First, you need to force the text to be displayed in one line, then truncate the overflow text through overflow: hidden, and display the truncated text as a ellipsis in text-overflow: ellipsis mode.

 

7. How to enable continuous long strings to automatically wrap word-wrap

 

# Test {

Width: 150px;

Word-wrap: break-word;

}

// The break-word value of word-wrap allows line breaks in words.

 

8. How to clear floating

 

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 element 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 element of the floating element.

 

9. How to define the mouse pointer as a hand-shaped cursor

 

# Test {

Cursor: pointer;

}

// Set cursor to pointer.

10. How to center containers with known width and height horizontally and vertically in the page

 

Method 1 position

 

# Test {

Width: 200px;

Height: 100px;

Position: relative;

Top: 50%;

Margin: 0 auto

Margin-top:-50px;/* Half of height */

}

// First set the relative position of the container, Set top: 50%; margin-top:-50px; to center vertically, and then set margin: 0 auto to center horizontally.

 

Method 2 transform

 

# Test {

Width: 200px;

Height: 100px;

Position: relative;

Top: 50%;

Transform: Maid (-50% );

Margin: 0 auto;

}

// First set the container to relative positioning, Set top: 50%; transform: translateY (-50%); vertically center it, and then set margin: 0 auto to horizontally center it.

 

11. vertical-align details on how to align images of unknown sizes horizontally and vertically in a container with a known width and height

 

# Test {

Display: table-cell;/* vertical-align only supports inline elements or table cells */

Width: 200px;

Height: 200px;

Text-align: center;

Vertical-align: middle;

}

# Test p {

Margin: 0;

}

# Test p img {

Vertical-align: middle;

}

// # Test is the grandfather node of img, and p is the parent node of img.

 

 

12. How to set the width and height of a span (that is, how to set the width and height of an inline element)

Span {

Display: block;

Width: 200px;

Height: 100px;

}

// To enable the width and height of inline elements, you only need to define them as block-level or Inline block-level elements. Therefore, there are many methods, including setting the display attribute, float attribute, or position attribute.

 

13. How to fill an element with the whole page

 

Html, body {

Height: 100%;

Margin: 0;

}

# Test {

Height: 100%;

}

14. How to Make an element 10 pixels away from the top-right, bottom-left, and left-side of the window

 

Html, body {

Height: 100%;

Margin: 0;

}

# Test {

Position: absolute;

Top: 10px;

Right: 10px;

Bottom: 10px;

Left: 10px;

}

15. How to Make the container transparent and the content opaque

 

Method 1

. Outer {

Width: 200px;

Height: 200px;

Background: #000;

Opacity: 0.2;

}

. Inner {

Width: 200px;

Height: 200px;

Margin-top:-200px;

}

<Div class = "outer"> <! -- I am a transparent container --> </div>

<Div class = "inner"> I am an opaque content </div>

// The principle is to combine the container layer with the content layer. The Container layer sets transparency. The content layer overwrites the container layer by negative margin or position absolute positioning.

 

Method 2

. Outer {

Width: 200px;

Height: 200px;

Background-color: rgba (0.2, 0 );

}

<Div class = "outer">

<Span> I am an opaque content </span>

</Div>

// Directly use the rgba color value of background-color (advanced browser)

 

16. How to horizontally center containers with known widths

 

# Test {

Width: 960px;

Margin: 0 auto;

}

17. Why is the background color of the container not displayed? Why cannot containers adapt to the content height?

 

// Clear the float. For more information, see section 8th.

// This is usually caused by the absence of floating clearance. Therefore, Debug should first consider whether there is a place where floating is not cleared.

18. How to Create a table with a 1 pixel border

Method 1 border-collapse

 

# Test {

Border-collapse: collapse;

Border: 1px solid # ddd;

}

# Test th, # test td {

Border: 1px solid # ddd;

}

<Table id = "test">

<Tr>

<Th> name </th>

<Td> Joy Du </td>

</Tr>

<Tr>

<Th> age </th>

<Td> 26 </td>

</Tr>

</Table>

Method 2 border-spacing

 

# Test {

Border-spacing: 1px;

Background: # ddd;

}

# Test tr {

Background: # fff;

}

<Table id = "test">

<Tr>

<Th> name </th>

<Td> Joy Du </td>

</Tr>

<Tr>

<Th> age </th>

<Td> 26 </td>

</Tr>

</Table>

19. How to keep the page text line spacing n times the font size

 

Body {

Line-height: n;

}

// Note: Do not add units to n.

20. Analysis of several methods and advantages and disadvantages of image-changing

 

Idea 1 use the negative value of text-indent to remove the content from the container text-indent

 

# Test {

Width: 200px;

Height: 50px;

Text-indent:-9999px;

Background: # eee url (*. png) no-repeat;

}

<Div class = "test"> negative indentation of the content in an image for changing words </div>

// This method has the following advantages: 1. due to different use cases, the values of negative indentation may be different and cannot be abstracted into public styles. 2. when this element is a link, the dashed line boxes in non-IE will become incomplete; 3. if this element is defined as an inline or Inline block level, there will be many differences in different browsers.

 

Idea 2 Hide content using display: none or visibility: hidden

 

# Test {

Width: 200px;

Height: 50px;

Background: # eee url (*. png) no-repeat;

}

# Test span {

Visibility: hidden;/* or display: none */

}

<Div class = "test">

<Span> text hiding in an image </span>

</Div>

// This method has strong compatibility and is easy to abstract into public styles. Its disadvantage is that the structure is complex.

 

Idea 3 Use padding or line-height to squeeze content out of the container

 

# Test {

Overflow: hidden;

Width: 200px;

Height: 0;

Padding-top: 50px;

Background: # eee url (*. png) no-repeat;

}

. Test {

Overflow: hidden;

Width: 200px;

Height: 50px;

Line-height: 50;

Background: # eee url (*. jpg) no-repeat;

}

<Div class = "test"> text transfer by image </div>

// This method has the following advantages: 1. due to different use cases, the values of padding or line-height may be different and cannot be abstracted as public styles; 2. hack is required to be compatible with IE5.5 and earlier browsers.

Idea 4 Use the ultra-small font and full text transparency Method

 

. Test {

Overflow: hidden;

Width: 200px;

Height: 50px;

Font-size: 0;

Line-height: 0;

Color: rgba (0, 0, 0 );

Background: # eee url (*. png) no-repeat;

}

<Div class = "test"> text transparency + ultra-small font for text exchange </div>

// This method is easy to use and is recommended for use.

 

21. why only one margin of the two adjacent divs takes effect?

 

. Box1 {

Margin: 10px 0;

}

. Box2 {

Margin: 20px 0;

}

<Div class = "box1"> box1 </div>

<Div class = "box2"> box2 </div>

// In this example, the bottom margin of box1 is 10px, and the top margin of box2 is 20px, but the interval between two persons on the page is 20px, instead of the expected 10 + 20px = 30px, the result is the largest margin between the two. We call this mechanism "margin merge "; the outer margin is merged not only between adjacent elements, but also between parent and child.

 

// Simple list of precautions for extra margin merge:

// A. The outer margin is merged only on block-level elements;

// B. The floating element does not have the outer margin merged with the adjacent element;

// C. The absolute positioning element will not be merged with the adjacent elements;

// D. inline block-level elements do not produce margin merge;

// E. The root element does not produce margin Merge (for example, between html and body );

// F. A block-level element with the overflow Attribute Set and the value is not visible will not be merged with its child elements;

22. how to disable the Chinese Input Method in the text box

 

Input, textarea {

Ime-mode: disabled;

}

// Ime-mode is a non-standard attribute. When writing this document, only IE can correctly disable the Chinese Input Method. Firefox supports but cannot disable it.

23. Print the paging character page-break-before

 

// Although most Internet users prefer to read content online, some users may want to print articles. With CSS, you can control the pagination of the content and add this class to any label you want to print.

# Test {

Page-break-before: always;

}

24. Paragraph first word sinking: first-letter details

 

// You can create a sinking effect, such as the use of newspapers or magazines.

P: first-letter {

Margin: 5px 0 0 5px;

Float: left;

Color: # FF3366;

Font-size: 3.0em;

}

25. Explanation of uppercase text-transform

 

# Test {

Text-transform: uppercase;/* lowercase lower case */

}

26. text-shadow Obfuscation

 

# Test {

Color: transparent;

Text-shadow: #111 0 0 5px;

}

27. CSS reset normalize.css download

 

// Use normalize.css

28. Detailed explanation of simple computation calc in CSS

 

// Some simple operations can be performed using the calc method in CSS to dynamically specify the element style.

# Test {

Background-position: calc (100%-50px) calc (100%-20px );

}

This article from> Shang; reprint Please note: http://www.sxt.cn/u/13421/blog/8735