CSS 부동 속성과 위치 비교:절대

많은 사람들이 이 질문을 한다고 생각합니다. 페이지 레이아웃, 부동 또는 위치:절대 중 어느 것을 사용하는 것이 더 낫습니까? 레이아웃이기 때문에 float를 사용하는 것이 더 좋습니다. 이 플로트는 지워질 수 있으며 일반적으로 전체 레이아웃에 영향을 미치지 않습니다. 위치, 위치 지정은 제한되지 않습니다. 이는 레이아웃이 아닌 것으로 보입니다. 일반적으로 특수한 위치 지정이나 레이어 플로팅을 수행할 때 사용하는 것을 고려해 볼 수 있습니다. 일반적인 페이지 레이아웃의 경우 FLOAT

1.float 속성을 사용하여 요소가 부동하는 방향을 정의하는 것이 좋습니다. 역사적으로 이 속성은 항상 이미지에 적용되어 텍스트가 이미지 주위를 둘러싸도록 했지만 CSS에서는 모든 요소가 부동될 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다. p는 그 자체로 한 줄을 차지하는 전형적인 블록 수준의 요소이다.

먼저 가장 기본적인 블록레벨 요소들이 어떻게 배열되어 있는지 살펴보겠습니다. html 코드에서 다음 스타일은 이를 기반으로 합니다.

코드 복사 코드는 다음과 같습니다

                                  class="box2 >

css 코드:


코드 복사
코드는 다음과 같습니다.


.boxBg{
여백: 0 자동;

너비:500px;

높이:200px;

테두리:2px 솔리드 #ccc

} .box1{ 너비:100px;

높이:50px;

배경 색상: 빨간색
}
.box2{
너비:100px;
높이:50px;
배경색: 파란색
}
.box3{
너비:100px;
높이:50px;
배경색: 녹색
}


실행 결과:




p는 블록 수준 요소이므로 상자가 수직으로 배열됩니다. 실제 작업에서는 프레임을 수평으로 배열해야 하는 경우가 많습니다. 이를 수행하는 방법에는 두 가지가 있습니다. 첫 번째 항목은 다음과 같이 표시됩니다:inlin-block;


코드 복사

코드는 다음과 같습니다:

.boxBg{ margin: 0 auto;

width:500px;

height:200px;

border:2px solid #ccc

} .box1{ 너비:100px;

높이:50px;

배경색: 빨간색;
디스플레이:inline-block
}
.box2{
너비:100px;
높이:50px;
배경- 색상:파란색;
      디스플레이:inline-block
                                                                                디스플레이:인라인 -차단             .box3{               너비: 100px;                                                                                                        디스플레이: 인라인 블록    


중간에 공백이 생기는 근본적인 이유는 요소 사이의 공백에서 비롯됩니다. , 따라서 상위 요소에 fone-size 크기를 설정하면 공백의 크기를 조정할 수 있습니다.


코드 복사
코드는 다음과 같습니다:


.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
글꼴 크기:34px;
}

글꼴 크기:34px를 변경하면 간격이 더 넓어집니다.

실행 결과:

마찬가지로 공백을 제거하려면 코드를 복사해야 합니다.

.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:0
}

실행 결과:

너무 편리합니다 원하는 레이아웃을 얻은 후에는 상자 안의 텍스트도 사라졌으며 이는 텍스트의 크기가 간격에 영향을 미친다는 것도 증명합니다. 하위 요소에서 재설정하면 됩니다. 물론 오늘의 초점은 그게 아니다. 동일한 효과 float:left도 쉽게 얻을 수 있습니다. ​}

.box1{

너비:100px; 높이:50px; 배경색: 빨간색;

부동:왼쪽

}
.box2{
너비:100px;
높이:50px;
배경색: 파란색;
float:left
}
.box3{
width:100px;
height:50px;
background-color:green;
float:left
}



실행 결과:




요소 부동 소수점을 추가한 후 부동 요소는 상위 요소의 테두리 또는 다른 부동 요소의 테두리에 닿은 직후에 표시됩니다. 예를 들어 다음 예에서는 부동 요소의 전체 너비가 상위 요소보다 크면 줄이 줄바꿈됩니다. 줄이 줄바꿈되면 이전 부동 소수점이 발견되어 그 뒤에 표시됩니다.


코드를 복사하세요.
코드는 다음과 같습니다:

실행 결과 :

이때 상자 3은 상자 1을 따르는 것이 아니라 새 줄에서 시작합니다(1과 2 사이의 간격은 여기서 논의하지 않습니다). 이 역시 inline-block과 float를 사용한 판단입니다. 모듈 너비가 다르면 float 조판을 사용하세요. 결과가 예상한 결과와 다를 수 있으므로 너비와 높이가 변경되지 않은 경우 float를 사용하는 것이 좋습니다. 경우 특정 레이아웃을 살펴보고 적절하게 사용해야 합니다. 속성.

아래 코드는 수정된 부분만 올리고 나머지는 변경되지 않고 구조도 그대로 유지됩니다.

box3의 float: left를 제거하면 결과는 어떻게 되나요? 이해에 따르면 부동 요소는 공간을 차지하지 않습니다. 즉, 프레임 3은 프레임 1을 무시하고 프레임 2는 상위 요소의 테두리 바로 옆에 표시됩니다. 즉, 프레임 1이 프레임 3을 덮습니다. 결과?

코드를 복사하세요 코드는 다음과 같습니다:

.box3{
width:100px;
height:50px;
background-color:green;
}

실행 결과:

이유 상자 3 텍스트 상자 1에 포함되지 않고 아래에 표시됩니까? 그럼 코드를 보세요, 사진을 보세요

코드를 복사하세요 코드는 다음과 같습니다:

.box3{
height:50px;
background-color:green;
}

실행 결과:

차이가 보이시죠? 없어졌나요? 예. box3은 너비를 정의하지 않습니다. 너비를 정의하지 않으면 기본 너비는 상위 요소의 너비가 됩니다. 즉, 이 때 부동 요소는 부동 요소가 아닌 요소를 덮습니다. , 상자 3 앞의 200px 너비가 플로팅 요소로 채워져 있습니다. 왜 텍스트가 덮여 있지 않고 텍스트가 플로팅 요소 뒤에 200px로 압착되어 있습니까?

플로팅 요소는 블록의 공간을 차지하지 않으므로 상자 3은 상위 컨테이너 너비 500px의 100%이지만 플로팅 요소는 다른 공간, 즉 일반 용어로는 공간을 차지합니다. 텍스트가 차지했습니다.

이것이 플로트된 후 텍스트가 이미지 주위를 자동으로 감싸는 이유이기도 합니다. 플로팅 요소는 블록 수준 공간을 차지하지 않지만 블록 수준 요소 내의 텍스트 및 인라인 요소에 영향을 미칩니다.

이 경우 세 상자의 너비를 동일하게 하려면 상자 3의 너비:300px;

코드는 다음과 같습니다.

.box3{
너비 :300px;
height:50px;
background -color:green;
}

실행 결과:

이제 기본적인 플로팅에 대한 이야기를 마쳤으니 플로팅이 사용하기 쉽지만 문제점에 대해 이야기해 보겠습니다. , 실제로 많은 문제가 발생할 것입니다. 예:

실행 결과:

매우 일반적인 질문 , 정상적인 상황에서. 회색 배경은 프레임만큼 높아야 하는데 현실은 항상 만족스럽지 못해요 :)

이런 상황이 발생하는 이유는 플로팅(Floating) 요소가 여러 곳에서 언급되고 있기 때문입니다. 일반적인 흐름에서 벗어나 일반 요소는 플로팅 요소로 간주되어 존재하지 않으므로 여기에서는 배경이 열리지 않습니다. 그러나 주의 깊게 읽는 학생들은 위에서 플로팅 요소가 영향을 미치지 않는다는 점을 기억할 것입니다. 블록 프레임이지만 행에 영향을 미칩니다. 블록 수준 요소이든 인라인 요소이든 상자, 즉 텍스트 또는 인라인 요소는 일반 흐름에 속합니다. 플로팅 요소가 일반 흐름에서 벗어나는 이유는 무엇입니까? 라인 박스에 영향을 미치나요? 사실 이런 개념적인 부분까지 깊게 고민할 필요는 없을 것 같아요. 내가 이해한 바에 따르면, 플로팅 요소는 블록 수준 요소와 동일한 수평 공간이 아니라 텍스트 인라인 요소와 동일한 공간에 있으므로 여기의 테두리는 배경 위에 있는 것과 동일하므로 영향을 미치지 않습니다. 일반적으로 부동 요소 지우기라고 하는 것은 부동 요소의 부동 속성을 제거하는 것이 아니라 주위에 부동 요소가 없도록 부동 요소를 지우는 것을 의미합니다. 두 번째 행으로 이동하면 상자 2에서clear:right;를 사용할 수 없습니다. 상자 3에서clear:left;

코드를 복사해야 합니다. 코드는 다음과 같습니다.

.box3{
float:left;
width:100px;
height:50px;
background-color:green;
clear:left

실행 결과:

이해했습니다. 다음은 합시다! 배경과 프레임의 높이를 동일하게 만드는 방법에 대해 이야기합니다. 첫 번째 방법: 가장 직접적인 방법은 배경 높이를 프레임과 동일하게 설정하는 것입니다. 물론 이것이 핵심은 아닙니다. 플로트. 먼저 예제를 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

                                                                      > red;
}
.box2{
float:left;
너비:100p x;
높이: 50px;
background-color:blue;
}
.box3{
float:left;
너비:100px;
높이: 50px;
배경색:녹색;
}
.clear{
너비:1 00px;
높이:50px;
}



< /p> ;
                                                                                               ,  ~                     

실행 결과:




위의 결과는 바로 추가된 것이 분명합니다. 동일한 높이의 빈 요소입니다. 이 요소는 플로팅되지 않으므로 배경과 동일하므로 배경이 늘어납니다. 사실 클리어 플로트를 사용하는 원리는 이와 같고, 배경도 열어보려고 합니다. 위의 클리어의 너비와 높이를 제거하고 클리어 속성을 추가합니다


코드를 복사하세요
코드는 다음과 같습니다. 다음:


.clear{
지우기: 왼쪽;
}


실행 결과:

아직 명확하지 않을 수 있습니다. 지우기 상자에 몇 단어를 추가해 보세요

실행 결과:

clear는clear:left를 사용하기 때문에 요약하자면 앞서 언급한 것처럼 Clear의 왼쪽에는 부동 요소가 있을 수 없으므로 새 줄에 표시해야 합니다. 이런 식으로 사진의 결과가 실제로는 하나의 요소에 의해 배경이 떠받치고 있다는 것을 알 수 있습니다. 물론, 이를 달성하는 다른 방법도 있습니다. 여기서 가장 중요한 것은 플로팅을 명확하게 설명하는 것입니다. :)

위 내용은 CSS 부동 속성과 위치 비교:절대의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!