프런트엔드 페이지 레이아웃 개발에서 쉽게 발생할 수 있는 몇 가지 CSS 문제 요약

본고는 단지 프로젝트 경험이 부족하기 때문에 실제적으로 전방 페이지 개발을 진행할 때 특히 겪기 쉬운 몇 가지 문제에 대한 것이다.
질문 1、box-sizing 속성
이것은 박스 모델에 관한 문제이다. 어떤 상황에서 특정한 요소에 대해box-sizing 설정을 해야 하기 때문에 처음에 나는 이 문제를 생각하지 못했다. 나중에 시각 디자인 원고에 따라 양식을 조정해야 할 때 의식이border-sizing으로 배치될 수 있다는 것을 발견했다.
우리는 통상적으로 하나의 원소의 넓이를 계산할 때 값=width/height+padding+margin+border의 경우 이것은 정상적인 박스 모형의 경우 값=width/height, 이 원소가 설정한padding\margin\border는 이미 설정된 넓이에 포함된 또 다른 IE박스 모형이다.이러한 차이는 box-sizing이라는 속성을 통해 설정된 것이다.

box-sizing: border-box | content-box | inherit

설명:
콘텐츠-box: 표준 박스 모형으로 CSS가 정의한 넓이는 콘텐츠의 넓이만 포함합니다.
border-box: IE 박스 모델, CSS가 정의한 폭은 콘텐츠,padding,border를 포함합니다.
inherit: 부모 요소box-sizing 속성을 계승하는 값
질문 2. z-index 속성
한 항목의 페이지 스타일을 진행할 때 겹치는 전시에 대한 사용이 매우 많다. 때로는 코드가 틀리지 않았지만 일부 기능은 실현되지 못할 수도 있다. 가장 흔히 볼 수 있는 것은 요소의 겹치는 문제로 인해 하나의 클릭 이벤트가 덮어져서 클릭 이벤트를 정상적으로 실현하지 못할 수도 있다.프로젝트 경험이 부족하면 버그를 찾는 것이 고통스럽기 때문에 z-index라는 속성을 중시할 필요가 있다고 생각합니다.
의미:z-index 속성은 포지셔닝 속성을 가진 요소와 하위 요소의 겹치는 순서를 지정합니다.원소 사이가 중첩될 때, z-order는 다른 원소의 위에 덮어쓰는 원소를 결정합니다.
값: 숫자입니다. 정수나 음수일 수 있습니다. 일반적으로 z-index 값이 비교적 큰 요소는 비교적 작은 원소를 덮어씁니다.
실현: 이미 포지셔닝된 요소(즉position 속성 값이 비static 요소)에 대해z-index 속성이 수치를 지정할 수 있습니다.
문제 3. 블록급 원소와 내연 원소
블록급 원소와 내연 원소도 실제 프로젝트에서 매우 많은 것을 만났고 구덩이를 만나기 쉽다. 예를 들어 주의하지 않으면 내연 원소에 넓거나 높게 설정했지만 작용하지 않았다는 것을 발견하면 블록급 원소와 행내 원소를 깊이 이해해야 한다.
1. 흔히 볼 수 있는 내연원소와 블록급 원소
인라인 요소: a,img,span,button,input,label,select,textarea 등
블록급 요소:div,p,h1-h6,table,ul,ol,pre 등
2. 블록 요소의 특징:
4

항상 새 줄에서 시작한다

4

높이, 행 높이 및 외부 거리와 내부 거리를 모두 제어할 수 있다

4

너비는 기본적으로 용기의 100%입니다. 너비를 설정하지 않으면

4

내부 요소와 다른 블록 요소를 수용할 수 있다

3. 내연 요소의 특징:
4

다른 원소와 같은 줄에 있다

4

높이, 행고 및 외측거리와 내측거리는 변경할 수 없다

4

너비는 바로 그의 문자와 그림의 너비로 바꿀 수 없다

4

인라인 요소는 텍스트 또는 기타 인라인 요소만 수용할 수 있습니다

4. 블록 레벨 요소와 인라인 요소 간의 변환:
방법 1. 디스플레이
블록 요소 기본값display:block;인라인 대체되지 않은 요소는 기본적으로 display:inline입니다.줄 안의 대체 요소는 기본적으로 디스플레이: inline-block입니다.

display:none; 이 요소는 표시되지 않으며 원래 있던 문서 흐름 위치도 유지되지 않습니다

display:block; 블록 레벨 요소로 변환합니다

display:inline; 인라인 요소로 변환합니다

display:inline-block; 인라인 블록 수준 요소로 변환합니다

방법2、플로트
인라인 요소를float:left/right로 설정하면 인라인 요소의 디스플레이 속성은 Block 값을 부여하고 부동 특성을 가집니다.줄 안의 원소는 사이의 알 수 없는 공백을 제거한다.
방법 3. position
인라인 요소를 포지셔닝할 때position:absolute;position:fixed;원래 인라인 요소를 블록 레벨 요소로 바꿉니다.
문제는 아직 많다. 단지 이 세 가지가 비교적 빈번하고 특징이 있는 것을 만났을 뿐이니 나중에 천천히 보충하자.
매일 조금씩 정리하고, 매일 조금씩 배우고, 매일 조금씩 진보한다(〃'〃'〃)