박스 모델
개념 : HTML 문서 요소 요소에 CSS는 요소는 HTML 문서의 레이아웃 (요소 상자)에 공간을 차지 직사각형 상자를 생성 할 경우, 상자가 말했다
관련 속성 상자 (컨텐츠 내용, 작성 패딩, 국경 국경, 경계 마진)의 일련의 정의, 각 제어 상자와 HTML 문서는 구조의 효과를 제시
테두리 : 5px 고체 / 대쉬 점선 / 쇄선 도트 / 더블 레인 번호 444; 요소의 원래 폭으로 고 부가가치
패딩 : 값은 변화의 요소를 유지하려는 경우, 우리는 측면을 조정해야 원래 요소의 측면에 추가
위 20 픽셀 {} 20 픽셀 아래로
Edmundo :
{0} 자동 센터링 요소 인접한 수직 방향 중 큰 병합 형제 것이다. 아이가 부모에게 전송됩니다 여백 - 가기 아이가 있습니다, 부모 오버 플로우를 해결하려면 숨겨진
요소 유형
분류 표시 CSS는 XHTML 요소는 세 가지 유형으로 나뉜다
블록 요소 : 블록 요소, 사각형 영역으로 도시 된, 공통 DIV DL DT DD 올 UL FIELDSET H1-H6 피 형성 시간은 iframe COLGROUP의 COL 테이블 그럴 TD
일반적으로 인라인 요소와 다른 블록 요소 수용 용기로서, 일반적으로 상자라고
인라인 요소 인라인 요소 (또는 요소의 행) 일반적인 스팬 의미 i EM 강한 B
어떤 고유 형상, 폭과 높이가 콘텐츠의 폭과 높이에 의해 결정되지 정의 될 수없고, 테두리 마진 배경 패딩 때 정의 콘텐츠 제시 구형의 최소 단위는 아무 효과가 없다
변화 소자 : 요소는 인라인 블록 요소 또는 요소의 문맥을 결정하기 위해 필요한
애플릿 - 자바 애플릿
버튼, DEL에 Iframe -inline 프레임 ins- 삽입 텍스트, 사진 -지도에서 블록 물체 오브젝트 목표는 스크립트 클라이언트 측 스크립트
요소 유형 변환
디스플레이 : 상자 형 표시 소자 레이아웃이 생성 될 때에 정의
없음 :
블록 다음 디스플레이 당량 첨가 한 후 부유 요소를 사용하는 경우 : 블록 (블록 요소 기본값)
인라인 : 코드가 줄 바꿈 공간으로 해석됩니다, 폭과 높이가 지원되지 않습니다 (인라인 요소의 기본)
인라인 블록 :( 형태의 제어 버튼 이미지 IMG 기본값) 광고 블록 요소 콘텐츠 블록은 다양한 지원 통상 플로트와 갭의 각 브라우저 정의 크기, 서로 다른 인라인 동일한 행에 표시된 다른 요소 (중간 갭) 표시 높은, 및 기타 유사한 인라인
목록 항목은 : 일괄 요소 목록, 기본 값 목록이 될 수 있습니다
위치 결정 소자는 설정된
위치
정적 : 기본값, 위, 아래, 왼쪽, 오른쪽, Z- 인덱스를 무시하고 문
절대 : 제 정적 위치 이외의 부모 구성 요소에 대해 절대 위치,
상대 : 절대 기본보다 상대적 포지셔닝, 포지셔닝 정상 위치, Z- 색인
고정 : 절대 위치 요소를 창에 대해 위치
Z- 색인 : 자동은 부모 / 번호, 절대 및 상대 법을 준수
적응 폭
희망 요소는 윈도우 창 해상도에서 실행되는 다른 장치에 적응 할 수 있도록 창이나 하위 요소에 따라 달라질 수 있습니다
최소 높이 : IE6를 지원하지 않습니다,
호환성 hack1 : 최소 높이 200 픽셀; _height : 200 픽셀;
호환성 hack2 : 최소 높이 : 200 픽셀, 높이 :! 자동 중요한; 높이 : 200 픽셀;
최소 폭 : IE6를 지원하지 않습니다,
최대 폭 : IE6를 지원하지 않습니다,
최대 높이 : IE6를 지원하지 않습니다,
고도 적응
방법 : HTML 바디 {신장 : 100 %} 요소 {신장 100 %}
높이 : 자동; 자동으로 콘텐츠 기본에 따라 높이를 변경
신장 : 100 %, 상위 블록 높이에 따라 결정.
부동 부동산 연습
CSS
/ * : - 웹킷 - 스크롤 {디스플레이 : 없음} / *取消오버 플로우的默认下拉条* / * /
.v1 {플로트 : 왼쪽; 높이 : 30 픽셀, 폭 : 30 픽셀, 배경 색 : # 333;}
.v2 {높이 : 130 x 96 픽셀, 폭 : 130 x 96 픽셀, 배경 색 : # 999;}
.fa {오버 플로우 : 숨겨진; 경계 : 5px 빨간색 고체; 폭 : 1160px}
.b1 {폭 : 230px; 배경 색상 : 브라운;}
.b2 {폭 : 700 픽셀, 배경 색 : burlywood;}
.b3 {폭 : 230px; 배경 색상 : # 333;}
.b1, .b2, .b3 {높이 : 50 픽셀, 플로트 : 왼쪽}
.bottom {높이 100 픽셀, 폭 : 100 %; 배경색 : darkblue}
없음 기본 / 모두 / 좌 / 우 : 만 (PX를 사용하여), 브라우저 윈도우가 작은 경우, 블록 포장, 명확한 즉시 요소의 앞 요소 뒤에 요소의 뒷면에 영향을
높이 축소 질문 : 부모 어떠한 요소의 높이가 없으면 지탱 될 수없는
방법 A를 : 부모 요소 오버플 : 숨겨진
방법 2 : 부유 요소 분명 DIV {첨가 : 둘, 높이 : 0; 오버플 : 숨김 ( 또는 폰트 크기 : 0 IE 높이 허용 0)}
HTML
<div 클래스 = "V1"> </ div>
의 <class = "V2"div>
텍스트 주위에 배치 텍스트 배치 텍스트 배치 텍스트 영역 아래 영역에서 V2를 V1은 배경색을 볼 수있는
</ div>
<div 클래스 = " FA ">
<div 클래스 ="B1 "> </ div> <div 클래스 ="B2 "> </ div> <div 클래스 ="B3 "> </ div>
</ div>
<div 클래스 ="바닥 " > </ div>
<! - 세트 만 높이는 경우 스케일링 이미지 경우 폭과 높이 모두, 지금까지 생성 된 이미지 왜곡의 비율 ->
<IMG SRC =의 "IMG / top.jpg"폭 > "단어 이미지 로딩 실패 후"= "100 %"제목 = = ALT "그림에 프롬프트가 나타납니다이 그림을 그려"
<IMG SRC = ""너비 = "100 %">
운동 탐색
CSS
.nav {높이 : 100 픽셀, 배경 : # 111}
.nav UL {목록 스타일 : 없음; 폭 : 980 픽셀, 배경 : # 777; 여백 : 0 자동; 오버 플로우 : 숨겨진;}
.nav UL 리튬 {플로트 : 왼쪽; 보더 오른쪽 : 1 픽셀 # 999 솔리드}
.nav 상향 리 .last {보더 오른쪽 : 없음}
.nav UL 리 A를 {디스플레이 : 블록; 폭 : 139px, 높이 100 픽셀, 라인 높이 100 픽셀, 텍스트 정렬 : 센터; 텍스트 장식 : 없음}
.nav UL의 리튬 A : 가져가 {배경 : OrangeRed에}
HTML
<div 클래스 = "탐색">
<UL>
<LI> <A보기 </a>集团信息</A> </ 리>
<LI> <A보기 </a>集团信息</A> < / 리>
<LI> <A보기 </a>集团信息</A> </ 리>
<LI> <A보기 </a>集团信息</A> </ 리>
<LI> <A HREF = "#">集团信息</A> </ 리>
<LI> <A보기 </a>集团信息</A> </ 리>
<LI 클래스 = "마지막"> <A>集团信息</A> </ 리>
</ UL>
</ DIV>
운동 앵커
앵커 포인트
앵커 링크 : <div ID = "P1"> 위치 1 </ div> <a href="#p1"> 위치로 점프 1 </a>을
CSS
.imgmd {높이 500 픽셀, 폭 : 500 픽셀; 총수 : 상대}
.list {총수 : 절대 저부 : 10px는 우측 : 5px}
{플로트 .list : 왼쪽, 높이 : 30 픽셀, 폭 : 30 픽셀을, 배경 : RGBA (0, 0, 0, 0.7); 마진 오른쪽 : 5px; 텍스트 장식 : 없음; 텍스트 정렬 : 센터; 라인 - 높이 : 30 픽셀; 색상 : #fff가}
.list : 호버를 {배경 : RGBA (0,0,0,1)}
.imglist {플로우 : 숨겨진, 높이 500 픽셀, 폭 : 500 픽셀}
HTML
<div 클래스 = "imgmd">
<div 클래스 = "리스트">
<a href="#img1"> 1 </a>에
<a href="#img2"> 2 </a>를
<A HREF = "# img3 "> 3 </a>에
<a href="#img4"> 4 </a>에
</ div>
<div 클래스 ="imglist ">
<IMG SRC ="../ IMG / 1.JPG "ID = "을 img1"/>
<IMG SRC = "../ IMG / 2.JPG"ID = "IMG2"/>
<IMG SRC = "../ IMG / 3.JPG"ID = "img3"/>
<IMG SRC = "../ IMG / 4.jpg"ID = "img4"/>
</ DIV>
</ DIV>
운동 CSS 스프라이트
이미지 통합
CSS 스프라이트 나 스프라이트, CSS CSS의 스프라이트 또는 모자이크 이미지
HTTP는 Taobao에 대한 그런 큰 사이트가 필수이며, 요청의 수를 줄이기 IIS를
CSS
.cssimg {폭 : 200 픽셀, 높이 : 22 픽셀, 오버플 : 숨김,리스트 스타일 : 없음}
.cssimg 리 {플로트 : 왼쪽}
.cssimg 리 A를 {디스플레이 : 블록, 높이 : 22 픽셀, 폭 : 50 픽셀, 배경 : URL (/img/1.jpg), 텍스트 정렬 : 센터, 문자 장식 : 없음; 라인 높이 : 22 픽셀}
{배경 .p2 : URL (/img/1.jpg)를 -50px 0;}
.p3 {배경 : URL (/img/1.jpg) -100px 0}
{배경 : URL (/img/1.jpg) -150px 0;} .p4
.p2 : 호버 {배경 : URL (/ IMG ; /1.jpg) -50px -22px}
가져가 {배경 :하십시오 .p3, URL (/img/1.jpg를) -100px -22px}
.p4 : 호버를 {배경 : 홈페이지 (/img/1.jpg ) -150px -22px}
HTML
<UL 등급 = "cssimg">
<LI 클래스 = "P1"> <A보기 </a>新闻</A> </ 리>
<LI 클래스 = "P2"> <A보기 </a>新闻</A> </ 리>
<LI 클래스 = "P3"> <A보기 </a>新闻</A> </ 리>
<LI 클래스 = "P4"> <A보기 </a>新闻</A> </ 리>
</ UL>
텍스트 오버 플로우 연습
텍스트 오버 플로우
과다:
볼 : 기본적으로 내용이 정리되지 않습니다, 상자 외부 요소가있을 것입니다.
숨겨진 : 내용이 정돈되고, 나머지 내용이 표시되지 않습니다
내용이 정돈 될 것이지만, 드롭 다운 상자 : 스크롤
자동 : 내용이 정리되어있는 경우, 드롭 다운 상자가 나타납니다
inheirit : 오버 플로우 값은 부모로부터 상속
공백 : 빈 내에서 처리 요소를 설정하는 방법
정상 : 기본적으로 공백은 브라우저에 의해 무시된다
전 : 예약되어 브라우저
파라미터 nowrap : 그것은 <br을 만날 때까지 같은 줄에 계속 텍스트를 줄 바꿈하지 않는 텍스트 /> (공통)
미리 포장 : 빈 문자 시퀀스는, 법선 변경됩니다
전 라인 : 빈 문자 순서를 통합,하지만 줄 바꿈을 유지
상속 : 공백의 부모 요소를 상속
텍스트 플로우 : 문자 요소를 포함 할 때 발생하는 오버 플로우
클립 : 생략 부호를 표시하지 않습니다, 간단한 컷
줄임표 : 오버 플로우 줄임표
필요한 조건의 생략 기호를 표시하려면 숨겨진, 공백 : 오버 플로우 폭을 파라미터 nowrap을
CSS
.textul {국경 : 1 x 1 픽셀 고체 # 333;}
.textul .P1 {폭 : 100 픽셀, 텍스트 오버 플로우 : 줄임표, 공백 : 파라미터 nowrap; 국경 : 1 x 1 픽셀 고체 # 222; 오버 플로우 : 숨겨진;}
HTML
<UL 등급 = "textul">
<LI 클래스 = "P1"> <A보기 </a>新闻sfdfsffsdfsfsdf </A> </ 리>
<LI 클래스 = "P2"> <A보기 </a>新闻</A> </ 리>
<LI 클래스 = "P3"> <A보기 </a>新闻</A> </ 리>
<LI 클래스 = "P4"> <A보기 </a>新闻</A> </ 리>
</ UL>