첫째, 무엇 박스 모델?
여백 : 여백
국경 : 국경 라인
패딩 : 패딩
내용 : 내용
둘째, 경계 상자와 상자 내용의 차이점은 무엇입니까? 해당 속성은 무엇인가?
- 1. 하우징의 경계 : 경계 박스 : 경계 , 패딩, 구성 내용
a) 브라우저를 디버깅 할 때, 표시 소자의 페이지 크기는 경계 박스의 크기를 의미
b) 상기 하우징의 배경 요소, 디폴트 커버리지 경계는 상기 배경 클립 특성에 의해 수정 될 수있다
C) 배경 - 클립 특성 : 의미 : 범위 배경
상속되지 않음
기본값 : 경계 박스
값 : 경계 상자 : 하우징 커버의 배경 테두리
박스 패딩 : 채워진 상자 덮여 배경
박스 내용 : 배경 오버레이 콘텐츠 상자
- 2. 요약 카트리지 (콘텐츠 상자) 조성물의 함유량
a) 기본적으로, 폭 및 높이의 속성, 콘텐츠는 카트리지의 폭과 높이를 말한다
B) 의 폭 및 범위를 설정 높이가 박스 크기 속성에 의해 수정 될 수있다
C) 박스 사이징 특성 의미 : 박스의 폭과 높이가 설정 범위
기본값을 상속 할 수 없습니다 : 내용 상자
값 : 콘텐츠 상자 : 카트리지의 내용의 화면을 표시
박스 테두리 : 하우징의 테두리의 폭과 높이를 나타냅니다
셋째 방법 탄성 축 방향의 배치를 변경하는 방법? 스핀들 무엇의 정렬에서 프로젝트를 정의? 교차 축 정렬 어떤 프로젝트?
. 1) 플렉스 방향 재산권 주축의 방향 (즉, 결정이 프로젝트의 배열 방향).
RO W (기본값) 메인 수평 방향으로 좌측 단부에서 시작;
역방향 행 : 수평 방향의 축, 우단부터;
칼럼 : 주 종 방향 에지의 시작점.
역방향 칼럼 : 스핀들의 수직 방향 하부 시작점을 따라.
2) 플렉스 랩의 속성 정의, 이하보다 행 축, 포장 방법합니다.
파라미터 nowrap (기본값) : 포장하지 마십시오. 컨테이너가 충분히 넓은하지 않은 경우, 각 항목의 폭이 압착 될 것입니다;
포장 : 포장 및 용기 제 라인의 상단;
리버스 랩 : 배치하고, 제 1 행의 용기 바닥.
. 3) 플렉스 흐름 A는 플렉스 방향 및 플렉스 랩 약자로, 기본 값은 다음과 같습니다 플렉스 흐름 : 행 랩;
. 4) 정당화-컨텐츠 속성은 스핀들에있는 항목의 정렬을 정의합니다.
축 방향 : 로우 - 왼쪽의 시작점 로우 리버스 - 오른쪽의 시작점 칼럼 - 상단의 시작점 열 리버스 아래쪽 시작점
플렉스 시작 (기본값) :이 프로젝트는 스핀들 시작 지점에 위치하고 있습니다.
최종 플렉스 : 프로젝트는 스핀들 끝 부분에 위치하고 있습니다.
센터 : 센터
간 공간 : 정당화, 항목 사이의 간격이 동일하다. ( 시작 및 최종 프로젝트,없고 부모 컨테이너의 가장자리 간격 )
주위-공간 : 각 항목의 양쪽에 동일한 간격으로. 따라서, 두 프로젝트는 프로젝트의 크기와 경계의 간격의 간극. ( 첫번째와 마지막 프로젝트는 부모 컨테이너의 가장자리에 소정의 간격이있다 )
. 5) = 왼쪽 정렬 -items이 특성은 교차 축 정렬 방법 항목을 정의한다.
시작 - 플렉스 : 크로스 축 정렬을 시작.
최종 플렉스 : 엔드 크로스 축 정렬을.
센터 : 교차 축 정렬의 중간 점.
기준 : 프로젝트 기준선 정렬 텍스트의 첫 줄. ( 텍스트의 높은 라인, 글꼴 크기는 각 줄의 기준선에 영향을 미칠 것입니다 )
스트레치 (기본값) : 프로젝트 높이로 설정하거나 설정되지 않은 경우 자동 컨테이너의 전체 높이를 차지합니다.
정렬 콘텐츠 속성은 축 정렬 된 복수의 정의. 프로젝트가 하나의 축 인 경우,이 건물은 작동하지 않습니다.
( 제품의 복수의 열을 교체하는 경우, 사용할 수있는 정렬 콘텐츠 비치 환 정렬 = 왼쪽 항목 )
시작 - 플렉스 : 시작 지점이 교차 축으로 정렬됩니다.
최종 플렉스 : 십자가 샤프트의 끝으로 정렬됩니다.
센터 : 십자가 샤프트의 중간 점에 정렬됩니다.
BETWEEN 스페이스 : 크로스 축 배향 양단 분포의 축 사이의 평균 간격.
주위 스페이스 : 양단의 각각의 축이 동일하다. 따라서, 축 사이의 간격이 간격 축 테두리 배 크기.
스트레치 (기본값) : 축이 전체 교차 축을 차지한다.
넷째, 인라인 요소가되는 어떤 특성? 무엇을 특징으로 블록 레벨 요소는 무엇인가? 빈 요소가있다?
블록 수준 요소
- 폭과 높이가 내용에 자신의, 전혀 관계에 설정할 수 있습니다
- 별도의 행에 기본은 선이 다른 요소와 함께 공존 할 수 없습니다
- 해당 CSS 속성이 표시됩니다 : 블록
- 일반적인 DIV, P, H1-H6, 시간, UL, OL, 같은 헤더와 같은 새로운 의미 태그의 사전 H5 다양한, 바닥 글
- 폭과 높이를 설정할 수는, 설정 함유량은 폭과 높이에 의해 결정되고, 잘못
- 기본 행은 공존 할 다른 요소 수
- 해당 CSS 속성이 표시됩니다 : 인라인
- 일반적인 인라인 요소는있다 : A, 범위, 강한, I, B, TD를
- 당신은 폭과 높이, 내용에 전혀 관계를 설정할 수 있습니다
- 기본값은 다른 요소와 함께 공존 할 수있는 라인으로 라인 아니다
- 해당 CSS 속성은 다음과 같습니다 디스플레이 : 인라인 블록
- 공통 요소 : IMG, TD, 테이블, 비디오, 오디오, 형태. . .
행 원소
인라인 블록 수준 요소
V.의 여러 속성 값을 갖는 요소 위치? 무엇의 의미 인 것은 자세히 설명되어 있습니다.
절대 : 제 친 요소 절대 위치 결정 요소에 대하여 발생 위치가 고정 외측에 배치된다.
수정 : 브라우저 창의 위치에 대하여 소자 절대 위치를 발생시킨다.
상대 : 요소 상대 위치, 정상 위치에 상대적인 위치를 발생시킨다.
정적 : 기본. 어떤 위치 요소는 정상 스트림에 표시되지 않습니다
상속 : 규정은 부모 요소의 위치 속성 값을 상속합니다.
여섯, 디스플레이 실행 속성의 공통 값을 가지고? 각각이 무엇을 의미합니까?
없음 :이 요소는 표시되지 않습니다.
블록 :이 요소는 이전과이 요소는 것입니다 후 줄 바꿈으로, 블록 레벨 요소로 표시됩니다.
인라인 : 기본. 이 요소는 이전과 요소가 더 줄 바꿈이 없습니다 후, 인라인 요소로 표시됩니다.
인라인 블록 인라인 블록 요소.
상속 : 규정이 부모 요소에서 디스플레이 등록 정보의 값을 상속합니다.
세븐, CSS의 높은에서 낮은 배출 우선 순위 선택.
브라우저의 기본 스타일 시트 선언
사용자 스타일 시트 일반 문
스타일 시트 일반 문에
저자 스타일 시트 중요 공지
사용자 스타일 시트 중요 공지
여덟 오버플 그 의미를 설명하는 특성 값.
가시 : 기본값. 콘텐츠 상자 외부 요소가있을 것입니다, 정리되지 않습니다.
숨겨진 : 내용이 정돈되고, 나머지 내용이 표시되지 않습니다.
스크롤 : 내용이 정돈되지만 브라우저는 콘텐츠의 나머지 부분을 볼 수있는 스크롤 막대를 표시합니다.
자동 : 내용이 정리되면, 브라우저가 콘텐츠의 나머지 부분을보기 위해 스크롤 막대를 표시합니다.
상속 : 규정이 부모 요소에서 오버 플로우 속성 값을 상속합니다 .
나인, DOCTYPE의 역할? 의미 론적 태그의 역할은?
<! DOCTYPE> HTML 문서의 첫 번째 줄에 선언의 <HTML> 태그 앞에. 브라우저가 문서 파서 어떤 문서 표준을 구문 분석 지시합니다. DOCTYPE은 존재하지 않거나 잘못된 형식의 문서 호환성 모드가 발생합니다 발표했다.
의미 론적 태그의 역할 : HTML 문서 브라우저의 좋은 이해
HTML 문서를 이해하는 검색 엔진에 도움
텐, 우아한 열화 점진적 개선을 설명.
점진적 개선 (프로그레시브 향상) : 초기는 브라우저 페이지의 낮은 버전 구성 될 기본적인 기능을 수행하고, 향상된 브라우저의 상호 작용의 다음 효과, 더 나은 환경을 달성하는 기능을 추가한다.
우아한 저하 (우아한 저하는) : 브라우저 테스트 및 수리를 위해 다음 완전한 기능 사이트를 구축하기 시작합니다. 예를 들어, 시작 응용 프로그램을 구축 CSS3 속성을 사용하고 제대로 브라우저의 하위 버전에서 볼 수 있도록 점차 주요 브라우저에 대한 해킹.
XI, 몇 가지 일반적인 브라우저 커널 (1 점)을 작성합니다.
1 , 브라우저 360 : 크롬 IE 커널과 커널.
2 , 바이두 브라우저 : IE와 웹킷 듀얼 코어.
. 3 , QQ 브라우저 : 크롬 듀얼 코어 코어 + IE.
4 , 치타 브라우저 : 트라이던트와 웹킷.
5 , Sogou는 브라우저 : 크롬 커널.
XII는 방법 (적어도 네) 부동 삭제 하시겠습니까?
(1) 하나의 부모 구성 요소의 높이 (정의하는 높이 )
작동 원리 : 부모 요소가 완전히 하위 요소에 의해 부드럽게 부모 요소의 높이의 높이를 정의하지 않는 경우, 부모가 수동으로 높이를 정의 DIV, 해결 될 것입니다 자동으로 부모 DIV 문제의 수준으로 얻을 수 없습니다.
장점 : 간단한 , 적은 코드 , 이해하기 쉽다 .
단점 : 고정 높이 레이아웃에만 적합, 정확한 높이, 높이를 제공하고, 부모 DIV가 동일하지 않은 경우, 문제가 발생할 수 있습니다. 반응 레이아웃에 크게 영향을받습니다.
(2) 빈 태그의 끝 부분에 적용 사업부의 태그 명확한 : 모두
원리 : 부모가 자동으로 DIV의 높이를 얻을 수 있도록, 모두 명확한 플로트 : 빈 DIV 분명 CSS를 사용 증가 추가.
장점 : 간단하고 적은 코드, 브라우저 지원 문제를 비난하는 경향이하지, 좋은
단점 : 많은 초보자 원리를 이해하지 못하고, 페이지 레이아웃 및 더 많은 부동, 우리는 빈 DIV의 수를 증가해야하는 경우, 페이지를 최적화에 도움이되지 않습니다.
(3) 부모 DIV 정의 의사 클래스 : 후 와 줌
원리 : 원칙적으로 의사 클래스 및 효과를 생성하는 요소는 방법 2에 해당하지만, 위의 IE8과 비 IE 브라우저 만 지원합니다 후, 줌 (IE 회전 속성이) IE6, IE7 플로트 문제를 해결
장점 : 브라우저 지원이 문구는 고정도 직접 복사 할 수 있습니다 이해하지 못하는 문제를 비난하는 경향이 좋지 않다;
단점 : CSS의 코드의 원리를 이해하지 못하는 많은, 많은 초보자를위한 코드는 두 개의 주요 브라우저를 지원하기 위해 함께 사용할 수 있습니다.
(4) 부모 DIV는 정의 오버플로 : 숨겨진
장점 : 간단하고 적은 코드, 더 나은 브라우저 지원
단점 : 초과의 크기를 숨길 수 있기 때문에이 위치와 함께 사용할 수 없습니다. (이 방법에 사용하기 위해 권장하지 않음, 그것은 페이지 요소의 레이아웃에 영향을 미칠 수 있습니다)
열세, 그들에 대한 자세한 설명, REM, VH, 폭스 바겐, 픽셀, % 여섯 개 단위의 의미?
PX는 : 약어 픽셀 (화소)은 화면 해상도에 대하여 상대적 길이 단위이고;
EM : 참조 부모 요소의 폰트 크기를 갖는 특성을 상속. 브라우저의 기본 글꼴은 16px입니다
REM : CSS3 단위는 상대적으로 새로운 있지만, 그 반대 HTML 루트 요소입니다. 그것은 단지 복잡한 연쇄 반응을 방지하기 위해 층으로 폰트 크기, 및 폰트 크기를 조정 층 모든 비율의 루트 요소를 변경함으로써 수행 될 수있다.
% : 상위 요소 값의 비율에 대해 상대적 백분율 길이 유닛.
VH 및 VW : 뷰포트 1/100 동일한 폭 1vw 뷰포트 1/100의 높이와 동일 1vh 뷰포트의 높이 및 너비에 대하여.
넷째, 배경 이미지 관련된 속성 (주소, 반복 모드, 위치, 크기, 고정 배경)?
- 1. 배경 이미지를 설정 : 배경 이미지를 : URL을 ()
- 2. 배경 이미지 반복 모드를 설정 : 배경 반복을
값 : 반복 : 디폴트 값을 수평 및 수직 방향 타일 반복-X : 타일 수평 반복하지-Y를 : 타일 수직 방향 노 반복 : 배경 화상 타일의 설정을 반복하지 않는다
- 3. 배경 이미지의 위치를 설정 : 배경 위치를
2. 값 : XY 화소 값을 취 X를 다음 화상의 수평 방향의 배경 화상으로부터 오른쪽으로 이동 오프셋을 나타낸다는 양의 값을 나타내고, 음의 값은 좌측 이미지에 오프셋을 나타낸다 Y : 배경 화상 값의 거리를 수직 오프셋 화상 하방 오프셋 나타내고, 음의 값은 화상을 상향 이동 나타내는 주 :이 기술은 "스마트 기술"이라고 바인딩 "스프라이트"배경 화상 조정부 달성 백분율 인출 크기가 거리를 오프셋의 수평 및 수직 산출 기준 요소를 0 % 0 % 좌상 요소 배경 이미지 50 % 50 % : 중간 요소에 배경 화상 100 % 100 % 배경 이미지가 오른쪽 하단 소자에 표시된다 : 배경 화상 방위각 값의 위치를 결정하는 X를 : 좌 / 중앙 / 오른쪽 Y : 상단 / 센터 / 아래 한 방향으로 만 키가 다른 방향이 기본 인 경우 센터
4. 설정 배경 화상 사이즈 성질 : 배경 크기 값은 : XY XY은 폭과 높이가 배경 화상의 대표 화소 값 기준 요소 화상의 폭 및 높이 치수를 산출 배경 크기 : 백분율 덮개 : 완전히 소자를 덮도록 확대 기하학적 이미지를 도시 보이지 않는 과량 함유 : 기하학적 이미지 수광 소자가 단지 신장 나타내고, 소자의 크기를 초과 할 수 있으며, 백그라운드 이미지가 완전히 덮여 효과 소자 수 없다 발생할 수 5. 배경 속성 속기 성질 : 배경 ) (URL : 값 반복 위치 주의 : 위에서 순서대로 배경 속성 값 배경 사이즈 별도로 설치
다섯째, 드롭 다운 목록을 작성하기위한 두 가지 요소를 형성?
<input 종류 = 텍스트리스트 목록 1 =>
<하여 DataList ID =리스트 1>
<옵션> 옵션을 사용하는 것이 좋습니다 1 </ 옵션>
<옵션> 옵션을 사용하는 것이 좋습니다 2 </ 옵션>
</ DataList에>
<사이즈 선택 = 1>
<옵션> 옵션 1 </ 옵션>
<옵션> 옵션 2 </ 옵션>
<옵션 선택> 选项三</ 옵션>
</ 선택>
</ 선택>