En son web geliştirme öğreticiler
×

CSS Eğitimi

CSS EV CSS Giriş CSS Sözdizimi CSS Nasıl CSS Renkler CSS Arka CSS Kenarlıklar CSS Kenar boşlukları CSS Dolgu malzemesi CSS Yükseklik genişlik CSS Metin CSS Yazı CSS Bağlantılar CSS Listeler CSS Tablolar CSS Kutu Modeli CSS Özeti CSS Gösterimi CSS Maksimum genişlik CSS Konumu CSS şamandıra CSS Inline-block CSS hizalama CSS combinators CSS Sözde sınıf CSS Sözde elemanı CSS Gezinti çubuğu CSS Açılır menülerde CSS Araç ipuçları CSS Resim Galerisi CSS Görüntüdeki Opaklık CSS Görüntü Spritleri CSS Attr Seçicileri CSS Formları CSS Sayaçlar

CSS3

CSS3 Giriş CSS3 Yuvarlatılmış köşeler CSS3 Sınır Resimleri CSS3 Arka CSS3 Renkler CSS3 Renk Geçişleri CSS3 Gölgeler CSS3 Metin CSS3 Yazı CSS3 2D Dönüşümler CSS3 3D Dönüşümler CSS3 Geçişler CSS3 Animasyonlar CSS3 Görüntüler CSS3 Düğmeler CSS3 sayfalara numara koyma CSS3 Birden Çok Sütun CSS3 Kullanıcı arayüzü CSS3 Kutu Boyutlandırma CSS3 Flexbox CSS3 Medya Sorguları CSS3 MQ Örnekleri

CSS Duyarlı Web Tasarımı

Duyarlı Web Tasarımı giriş Duyarlı Web Tasarımı Görünüm Duyarlı Web Tasarımı Izgara Görünümü Duyarlı Web Tasarımı Medya Sorguları Duyarlı Web Tasarımı Görüntüler Duyarlı Web Tasarımı Videolar Duyarlı Web Tasarımı çerçeveler

CSS Examples

CSS Örnekler CSS bilgi yarışması CSS sertifika

CSS References

CSS Referans CSS Seçiciler CSS Fonksiyonlar CSS Referans Resmi CSS Web Safe Yazı CSS canlandırılabilir CSS Birimler CSS PX-EM Dönüştürücü CSS Renkler CSS Renk Değerleri CSS Renkli İsimler CSS3 Tarayıcı Desteği

 

CSS Düzen - şamandıra ve net


float mülkiyet unsuru yüzer gerekip gerekmediğine belirtir.

clear mülkiyet yüzen elementlerin davranışını kontrol etmek için kullanılır.





şamandıra Mülkiyet

En basit Kullanımda, float mülkiyet görüntüleri metin etrafında sarmak için kullanılabilir.

Aşağıdaki örnek bir görüntü bir metinde sağa yüzer gerektiğini belirtir:

Örnek

img {
    float: right;
    margin: 0 0 10px 10px;
}
Kendin dene "

clear Mülkiyet

clear mülkiyet yüzen elementlerin davranışını kontrol etmek için kullanılır.

Yüzen bir öğeden sonra Elemanları etrafında akacaktır. Bunu önlemek için, kullanmak clear özelliğini.

clear mülkiyet hangi unsurları yüzen bir elementin yanları dalgalanmasına izin verilmez belirtir:

Örnek

div {
    clear: left;
}
Kendin dene "

clearfix Hack - overflow: auto;

bir eleman olarak içeren eleman daha uzun olduğu ve bu yüzdürülerek, bu kabı dışında taşma.

Sonra ekleyebilir overflow: auto; içeren elemana bu sorunu çözmeye yönelik:

Örnek

.clearfix {
    overflow: auto;
}
Kendin dene "

Web Düzeni Örneği

Kullanarak tüm web düzenleri yapmak yaygındır float özelliğini:

Örnek

div {
    border: 3px solid blue;
}

.clearfix {
    overflow: auto;
}

nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;
}

section {
    margin-left: 206px;
    border: 3px solid red;
}
Kendin dene "

Örnekler

Diğer Örnekler

Bir paragrafta sağa yüzer sınır ve marjlar ile bir görüntü
Bir paragrafta sağa bir görüntü şamandıra edelim. Resme kenarlık ve kenar boşluklarını ekleyin.

Sağa yüzen bir resim yazısı ile bir görüntü
sağa bir altyazı şamandıra ile bir görüntü olsun.

Soldaki bir paragraf şamandıra ilk harfini edelim
Soldaki bir paragraf şamandıra ilk harfini edelim ve mektup stil.

Yatay menü oluşturma
yatay menü oluşturmak için köprüler listesiyle şamandıra kullanın.

Tablo kullanmadan ana sayfaya
Bir altbilgi, sol içerik ve ana içeriğe sahip bir ana sayfası oluşturmak için şamandıra kullanın.


Tüm CSS Float Özellikleri

özellik Açıklama
clear Yüzen unsurlar dalgalanmasına izin verilmeyen bir elemanın hangi tarafta belirtir
float bir eleman yüzer gerektiğini olup olmadığını belirtir
overflow İçerik bir elemanın kutusunu taşıyor ne olacağını belirtir
overflow-x o elemanın içeriği alanı aşarsa içeriğin sol / sağ kenarları ne yapılacağını belirtir
overflow-y o elemanın içeriği alanı aşarsa içeriğin üst / alt kenarları ne yapılacağını belirtir