Hari 8: Pengenalan kepada CSS Layout_Basic Tutorial

CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。

1.定义DIV

分析一个典型的定义div例子：

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }

说明如下：

• 层的名称为sample，在页面中用
  就可以调用这个样式。
• MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"MARGIN: 10px;"。如果边距为零，要写成"MARGIN: 0px;"。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。MARGIN是透明元素，不能定义颜色。
• PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素，不能定义颜色。
• BORDER是指层的边框，"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC"，宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"。
• BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用"url(../images/bg_logo.gif)"来指定背景图片路径；其次定义背景色"#FEFEFE"。"no-repeat"指背景图片不需要重复，如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
• COLOR用于定义字体颜色，上一节已经介绍过。
• TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。
• LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。
• WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。

下面是这个层的实际表现:

这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，

这里是演示内容，这里是演示内容，

这里是演示内容，这里是演示内容，

这里是演示内容...

Kita dapat melihat bahawa jidar berwarna kelabu 2px, imej latar belakang tidak diulang di bahagian bawah sebelah kanan, kandungan berada 20px dari sempadan kiri, dan kandungannya adalah di tengah-tengah. Hoho, walaupun ia tidak kelihatan bagus, ia adalah yang paling asas Jika anda menguasainya, anda akan mempelajari separuh daripada teknologi susun atur CSS. Itu sahaja, ia tidak sukar sama sekali! (Apakah separuh lagi? Separuh lagi adalah kedudukan antara lapisan. Saya akan menerangkannya langkah demi langkah kemudian.)

2.Model kotak CSS2

Sejak pelancaran CSS1 pada tahun 1996, organisasi W3C telah mengesyorkan agar semua objek pada halaman web diletakkan dalam kotak. imej dan lapisan

. Model kotak terutamanya mentakrifkan empat bidang: kandungan, padding, sempadan dan margin. Lapisan sampel yang kita bincangkan di atas adalah kotak biasa. Bagi pemula, mereka sering keliru tentang tahap, hubungan dan pengaruh bersama antara jidar, warna latar belakang, imej latar belakang, padding, kandungan dan jidar. Berikut adalah gambarajah skematik 3D model kotak, saya harap ia akan lebih mudah untuk anda fahami dan ingat.

3. Semua imej tambahan hendaklah diproses dengan latar belakang

Menggunakan reka letak XHTML+CSS, terdapat teknologi yang anda tidak biasa pada mulanya Ia harus dikatakan bahawa ia adalah cara berfikir yang berbeza daripada susun atur meja tradisional, iaitu: semua imej tambahan dilaksanakan. dengan latar belakang. Sesuatu seperti ini:

LATAR BELAKANG: url(images/bg_poem.jpg) #FEFEFE tiada ulangan kanan bawah;

Walaupun boleh memasukkan terus ke dalam kandungan, ini tidak disyorkan. "Gambar tambahan" di sini merujuk kepada gambar yang bukan sebahagian daripada kandungan yang akan dinyatakan pada halaman, tetapi hanya digunakan untuk hiasan, selang waktu dan peringatan. Contohnya: gambar dalam album foto, gambar dalam berita bergambar, dan gambar model kotak 3D di atas adalah sebahagian daripada kandungan mereka boleh dimasukkan terus ke dalam halaman menggunakan elemen gambar tajuk, dan awalan senarai Imej mesti dipaparkan menggunakan latar belakang atau kaedah CSS yang lain.

Terdapat dua sebab untuk ini:

• Asingkan sepenuhnya prestasi daripada struktur (rujuk membaca artikel lain: "Memahami pemisahan prestasi dan struktur"), gunakan CSS untuk mengawal semua penampilan dan prestasi serta memudahkan semakan.
• Jadikan halaman lebih boleh digunakan dan mesra. Contohnya, jika orang buta menggunakan pembaca skrin, gambar yang dilaksanakan menggunakan teknologi latar belakang tidak akan dibaca dengan kuat.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn