Css Dersleri Bölüm 18 Element yayılımı(Floating)
Ne Fark Eder ki! Dergisinin hazırlamış olduğu Css Derslerinin 18. bölümü, element yayılımı, Floating konusu...
css dersleri Tag
- All
- Dijital pazarlama
- Dijital, İyi Şeyler Podcast
- E-Ticaret
- Eğitim
- Growth hacking
- İnceleme
- Kişisel
- Rehber
- Reklam
- Sosyoloji
- Teknoloji
- Wordpress
Css Dersleri Bölüm 17 Konumlandırma (positioning)
Konumlandırma
Css konumlandırma özellikleri bir elementi konumlandırmanıza yarar. Ayrıca elementlerin biribirine göre konumunu ve içeriklere göre konumunu belirli kriterlere göre konumlandırılmasını sağlar. Elementler top, bottom, left ve right özellikleri kullanılarak konumlanabilir. Bununla beraber, position özelliği belirlenmeden bu özellikler işlemez. Ama farklı bir konumlandırma özelliği de sunmaktadırlar. 4 çeşit konumlandırma yöntemi mevcuttur;
Sabit konumlandırma
HTML elementleri varsayılan olarak statiktir yani sabittir konumu. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
Sabit Konumlama
SAbit konumlamaya sahip bir element tarayıcının göreceli konumuna göre sabitler kendini. Pencereyi kaydırdığınız halde konumu değişmeyecektir:
Not: IE7’de ve IE8’de sadece !DOCTYPE belirlendiği takdirde sabit konumlandırma işe yaramaktadır. Sabit konumlanan elementler normal akışın dışında yer alırlar. Döküman ve diğer elementler sabit konumlanan element yokmuş gibi davranırlar. Sabit konumlanan elementler diğerlerinin üzerine çıkarlar.
Css Dersleri Bölüm 16 Gösterim ve Görünürlük
Display özelliği, bir elementin nasıl gözükeceğini ve Visibility özelliği de bir elementin görünür ya da gizli olmasını sağlar.
Bir elementi gizlemek – display:none veya visibility:hidden
Bir elementi gizlemek display’e none veya visibility’ye hidden değeri vermekle gerçekleşir. Yalnız bunlar farklı sonuçlarla karşılaşmamıza neden olur:
visibility:hidden elementi gizler,fakat hala önceden belirlenmiş olan alanı kaplamaya devam eder. Element yok olur ama hacim kaplar hala yani şablonda yeri hazırdır.
display:none elementi gizler, işgal ettiği yer de gizlenir. Element yok olur ve element hiç var olmamış gibi yer almaz şablonda:
CSS Display Elementinin – Block ve Inline Değerleri
Block elementlerinin tam genişlik ve yüksekliği kaplaması sağlar ve önce ve sonrasına satır atar.
Block element örnekleri:
- <h1>
- <p>
- <div>
Inline yani satır içi elementler de sadece genişliği kaplar ve satır atmaya zorlamaz.