Some css problems often encountered in front-end development (summary)

This chapter brings you some CSS problems (summary) that are often encountered in front-end development. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Questions about input

1. The input is editable and pull-down

<div>
   <input type="text" list="itemlist" name="itemid" value="{$data.itemid}" >
 　<datalist id="itemlist">
     <option>item1</option>
     <option>item2</option>
   </datalist>
</div>

2. The input is drop-down

<select>
    <option value="-1" >---请选择分辨率---</option>
    <option value="0" >320 X 240</option>
</select>

3. The input edge is not displayed when clicked

inputClick border style is invalid

outline: none;  /**/

4. Prompt text: placeholder="Mobile phone number"

inputModify prompt text color

::-webkit-input-placeholder { /* input提示文字颜色 */
    color: #fff;
    font-size:20px;
}

5. input The background is yellow

This kind of click box will not appear yellow

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}

The other way is to turn off autofill: autocomplete="off"

二, Whether to occupy the space: show/hide

1. display

display:none;  /*不占位*/
display: block;  /*显示*/

2. visibility

visibility: hidden;   /*占位*/
visibility: visible;  /*显示*/

3. Positioning

1. Absolute positioning: position: absolute

The parent does not automatically increase in height. Solution: overflow:auto;

2. Relative positioning: position: relative;

3. Fixed positioning: position:fixed;

4. Textarea

1. div simulates textarea text area to easily achieve high adaptability

.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), 0 0 8px rgba(82, 168, 236, 0.6);*/
}

5. Finger cursor

 cursor: pointer; /*手指光标*/

6. Text ellipses

1. Single-line text ellipsis

.digital-limit {
   overflow: hidden;
   text-overflow: ellipsis;
   /*显示...*/
   white-space: nowrap;
   /*文本不换行，这样超出一行的部分被截取，显示...*/
}

2. Multi-line text ellipsis

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

7. Scroll bar modification style

::-webkit-scrollbar {/*滚动条整体样式*/
   width:  8px !important;     /*高宽分别对应横竖滚动条的尺寸*/
   height: 8px !important;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
   border-radius: 8px !important;
   -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.1) !important;
   background: rgba(0,0,0,.1) !important;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
   -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0) !important;
   border-radius: 10px !important;
   background: rgba(0,0,0,0) !important;
}

8. Transparency

1. Background and font are transparent

opacity：0.5; /* 0-1 的透明度 */

2. Background is transparent and font is opaque

background: rgba(216, 216, 216, .1.5);

9. Screenshot of img image

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

Via js when the image just starts loading You can get its width and height, 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 loading 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 image

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

2. The size is reduced proportionally to fit the size of the element, i.e. contain value: background-size:contain;

3. The size is filled with the size of the image itself, i.e. auto value: background-size :auto;

4. Picture blur

Use filter() function to blur the background, usage method:

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

##5. Others

No 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 centering: background-position: center;
Center horizontally and center vertically: background-position: center center;

The above is the detailed content of Some css problems often encountered in front-end development (summary). For more information, please follow other related articles on the PHP Chinese website!