Part1 CSS 관련
1 인라인 요소 및 블록 요소는 무엇입니까?
일반적인 인라인 요소 (인라인 요소)는 a, b, span, i, em, 입력, 선택, IMG 등을 포함합니다.
일반적인 블록 요소는 div, ul, li, h1 ~ h6, talbe, ol, ul, td, p 등을 포함합니다.
2 플로팅 관련
플로팅 레이아웃은 일반 스트림/문서 스트림에서 요소를 제거하여 바깥 쪽 가장자리가 상자 또는 다른 플로팅 상자가 포함 된 가장자리를 만날 때까지 왼쪽과 오른쪽으로 이동할 수 있도록합니다. 부동 박스는 문서의 일반 스트림에 속하지 않습니다. 요소가 떠 다니면 블록 레벨 요소의 레이아웃에는 영향을 미치지 않지만 인라인 요소의 배열에만 영향을 미칩니다.
플로팅 요소가 문서 스트림과 분리되어 있기 때문에 부모 요소가 존재를 알지 못한다는 것은 정확히 0의 높이로 작동합니다. 부동 요소가 어떻게 변하든 상위 요소가 그것을 감싸지 않을 것입니다. 이 현상을 "높이 붕괴"라고도합니다.
다음 예에서 #floatdom 높이가 어떻게 변하는 지에 관계없이 #parent 높이는 항상 0이므로 부모 요소 테두리를 열 수 없게 만들 수 없습니다. 배경을 표시 할 수 없습니다.
<div id = "parent"> <div id = "floatdom"style = "float : 왼쪽; 너비 : 300px; 높이 : 300px;"> <div style = "clear : 둘 다"> </div>
붕괴 된 (종종 우리가 기대하는 것이 아님)가 존재하기 때문에 떠 다니는 것이 제거되어야합니다. 떠 다니는 몇 가지 방법은 다음과 같습니다.
• 떠 다니는 요소 후 "Clear : 두 가지"스타일로 요소를 추가하십시오
<div id = "parent"> <div id = "floatdom"style = "float : 왼쪽; 너비 : 300px; 높이 : 300px;"> <div style = "clear : 둘 다"> </div>
또한 BR 태그를 추가 할 수 있습니다.
<div id = "parent"> <div id = "floatdom"style = "float : 왼쪽; 너비 : 300px; 높이 : 300px;"> <br/> </div>
이 방법을 제거하기 위해이 방법을 사용하는 장점은 이해하기 쉽고 마스터하기 쉽고 단점도 분명하다는 것입니다. 많은 무의미한 레이블이 추가되어 나중에 유지 보수가 매우 고통 스럽습니다.
• "오버플로 : 숨겨진"스타일을 부모 요소에 추가하십시오
<div id = "parent"style = "오버플로 : 숨겨진"> <div id = "floatdom"style = "float : 왼쪽; 너비 : 300px; 높이 : 300px;"> </div>
이러한 방식으로 구조적 및 의미 론적 문제는 없으며 코드의 양은 매우 작습니다. 그러나 컨텐츠가 증가하면 컨텐츠가 자동으로 포장되지 않고 컨텐츠가 숨겨지고 오버플 로링 해야하는 요소를 표시 할 수 없습니다.
• 사용 : 의사 요소 후
<스타일 유형 = "text/css"> .clearfix : {content : "."; 디스플레이 : 블록; 높이 : 0; 가시성 : 숨겨진; Clear : 둘 다; } .ClearFix { *Zoom : 1; } </style> <div id = "parent"> <div id = "floatdom"style = "float : 왼쪽; 너비 : 300px;이 방법을 사용하면 대상 요소에 클래스를 추가하면 현재 가장 일반적으로 사용되는 방법입니다.
참조
iyunlu.com/view/css-xht
3. 상대 레이아웃과 절대 레이아웃의 차이
상대 레이아웃과 절대 레이아웃의 가장 중요한 차이점은 문서 흐름과 분리되어 있는지 여부입니다.
상대 레이아웃은 문서 흐름과 분리되지 않습니다. 즉, 요소의 상대 레이아웃을 설정 한 후에 문서 흐름은 여전히 원래 위치를 유지합니다. 상단 및 왼쪽과 같은 속성을 설정하면 원래 위치에 비해 오프셋을 설정할 수 있습니다.
절대 레이아웃은 문서 흐름과 분리됩니다. 즉, 문서 흐름의 요소는 절대 레이아웃 요소의 존재를 알지 못합니다. 절대 레이아웃의 위치는 부모 요소의 상대 레이아웃 또는 절대 레이아웃을 갖는 요소와 관련이 있습니다. 존재하지 않으면 신체 레이아웃과 관련이 있습니다.
4 박스 모델
박스 모델은 컨텐츠 (내용), 패딩 (내부 마진), 테두리 (경계) 및 마진 (외부 마진)을 포함한 요소의 디스플레이 형식을 정의합니다. 현재 두 가지 박스 모델 표준이 있습니다. 하나는 W3C 표준 박스 모델이며, 다른 하나는 Microsoft의 자체 표준을 채택하는 IE 박스 모델입니다.
이 두 박스 모델의 차이점은 주로 요소 폭을 계산하는 데 있습니다. 표준 모드에서 CSS에 정의 된 너비는 내용의 너비, 페이지의 전체 요소가 차지하는 너비, 계산 공식은 다음과 같습니다.
코드 사본은 다음과 같습니다.
dom_width = 너비 + 패딩 + 테두리 + 여백
IE 박스 모델에서 CSS에 정의 된 너비는 Content + Padding + Border입니다. 따라서 IE 박스 모델에서 페이지의 전체 요소가 차지하는 너비는 (높이와 동일)입니다.
코드 사본은 다음과 같습니다.
dom_width = 너비 + 마진
CSS3에서는 box-sizing 사용하여 두 개의 박스 모델이 유지됩니다. box-sizing: content-box (기본값)를 설정하면 W3C 표준 박스 모델을 채택합니다. box-sizing:border-box 설정하면 IE 박스 모델을 사용합니다.
5 CSS 재설정 (재설정)
각 브라우저에는 함께 제공되는 스타일이 있으며 함께 제공되는 스타일은 종종 각 브라우저마다 다르므로 레이아웃에 약간의 불편 함을 가져옵니다. 따라서 실제로 브라우저의 CSS 스타일, 즉 CSS 재설정을 "지우기"해야합니다. 가장 간단한 재설정 코드는 다음과 같습니다.
*{마진 : 0; 패딩 : 0;}이 방법은 간단하지만 Div 및 Li와 같은 많은 요소에는 기본적으로 마진이나 패딩 스타일이 없기 때문에 너무 많은 중복성을 유발할 수 있기 때문에 너무 "폭력적"입니다. 귀하의 요구에 따라 재설정 코드를 작성하는 것이 더 권장되는 방법입니다.
참조:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS 해킹
다른 브라우저마다 CSS에 대한 구문 분석 및 지원이 다르므로 다른 브라우저에 동일한 CSS 코드가 표시됩니다. 이를 위해서는 CSS 해킹이 다른 브라우저의 호환성 문제를 해결해야합니다. 다른 브라우저에 대해 다른 스타일을 작성하는이 프로세스를 CSS Hack이라고합니다.
CSS 해킹에는 몇 가지 일반적인 형태가 있습니다.
• 속성 해킹
예를 들어, IE6은 _width 와 *width 인식 할 수 있지만 IE7에서는 *width 인식 할 수 있지만 _width 인식 할 수는 없지만 Firefox에서는 인식되지 않습니다.
• 문자 해킹을 선택하십시오
예를 들어, ie6은 *html .class{} 인식 할 수 있고, ie7은 *+html .class{} 또는 *:first-child+html .class{} 인식 할 수 있습니다.
• 조건 해킹
IE 조건부 주석은 IE5 이후 Microsoft가 제공하는 비표준 논리적 진술입니다. 예를 들어, 모든 IES의 경우 :
<! [If]> <! 코드> <! [endif]>
IE6 이하의 경우 :
<!
이러한 유형의 해킹은 CSS에도 적용될뿐만 아니라 판단 진술서에 작성된 모든 코드에도 적용됩니다.
참조
//www.vevb.com/css/226888.html
7 우아한 열화와 진보적 인 향상
점진적 향상은 가장 기본적인 기능을 보장하기 위해 저급 브라우저 용 페이지를 구축 한 다음 더 나은 사용자 경험을 달성하기 위해 고급 브라우저의 효과, 상호 작용 및 기타 개선 및 추가 기능을 개선하는 것을 말합니다.
우아한 다운 그레이드는 처음부터 완전한 기능을 구축 한 다음 더 낮은 버전 브라우저와 호환됩니다.
두 가지의 차이점은 우아한 다운 그레이드가 복잡한 현 상태로 시작하여 사용자 경험의 공급을 줄이려고 시도하는 반면, 점진적인 향상은 매우 기본적이고 기능적인 버전으로 시작하여 미래의 환경의 요구를 충족시키기 위해 지속적으로 확장된다는 것입니다. 열화 (기능적 붕괴)는 되돌아 보는 것을 의미합니다. 점진적인 향상은 기초가 안전한 지역에 있음을 보장하면서 기대하는 것을 의미합니다.
8 브라우저 호환성 문제에 대해 알려주십시오
• 다른 브라우저에 표시되는 내부 마진과 외부 마진은 다릅니다. 예를 들어, UL 태그는 기본적으로 Firefox에 패딩 값이 있고 IE에서만 마진 만 값을 갖습니다.
CSS 재설정 사용 (제 5 조 참조)
• IE6의 이중 마진 버그 인 마진은 원래 블록 레벨 요소가 떠 다니면 10px이지만 IE는이를 20px로 해석합니다.
블록 레벨 요소 디스플레이를 인라인으로 설정하십시오
• Min-Height는 IE6에서 지원되지 않습니다
Min-Height의 기능은 컨테이너에 콘텐츠가 적을 때 최소 높이를 유지하여 레이아웃 또는 UI 설계 효과를 파괴하지 않도록하는 것입니다. 컨테이너의 내용이 증가하면 컨테이너가 자동으로 늘어서 컨텐츠의 변경에 적응할 수 있습니다.
이것은 다음과 같이 해결할 수 있습니다.
#TARGETDOM {배경 : #CCC; Min-Height : 100px; 높이 : 자동! 중요; 높이 : 100px; 오버플로 : 가시; }• 표준 이벤트 바인딩에서 바인딩 이벤트의 메소드 기능은 addeventListener이고 IE는 첨부 이벤트를 사용합니다.
조건부 판단을 통해 두 가지 바인딩 진술을 작성하거나 jQuery와 같은 웹 프레임 워크 라이브러리를 사용하여 바인딩하십시오.
• 표준 브라우저는 이벤트 캡처를 채택하고 IE는 이벤트 버블 메커니즘을 채택합니다.
나중에 표준은 버블이 더 합리적이라고 믿었고 세 번째 매개 변수를 사용하여 addeventListener가 두 가지 메커니즘과 호환되도록 설정했으며 이벤트 버블은 기본값이었습니다.
• 이벤트 처리의 이벤트 속성은 표준 브라우저의 이벤트 속성과 다릅니다.
표준 브라우저는 매개 변수로 가져오고 즉, Window.event에서 얻습니다. 대상 요소는 e.srcelement입니다. 표준 브라우저는 E.Target입니다.
Part2 기타
1 일반적으로 사용되는 HTTP 상태 코드를 이해합니다
200 OK 모든 것이 괜찮습니다. GET 및 POST 요청에 대한 응답 문서는 다음과 같습니다.
201 생성 서버가 문서를 작성했으며 위치 헤더는 URL을 제공합니다.
202는 요청이 수락되었지만 처리는 완료되지 않았다.
304 수정되지 않음 클라이언트는 문서를 버퍼링하고 조건부 요청을 발행합니다 (일반적으로 클라이언트가 지정된 날짜보다 문서 만 업데이트하려는 경우). 서버는 원래 버퍼링 된 문서를 계속 사용할 수 있다고 고객에게 알려줍니다.
400 불량 요청 요청에서 구문 오류가 발생했습니다.
404 지정된 위치에서 자원을 찾을 수 없습니다. 이것은 또한 일반적으로 사용되는 응답입니다.
405 메소드가 허용되지 않음 요청 메소드 (Get, Post, Head, Delete, Put, Trace 등)는 지정된 리소스에 적용되지 않습니다. (HTTP 1.1 용 신규)
500 내부 서버 오류 서버에서 예기치 않은 상황이 발생했으며 고객의 요청을 완료 할 수 없었습니다.
502 나쁜 게이트웨이 서버가 게이트웨이 또는 프록시 역할을 할 때 다음 서버에 액세스하도록 요청을 완료하기 위해 서버는 불법 답변을 반환합니다.
2 개의 필기 Ajax 요청
// IE5 및 IE6 IF (wind // 사용 가능한 최신 ActiveX 객체} catch (e1) {try {return new ActiveXobject ( "msxml2.xmlhttp.3.0"); // 불가능하고, 이전 버전} catch (e2) {Throw new Error ( "xmlhttprequest가 지원되지 않습니다"); }}}}}} // 요청 함수 xhrget (url, 콜백) {var request = new xmlhttprequest (); request.open ( 'get', url, true); request.onreadyStateChange = function () {if (reques.readystate == 4 && request.status == 200) {Callback && Callback (request.ResponSetext); }}; request.send (null);} // 사후 요청 함수 xhrpost (url, data, callback) {var request = new xmlhttprequest (); request.open ( 'post', url, true); request.setRequestHeader ( 'content-type', 'application/json'); request.onreadyStateChange = function () {if (reques.readystate === 4 && request.status == 200) {Callback && 콜백 (request); }}; request.send (json.stringfy (data));}이것은 xmlhttprequest의 전통적인 사용입니다. xmlhttprequest 레벨 2는 많은 새로운 방법을 제안하며, 우리가 자주 언급 한 CORS는이 방법에서도 나옵니다.
xhr2 권장 xmlhttprequest 레벨 2 사용자 안내서에 대한 자세한 내용
3 가지 크로스 도메인 문제
페이지에서 Ajax를 통해 다른 서버의 데이터를 요청하면 클라이언트는 브라우저의 JavaScript에 대한 상 동성 정책으로 인해 도메인 간 문제가 발생합니다. 소위 동일한 원래 정책은 동일한 소스 (동일한 도메인 이름, 포트 번호, 프로토콜)에서만 리소스를 요청할 수있는 스크립트를 나타냅니다.
위의 xmlhttprequest에서 요청한 서비스 주소가 현재 파일과 다르면 브라우저에 다음 오류가 나타납니다.
그렇다면 이런 종류의 크로스 도메인 문제를 해결하는 방법은 무엇입니까?
(1) CORS를 사용하는 크로스 도메인
"Cross-Origin Resource Sharing, CORS는 짧게). CORS는 XHR2에서 확장 할 수있는 기능입니다. 사용 방법은 매우 간단합니다. 서버 측에서 설정하십시오.
헤더 세트 액세스 제어-홀로-오리진 *
이 설정은 모든 도메인 이름에 대한 크로스 도메인 요청을 수락하거나 특정 URL을 지정하거나 도메인 이름을 제한 할 수도 있습니다.
헤더 세트 Access-control-allow-origin http://www.test.com
그러나이 접근법의 한계는 클라이언트가 IT와 서버가 관련 설정을 수행하도록 지원해야한다는 것입니다. 둘 다 만족되면 CORS를 통한 교차 도메인은 모든 유형의 HTTP 요청을 지원할뿐만 아니라 일반 XMLHTTPREQUEST를 사용하여 요청을 시작하고 데이터를 얻을 수 있으며, 이는 JSONP보다 오류 처리가 더 좋습니다.
(2) JSONP를 사용하여 도약을 달성하십시오
구형 브라우저의 경우 CORS를 지원하지 않으므로 Cross-Domain에 JSONP를 사용하는 것도 JSONP를 사용하는 일반적인 방법입니다.
웹 페이지에서 <cript> 요소의 SRC 사양을 통해 대상 스크립트를로드 할 때 동일한 원인 정책의 영향을받지 않으므로 다른 서버의 데이터를 요청하는 데 사용할 수 있습니다. <cript> 요소를 Ajax 전송으로 사용하는이 기술을 JSONP라고합니다.
JSONP 구현 원리는 다음과 같습니다.
함수 getJsonp (url, 콜백) {var funcName = getUniqueName (); // 타임 스탬프를 사용하거나 자동 점수 카운터를 참조하여 고유 한 함수 이름 URL + = "? 콜백 =" + funcName; // URL var script = document.createElement ( 'script')에 함수 이름을 매개 변수로 추가합니다. // 스크립트 태그를 동적으로 빌드 // 콜백 함수 getJsonp [funcName] = function (응답) {try {콜백 (응답); // 프로세스 응답 데이터} 마지막으로 {// 콜백 함수 또는 응답이 오류가 발생하더라도 동적으로 추가 된 컨텐츠를 지우십시오 getJsonp [funcName]; script.parentnode.removechild (scipt); }} // 트리거 http request script.src = url; document.body.appendChild (스크립트); }JSONP에는 또한 몇 가지 단점이 있습니다. 우선, JSONP는 Get을 지원하지만 포스트 메소드를 지원하지 않습니다. 또한 ajax 요청은 <cript> 요소를 사용하여 사용되므로 웹 페이지는 원격 서버에서 보낸 JavaScript 코드를 실행할 수 있습니다. 따라서이 기술은 신뢰하지 않는 서버에 사용해서는 안됩니다.
(3) Window.name을 크로스 도메인으로 사용하십시오
창 객체에는 이름 속성이 있습니다. 즉 기능이 있습니다. Window.Name은 창으로로드 된 모든 페이지에 지속되며 새 페이지의로드로 인해 재설정되지 않습니다. 따라서 Window.Name이있는 다른 소스의 페이지에서 데이터를 전달할 수 있습니다.
www.a.com/a.html이 www.b.com/b.html에서 데이터를 얻으려면 다음과 같습니다.
a) b.html의 Window.name에 데이터를 저장하십시오
b) ID가 프록시로 설정되고 SRC가 A.HTML과 동일한 원점으로 설정되어 있다고 가정 할 때 A.HTML에 숨겨진 (디스플레이 : 없음) IFRAME 태그를 빌드하십시오.
c) 다음 코드를 통해 A.HTML에서 데이터를 가져옵니다
var proxy = document.getElementById ( 'proxy'); proxy.onload = function () {var data = proxy.contentWindow.name; // 데이터 get}}d) 관련 요소를 제거하십시오
(4) Window.postMessage를 사용하여 도메인을 교차하십시오
이 방법은 비교적 간단합니다. 페이지 A에서 windowobj.postmessage (메시지, targetorigin)를 사용하여 대상 페이지에 정보를 보내고 페이지 B 페이지에서 메시지 이벤트를 듣게하여 정보를 얻습니다. 이 방법은 HTML5의 새로운 방법이며 IE6 및 IE7과 같은 이전 브라우저에는 사용할 수 없습니다.
4 웹 사이트 성과를 향상시키는 방법
블로거의 다른 두 기사를 참조하십시오.
웹 사이트 성능 향상에 대한 몇 가지 제안
웹 사이트 성능 향상에 대한 몇 가지 제안 2
새로운 콘텐츠가 지속적으로 업데이트됩니다 ...
블로그 저자 : Vicfeel