Jadwal Kursus

Tutorial Tingkat Lanjut CSS

• Buku Tambahan CSS
• Pengenalan CSS
• Gramata Dasar CSS
• Gramata Mahir CSS
• Pemilihan Pencabutan CSS
• Pemilihan Pencabutan id CSS
• Pemilihan Pencabutan Klas CSS
• Pembuatan CSS
• Latar Belakang CSS
• Teks CSS
• Font CSS
• Daftar CSS

Model Kotak CSS

• Ringkasan Model Bokong CSS
• Marjin Dalam CSS
• Batas CSS
• Marjin Luar CSS
• Pertumpahan Marjin Luar CSS

CSS Penempatan

• Ringkasan Lokasi CSS
• Lokasi Relatif CSS
• Lokasi Absolut CSS
• Gelugur CSS

Pemilih CSS

• Pemilihan Elemen CSS
• Pemecahan Pemilihan CSS
• Pemilihan Klas CSS
• Pemilihan ID CSS
• Pemilihan Pemilihan Sifat CSS
• Pemilihan Pencabutan Anak-Anak
• Pemilihan Pencabutan Anak Elemen
• Pemilihan Pencabutan Saudara Kepada Kiri

Kursus Pilihan

Rekomendasi Kursus:

• Kotak Kacau CodeW3C.com

Atribut CSS Penempatan (Positioning) memungkinkan Anda menempatkan elemen.

CSS Penempatan dan Gerakan

CSS menyediakan beberapa atribut untuk penempatan dan gerakan, dengan menggunakan atribut ini, Anda dapat membangun layout kolom,重叠布局 bagian dengan bagian lain, dan dapat menyelesaikan tugas yang selama ini biasanya memerlukan beberapa tabel.

Ide dasar penempatan sangat sederhana, ia memungkinkan Anda menentukan posisi kotak elemen yang seharusnya muncul berdasarkan posisi normalnya, atau berdasarkan parent elemen, elemen lain, atau bahkan jendela browser sendiri. Tidak diragukan lagi, fitur ini sangat kuat dan sangat mengejutkan. Untuk mengetahui, peran pengguna untuk dukungan CSS2 untuk penempatan jauh lebih baik daripada dukungan untuk aspek lain, hal ini tidak heran.

Di pihak lain, CSS1 yang pertama kali mengusulkan gerakan, yang berdasarkan fitur yang ditambahkan oleh Netscape di awal pengembangan Web. Gerakan ini bukan sepenuhnya penempatan, namun, dengan pasti itu bukan layout aliran normal. Kita akan menjelaskan arti gerakan di bab selanjutnya.

一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

<div>
some text
<p>Some more text.</p>
</div>

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。

Sifat position CSS

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

框元素正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

Kotak elemen menggeser jarak tertentu. Elemen masih mempertahankan bentuknya sebelum ditempatkan, dan ruang yang aslinya diambil tetap disimpan.

absolut

Kotak elemen dihapus sepenuhnya dari aliran dokumen dan ditempatkan berdasarkan blok yang termasuk. Blok yang termasuk mungkin adalah elemen lain di dokumen atau blok yang termasuk awal. Ruang yang seharusnya diambil oleh elemen di aliran biasa akan ditutup, seperti jika elemen itu tidak ada. Setelah elemen ditempatkan, ia akan menghasilkan kotak blok, meskipun jenis kotak yang dihasilkan di aliran biasa.

tetap

Perilaku kotak elemen menyerupai menetapkan position sebagai absolute, tetapi blok yang termasuk adalah tetingkap sendiri.

Petunjuk:Pem定位 relatif secara aktual dianggap sebagai bagian dari model pem定位 biasa, kerana posisi elemen berdasarkan posisinya dalam aliran biasa.

Atribut Lokasi CSS

Atribut lokasi CSS memungkinkan Anda mengalamatkan elemen.

Alat Kekuatan

Panduan Referensi CSS

Contoh CSS

Ujian CSS

Panduan CSS

Pautan Penyedia