CSS3 포지셔닝 및 플로팅 분석-CSS 튜토리얼-php.cn

CSS3 포지셔닝 및 플로팅 분석

不言

풀어 주다： 2018-06-20 17:44:14

원래의

2619명이 탐색했습니다.

이 글에서는 주로 CSS3 위치 지정 및 플로팅의 개념을 자세히 소개하고 CSS3 위치 지정 및 플로팅 사용을 설명하는 예제 코드를 소개합니다. 관심 있는 친구들은 참고할 수 있습니다.

이 글에서는 CSS3 위치 지정 및 플로팅의 기본 사항을 공유합니다. 구체적인 내용은 다음과 같습니다

1. CSS 위치 지정:

페이지 요소 위치 변경

2. CSS 위치 지정 메커니즘:

일반 흐름: Floating:

절대 레이아웃:

3. CSS 위치 지정 속성:

위치는 요소를 정적, 상대, 절대 또는 고정 위치에 배치합니다. top /left/right/bottom 요소의 오프셋 up/left/right/bottom overflow는 요소가 해당 영역을 오버플로할 때 발생하는 상황을 설정합니다. clip은 요소 표시의 모양을 설정합니다.

vertical-align은 요소 표시의 정렬을 설정합니다.

z -index는 요소의 스택 순서를 설정합니다/요소의 스택 순서를 설정하는 데 사용됩니다. 클수록 더 높습니다./

위치 속성

정적 정적(기본값)

상대 상대 레이아웃(기본값)

절대 절대 레이아웃(및 기타 태그는 관련 없음) fixed 고정(페이지 스크롤과 함께 이동하지 않음)
예제 코드:

<body>   
    <p id="position1"></p>   
    <p id="position2"></p>   
    <script>   
        for (var i=0;i<100;i++){   
            document.write(i+"<br/>")   
        }   
    </script>   
</body>   
#position1{   
    width: 100px;   
    height: 100px;   
    background-color: blue;   
    position: relative;   
    left: 20px;   
    top: 20px;   
    /*用来设置元素的堆叠顺序，越大越在上方*/
    z-index: 2;   
}#position2{   
    width: 100px;   
    height: 100px;   
    background-color: red;   
    position: relative;   
    left: 30px;   
    top: 10px;   
    z-index: 1;   
}

로그인 후 복사

2.Floating

float 속성에 사용 가능한 값: 왼쪽/오른쪽/없음/ 상속: 왼쪽 또는 오른쪽, 부동 아님, 부모로부터 상속됨. *float

1. 플로팅한 후 일반적인 흐름에서 벗어나 플로팅 흐름으로 배열합니다. 모든 요소는 블록 요소로 표시되며 너비와 높이를 설정할 수 있으며 콘텐츠는 너비를 확장합니다.

2. 여러 개의 플로팅 블록이 함께 있을 때 항상 플로팅 방향이 동일한 가장 가까운 블록을 찾아 위치를 결정합니다. 강제로 라인을 변경해야 하는 경우 가장 가까운 요소의 높이를 기준으로 새 라인을 시작합니다.
clear 속성 : 플로팅 속성 제거(상속 포함)
위 해당 의미와 동일

플로트를 클리어해야 하는 상황 :

하위 라벨이 플로팅된 후, 상위 라벨은 확장될 수 없으므로 플로트를 지워야 합니다.

이전에 플로팅된 요소의 영향을 받지 않으려면 새로 추가된 태그를 지워야 합니다.

1.clear:both; height:0; 2.overflow:hidden; 트리거 레이아웃은 콘텐츠를 지우는 데 자주 사용됩니다. Floating; 3.after pseudo-object: set

.aa:after {content:”.”}

.aa {display:inline-block;}
. aa {display:block;}

현재 객체에 대해 ie6을 트리거하는 방법 찾기 레이아웃 렌더링 메커니즘은 운 좋게도 많은 버그를 해결하고, Zoom: 1이 트리거될 수 있습니다! ! !

inline-block은 내부 블록과 외부 라인을 위한 것입니다.
5.position:absolute; 부동을 지웁니다.

display: 블록은 블록 요소로 표시됩니다. 디스플레이: 내용이 사라지지 않으며 공간을 차지하지 않습니다.
display: inline은 IE6의 이중 버그를 해결할 수 있는 인라인 요소로 표시됩니다.
display: inline-block은 내부 블록과 외부 행을 위한 것입니다.

visibility

: 없음 숨겨져 있지만 여전히 공간을 차지하고 레이아웃에 영향을 미칩니다.위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

css에서 float 붕괴를 지우는 방법에 대하여

위 내용은 CSS3 포지셔닝 및 플로팅 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!