Analisis terperinci tentang perbezaan antara atribut css float dan position:absolute_Basic Tutorial

1. Atribut apungan mentakrifkan ke arah mana elemen terapung. Dari segi sejarah, sifat ini sentiasa digunakan pada imej, menyebabkan teks membungkus imej, tetapi dalam CSS, sebarang elemen boleh diapungkan. Elemen terapung mencipta kotak peringkat blok, tanpa mengira jenis elemen itu. div ialah elemen peringkat blok biasa yang menduduki garis dengan sendirinya.

Mari kita lihat bagaimana elemen peringkat blok yang paling asas disusun. kod html, gaya berikut adalah berdasarkan ini.

Salin kod Kod adalah seperti berikut:

t;
kod css:





Salin kod


Kod adalah seperti berikut:

.boxBg{

margin: 0 auto;

lebar:500px;

tinggi:200px; sempadan:2px pepejal #ccc } .box1{ lebar:100px; tinggi:50px; latar belakang -warna:merah

}

.kotak2{
lebar:100px;
tinggi:50px;
warna latar:biru
}
.kotak3{
lebar :100px;
tinggi :50px;
warna latar belakang:hijau
}



Hasil pelaksanaan:




Memandangkan div ialah elemen peringkat blok, kotak akan disusun secara menegak. Dalam operasi sebenar, selalunya perlu menyusun bingkai secara mendatar. Terdapat dua cara untuk melakukan ini. Yang pertama ialah display:inlin-block;

Salin kod

Kod adalah seperti berikut:

.boxBg{

margin: 0 auto;

lebar:500px;

tinggi:200px; sempadan:2px pepejal #ccc } .box1{ lebar:100px; tinggi:50px; latar belakang -warna:merah;

paparan:sebaris-blok

}
.kotak2{
lebar:100px;
tinggi:50px;
latar belakang-warna:biru;
paparan :inline-block
}
.box3{
width:100px;
height:50px;
background-color:green;
display:inline-block
}



Hasil pelaksanaan:




Bagi jurang di tengah, sebab penting dikesan kembali ke ruang putih antara elemen, jadi penetapan saiz saiz fone pada elemen induk boleh melaraskan saiz ruang putih.

Salin kod

Kod adalah seperti berikut:

.boxBg{

margin: 0 auto;

lebar:500px;

tinggi:200px; sempadan:2px pepejal #ccc; saiz fon:34px;}

Selepas menetapkan saiz fon:34px, jurang akan menjadi lebih luas.

Hasil pelaksanaan:




Begitu juga, jika anda ingin mengalih keluar jurang, anda perlu menukar saiz fon:0;

Salin kod

Kod adalah seperti berikut:

.boxBg{

margin: 0 auto;

lebar:500px;

tinggi:200px; sempadan:2px pepejal #ccc; saiz fon:0}

Hasil pelaksanaan:

Dengan cara ini, reka letak yang dikehendaki dicapai, dan teks di dalam kotak hilang Ini juga membuktikan bahawa saiz teks mempengaruhi jurang. Hanya tetapkan semula dalam elemen kanak-kanak. Sudah tentu itu bukan tumpuan hari ini. Kesan yang sama terapung: kiri juga boleh dicapai dengan mudah.

Salin kod Kod adalah seperti berikut:

Hasil pelaksanaan:

Selepas menambah apungan pada elemen

, elemen terapung akan dipaparkan serta-merta selepas ia mencecah sempadan elemen induk atau elemen terapung lain. Contohnya, dalam contoh berikut, apabila jumlah lebar elemen terapung lebih besar daripada elemen induk, garisan dibalut Apabila garisan dibalut, terapung sebelumnya ditemui dan

dipaparkan selepasnya.

Salin kod Kod adalah seperti berikut:

Hasil pelaksanaan:

Apakah hasilnya jika blok sebaris digunakan?

Salin kod Kod adalah seperti berikut:

실행 결과:

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

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

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

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

.box3{
너비:100px ;
높이:50px;
배경색:녹색;
}

실행 결과:

상자 3의 텍스트가 상자 1에 포함되지 않고 아래에 나타나는 이유는 무엇입니까? 그럼 코드와 사진을 보세요

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

.box3{
높이:50px ;
배경색:녹색;
}

실행 결과:

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

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

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

이 경우 세 상자의 너비를 동일하게 하려면 세 상자의 너비만 300px로 변경하면 됩니다.

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

.box3{
너비:300px ;
높이:50px;
배경색:녹색;
}

실행 결과:

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

실행 결과:

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

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

를 사용해야 합니다.

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

.box3{
float:left ;
너비:100px;
높이:50px;
배경색:녹색;
지우기:왼쪽
}

실행 결과:

이제 이해했으니 배경과 프레임의 높이를 동일하게 만드는 방법에 대해 이야기하겠습니다. 첫 번째 방법은 배경 높이를 프레임과 동일하게 직접 설정하는 것입니다. 물론 이것은 float를 지우는 것에 대해 이야기해 봅시다. 먼저 예를 살펴보겠습니다.

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