프런트 엔드 개발에서 자주 발생하는 일부 CSS 문제(요약)

이 장에서는 프론트엔드 개발에서 자주 접하는 CSS 문제(요약)를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 입력에 대한 질문

1. 입력은 편집 가능하며 드롭다운

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

2. #🎜🎜 #3. 클릭 시 입력 테두리가 표시되지 않습니다

입력 클릭 테두리 스타일이 잘못되었습니다

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

4 프롬프트 텍스트: 자리 표시자="휴대폰 번호"

input 프롬프트 텍스트 색상 수정

outline: none;  /**/

5. 입력 배경은 노란색입니다

이런 종류의 클릭 상자는 나타나지 않습니다. 더 이상 노란색

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

#🎜🎜 #또 다른 옵션은 자동 완성을 끄는 것입니다: autocomplete="off"

2. 공간 차지 여부: 표시/숨기기

1. 디스플레이

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

#🎜🎜 #2. 가시성

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

3. 위치 지정

1. 위치:절대

#🎜🎜 # 부모는 높이가 자동으로 증가하지 않습니다. 해결책: Overflow :auto;

2. 상대 위치: position:relative;

3.

4. 텍스트 영역#🎜 🎜#

1. div는 높은 적응성을 쉽게 달성하기 위해 텍스트 영역 텍스트 필드를 시뮬레이션합니다

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

5. 🎜🎜#6. 텍스트 줄임표

#🎜 🎜#1. 한 줄 텍스트 줄임표

.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);*/
}

2. 바 수정 스타일

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

8. 투명도# 🎜🎜#

1 배경과 글꼴이 투명합니다

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

2. opaque

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

9.img picture snapshot

::-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;
}

#🎜 🎜#로드가 시작될 때 js를 사용하여 이미지의 너비와 높이를 가져온 다음 js를 사용하여 여부를 결정할 수 있습니다. 이미지의 높이나 너비를 제한합니다. 이미지 로딩이 시작될 때 크기를 확인하는 방법은 여기에서 확인할 수 있습니다.

Js:

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

10. 배경 이미지

1에 맞게 이미지를 확장합니다. 즉, 표지 값: 배경- size :cover;

2. 요소의 크기에 맞게 이미지 크기를 줄입니다. 즉, 값을 포함합니다. background-size:contain; : background-size:auto;

4. Picture Blur

배경을 흐리게 하려면 필터() 함수를 사용하세요. 사용 방법:

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

# 🎜🎜#

5. 기타

타일링 없음: 배경 반복: 반복 없음; 수평 타일링: background-repeat: 반복-x

수직 타일링: 배경 반복: 반복-y

고정: 배경 첨부: 고정

스크롤: 배경 첨부: 스크롤

가로 가운데 맞춤: 배경 위치: 가운데

가로 중심 및 세로 중심: 배경 위치: 중심 중심;

위 내용은 프런트 엔드 개발에서 자주 발생하는 일부 CSS 문제(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!