HTML 및 CSS 포지셔닝 시스템의 개요

위치 시스템은 무엇입니까?

Buter 세 종류 : 일정한 흐름 (정상 흐름), 플로트 (플로트), 절대 위치 (절대 좌표).

1. 일반적인 흐름도는 각 행에서 좌에서 우로 직관적 정상 스트림 소자 판정 이해는 주로 행함으로써 하향식 행의 형태에있어서, HTML 과정에서 위치에 따라 순서대로 배열된다.

2. 부동 : 정상 스트림에 대하여 우려하고으로는 정상 스트림 위에 뜬다. 문서 흐름 요소로 제조 될 수있는 지정된 방향에 따라 이동했다.

3. 절대 위치 (절대 좌표)

a.static (정상 스트림)의 기본이고, 위치 결정 요소는 일반적으로 정적 인 위치이다.

b.relative (상대 위치)의 상대 요소가되지 않습니다 자체가 위치 이름과 상대적인 위치에 대해 왼쪽에서 오른쪽, 위쪽, 아래쪽 위치 결정 후, 원래의 위치에 따라 이동 소자, 위치의 사용이 주목되고 문서로부터 흘러, 소자 자체에 의해 점유 된 위치를 유지한다.

절대 등록 스트림에서 문서이다; (절대) c.absolute 위치는 그 위치가 더 일반적으로 사용되는 배열은 스테이지의 위치에 가장 가까운 위치 부모 상대적인 위치 (상위)을 생성 시키도록 배치된다 원래 위치를 차지하지 않는 요소를 재배치 한 후.

<스타일> 
        .relative { 
            폭 : 100 픽셀; 
            높이 : 100 픽셀; 
            위치 : 상대; 
            국경 : 2 픽셀 빨간색으로; 
        } 
        .absolute { 
            폭 : 50 픽셀; 
            높이 : 50 픽셀; 
            위치 : 절대; 
            상단 : 50 픽셀; 
            왼쪽 : 50 픽셀; 
            국경 : 2 픽셀 빨간색으로; 
        } 
    </ 스타일> 
</ head> 
<body> 
    <div 클래스 = "상대"> </ div> 
    <div 클래스 = "절대"> </ div> 
</ BODY> 
</ HTML>

  

d.fixed (고정 위치) : 브라우저 창의 위치에 대한 절대 위치 요소를 발생시킨다. 다른 특징으로 절대 절대 위치.

<스타일> 
        .test { 
            신장 1000px; 
            폭 : 50; 
            경계 왼쪽 : 5px 적색 고체; 
        } 
        .test1 { 
            총수 : 고정, 
            좌 : 100 픽셀, 
            높이 : 88 픽셀, 
            폭 : 100 픽셀, 
            위쪽 : 64PX; 
            테두리 : 솔리드 2 픽셀 ; 
        } 
    </ 스타일> 
</ 머리> 
<BODY> 
    <DIV> 
        <DIV 클래스 = "테스트"> 일반 스트림 </ DIV> 
        <DIV 클래스 = "TEST1"> 부동 상자 </ DIV> 
</ DIV> 

공개 페이지 그들의 명백한 차이 후, 부유 물질의 함량은 상기 슬라이드 바가 위치에서 롤러에 고정되다.

  

추천

출처www.cnblogs.com/youwei716/p/10992402.html