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

This article mainly explains the "sharing of examples of tips commonly used in CSS". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "sharing examples of tips commonly used in CSS".

Solve the problem that setting the overflow:hidden attribute of the inline-block element causes the adjacent inline elements to shift downward

.wrap {

Display: inline-block

Overflow: hidden

Vertical-align: bottom

}

Copy the code

The excess part shows the ellipsis.

/ / single-line text

.wrap {

Overflow:hidden;/ beyond part hide /

The excess part of text-overflow:ellipsis;/ shows the ellipsis /

White-space:nowrap;/ stipulates that text in a paragraph does not wrap /

}

/ / multiple lines of text

.wrap {

Width: 100%

Overflow: hidden

Display:-webkit-box; / / display the properties that must be combined as an elastic telescopic box model

-webkit-box-orient: vertical; / / sets the attributes that must be combined in the arrangement of the child elements of the telescopic box object

-webkit-line-clamp: 3; / / to limit the number of lines of text displayed in a block element

Word-break: break-all; / / enables browsers to wrap lines in any location break-all to allow line breaks within words

}

Copy the code

Css implements no line wrapping, automatic line wrapping, and forced line wrapping

/ / No line wrapping

.wrap {

White-space:nowrap

}

/ / automatic line wrapping

.wrap {

Word-wrap: break-word

Word-break: normal

}

/ / forced line feeds

.wrap {

Word-break:break-all

}

Copy the code

CSS realizes text alignment at both ends

.wrap {

Text-align: justify

Text-justify: distribute-all-lines; / / ie6-8

Text-align-last: justify; / / alignment of the last line of a block or line

-moz-text-align-last: justify

-webkit-text-align-last: justify

}

Copy the code

Realize vertical typesetting of text

/ / when displaying in a single column

.wrap {

Width: 25px

Line-height: 18px

Height: auto

Font-size: 12px

Padding: 8px 5px

Word-wrap: when break-word;/ is in English, you need to add this sentence, line wrapping /

}

/ / when multi-column display

.wrap {

Height: 210px

Line-height: 30px

Text-align: justify

Writing-mode: vertical-lr; / / from left to right

Writing-mode: tb-lr; / / IE from left to right

/ / writing-mode: vertical-rl;-- from right to left

/ / writing-mode: tb-rl;-- from right to left

}

Copy the code

Invalidate element mouse events

.wrap {

/ / if you press tab to select the element, such as button, and then press enter to execute the corresponding event, such as click.

Pointer-events: none

Cursor: default

}

Copy the code

Prohibit users from selecting

.wrap {

-webkit-touch-callout: none

-webkit-user-select: none

-khtml-user-select: none

-moz-user-select: none

-ms-user-select: none

User-select: none

}

Copy the code

Cursor attribute

.wrap {

Cursor:pointer; / / Pinkie

Cursor:help; / / Arrow with question mark

Cursor:wait; / / turn in circles

Cursor:move; / / move the cursor

Cursor:crosshair; / / crosshairs

}

Copy the code

Use hardware acceleration

.wrap {

Transform: translateZ (0)

}

Copy the code

Adaptive picture width

Img {max-width: 100%}

Copy the code

Text-transform and Font Variant

P {text-transform: uppercase} / / turn all letters into uppercase letters

P {text-transform: lowercase} / / change all letters to lowercase

P {text-transform: capitalize} / / initials are capitalized

P {font-variant: small-caps} / / change the font to small uppercase letters

Copy the code

Make a container transparent

.wrap {

Filter:alpha (opacity=50)

-moz-opacity:0.5

-khtml-opacity: 0.5

Opacity: 0.5

}

Copy the code

Eliminate transition splash screen

.wrap {

-webkit-transform-style: preserve-3d

-webkit-backface-visibility: hidden

-webkit-perspective: 1000

}

Copy the code

Custom scroll bar

Overflow-y: scroll

The entire scroll bar

::-webkit-scrollbar {

Width: 5px

}

Track of scroll bar

::-webkit-scrollbar-track {

Background-color: # ffa336

Border-radius: 5px

}

The slider of the scroll bar

::-webkit-scrollbar-thumb {

Background-color: # ffc076

Border-radius: 5px

}

Copy the code

Let HTML recognize the'\ n' in string and break the line

Body {

White-space: pre-line

}

Copy the code

Realize a triangle

.wrap {

Border-color: transparent transparent green transparent

Border-style: solid

Border-width: 0px 300px 300px 300px

Height: 0px

Width: 0px

}

Copy the code

Remove the border of the dotted link

A {outline: none}

A {outline: 0}

Copy the code

Use CSS to display the URL after the link

A:after {content: "(" attr (href) ");}

Copy the code

Select content center display, drop-down content right alignment

Select {

Text-align: center

Text-align-last: center

}

Select option {

Direction: rtl

}

Copy the code

Change the color of the cursor in the input input box without changing the color of the font

Input {

Color: # fff

Caret-color: red

}

Copy the code

Modify the placeholder default font style in the input input box

/ / browser of webkit kernel

Input::-webkit-input-placeholder {

Color: # c2c6ce

}

/ / Firefox version 4-18

Input:-moz-placeholder {

Color: # c2c6ce

}

/ / Firefox version 19 +

Input::-moz-placeholder {

Color: # c2c6ce

}

/ / IE browser

Input:-ms-input-placeholder {

Color: # c2c6ce

}

Copy the code

Child element fixed width parent element width is stretched out

/ / Child elements under the parent element are inline elements

.wrap {

White-space: nowrap

}

/ / if the child element under the parent element is a block-level element

.wrap {

White-space: nowrap; / / child elements are not wrapped

Display: inline-block

}

Copy the code

Let the pictures and text in div be centered at the same time.

.wrap {

Height: 100

Line-height: 100

}

Img {

Vertival-align:middle

}

The attribute vertical-align of / / vertical-align css is used to specify the vertical alignment of inline elements (inline) or table cell (table-cell) elements. It only works for inline elements and table cell elements, and cannot be used to align block-level elements vertically

/ / vertical-align:baseline/top/middle/bottom/sub/text-top

Copy the code

Realization of adaptive rectangle with wide and high proportion

.scale {

Width: 100%

Padding-bottom: 56.25%

Height: 0

Position: relative

}

.item {position: absolute; width: 100%; height: 100%; background-color: 499e56;}

This is the container for all the child elements

Copy the code

The rotate attribute of transfrom is invalid under the span tag

Span {

Display: inline-block

}

Copy the code

Border fonts of the same color

.wrap {

Width: 200px

Height: 200px

Color: # 000

Font-size: 30px

Border: 50px solid currentColor

/ / border: 50px solid; / / implementation 2

}

Thank you for your reading, the above is the content of "sharing examples of tips commonly used in CSS". After the study of this article, I believe you have a deeper understanding of the sharing of examples of tips commonly used in CSS, 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.