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

This article mainly introduces the css problems often encountered in front-end development, which have a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

First, the question about input

1.input editable and dropdown

Item1 item2

2. Input drop-down

-Please select a resolution-320 X 240

3. Input sideline clicks do not display

Invalid input click border style

Outline: none; / * /

4. Prompt text: placeholder= "Mobile number"

Input modify prompt text color

::-webkit-input-placeholder {/ * input prompt text color * / color: # fff; font-size:20px;}

5. The background of input is yellow.

This kind of click box will not appear yellow.

Input:-webkit-autofill {box-shadow: 000px 1000px white inset! important;}

Another way is to turn off automatic filling: autocomplete= "off"

Second, whether to occupy a place: show / hide

1. Display

Display:none; / * does not occupy space * / display: block; / * display * /

2. Visibility

Visibility: hidden; / * placeholder * / visibility: visible; / * display * /

Third, positioning

1. Absolute positioning: position:absolute

The parent does not increase automatically. Solution: overflow:auto

two。 Relative positioning: position: relative

3. Fixed positioning: position:fixed

IV. Textarea

1. Div simulates textarea text field to easily achieve a high degree of self-adaptation.

.testdisplay {width: 100%; min-height: 200px; max-height: 400px; margin-left: auto; margin-right: auto; outline: 0; font-size: 12px; line-height: 24px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; / * box-shadow: inset 0 1px 3px rgba (0,0,0,0.1), 00 8px rgba (82,168,236,0.6); * /}

Finger cursor

Cursor: pointer; / * finger cursor * /

VI. Text ellipsis

1. Single-line text ellipsis

.digital-limit {overflow: hidden; text-overflow: ellipsis; / * shows. * / white-space: nowrap; / * the text does not wrap, so the part beyond the line is truncated to show. * /}

two。 Multi-line text provincial ellipsis

.digital-normal {display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden;}

7. Scroll bar to modify the style

::-webkit-scrollbar {/ * overall scroll bar style * / width: 8px! important; / * height and width correspond to the dimensions of horizontal and vertical scroll bars * / height: 8px! important;}::-webkit-scrollbar-thumb {/ border-radius: 8px! important;-webkit-box-shadow: inset 00 8px rgba! important; background: rgba }::-webkit-scrollbar-track {/ * track inside the scroll bar * /-webkit-box-shadow: inset 00 8px rgba! important; border-radius: 10px! important; background: rgba! important;}

VIII. Transparency

1. Background and font transparency

Transparency of opacity:0.5; / * 0-1 * /

two。 Transparent background, opaque font

Background: rgba (216,216,216, .1.5)

9. Screenshot of img picture

.Secretys img {width: 100%; height: 100%; position: absolute; right:-5px; clip: rect (0 103px 100px 0px);}

Through js, you can get the width and height of the image just as it begins to load, and then use js to decide whether to limit the height or width of the image. How to get the size when the image starts to load can be found here.

Js:

$(function () {$('.historys img') .each (function () {var $this=$ (this); imgReady ($this.attr (' src'), function () {if (this.width > this.height) {$this.attr ('height','100'); $this.removeAttr (' width');})

10. Background map

1. Expand the image proportionally to fill the element, that is, the cover value: background-size:cover

two。 Reduce the size of the picture proportionally to fit the size of the element, that is, the containment value: background-size:contain

3. Size fills the element with the size of the picture itself, that is, the autovalue: background-size:auto

4. Picture blurred

Use the filter () function to blur the background, using:

-webkit-filter: blur (5px); / * Chrome, Safari, Opera * / filter: blur (5px)

5. Other

Non-tiling: background-repeat: no-repeat

Horizontal tiling: background-repeat: repeat-x

Vertical tiling: background-repeat: repeat-y

Fixed: background-attachment: fixed

Scroll: background-attachment: scroll

Horizontal center: background-position: center

Centered horizontally and vertically: background-position: center center

Thank you for reading this article carefully. I hope the article "what are the css problems often encountered in front-end development" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.