CSS3 위치 지정 및 부동 소개
- 不言원래의
- 2018-07-02 10:51:461674검색
이 글에서는 주로 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
2. 여러 개의 플로팅 블록이 함께 있을 때 항상 플로팅 방향이 동일한 가장 가까운 블록을 찾아 위치를 결정합니다. 강제로 라인을 변경해야 하는 경우 가장 가까운 요소의 높이를 기준으로 새 라인을 시작합니다.
clear 속성 : 플로팅 속성 제거(상속 포함)
위 해당 의미와 동일
플로트를 클리어해야 하는 상황 :
하위 라벨이 플로팅된 후, 상위 라벨은 확장될 수 없으므로 부동소수점을 지워야 합니다.
1.clear:both height:0; :hidden; 2.overflow:hidden; 트리거 레이아웃은 종종 콘텐츠를 지우는 데 사용됩니다. Floating;
3.after pseudo-object: set.aa:after {content:”.”}
.aa {display:inline-block ;}
현재 객체에 대해 ie6을 트리거하는 방법 찾기 레이아웃 렌더링 메커니즘은 운 좋게도 많은 버그를 해결했으며, Zoom: 1이 트리거될 수 있습니다! ! !
inline-block은 내부 블록과 외부 라인을 위한 것입니다.
5.position:absolute; 부동을 지웁니다.
display: 블록은 블록 요소로 표시됩니다. display: none 콘텐츠가 사라지고 공간을 차지하지 않습니다.
display: inline은 IE6의 이중 버그를 해결할 수 있는 인라인 요소로 표시됩니다.
display: inline-block은 내부 블록과 외부 행을 위한 것입니다.
visibility: 없음 숨겨져 있지만 여전히 공간을 차지하고 레이아웃에 영향을 미칩니다.
위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트에 주목하세요!
관련 권장 사항:
CSS 부동 소수점 및 위치 분석
css3를 사용하여 위쪽 및 아래쪽 가장자리 없이 목록 구분선을 설정하는 방법
위 내용은 CSS3 위치 지정 및 부동 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!