masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

HTML+CSS Mudah Dimulakan dengan Elemen Blok Model Bendalir

Mari kita bincangkan tentang model aliran dahulu ialah mod reka letak halaman web lalai. Maksudnya, elemen web HTML halaman web dalam keadaan lalai mengedarkan kandungan halaman web mengikut model aliran.

Model susun atur bendalir mempunyai dua ciri tipikal:

Pertama, elemen blok akan dilanjutkan secara menegak dan diedarkan mengikut urutan dari atas ke bawah dalam elemen yang mengandungi, kerana dalam Secara lalai, lebar elemen blok adalah 100%. Malah, elemen blok akan menduduki kedudukannya dalam bentuk baris.

Di bawah kita tulis contoh elemen blok di bawah model aliran Kodnya adalah seperti berikut: 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
    width:300px;
    height:100px;
}
div,h1,p{
    border:1px solid red;
}
</style>
</head>
<body>
    <div id="box2">中国</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 

    <h1>PHP 中文网</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 

    <p>测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码</p>
    <!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    
    <div id="box1">强军</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>

Dalam kod di atas, lebar tiga label elemen blok (div, h1. , p) dipaparkan sebagai 100%

Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>流动模式下的块状元素</title> <style type="text/css"> #box1{ width:300px; height:100px; } div,h1,p{ border:1px solid red; } </style> </head> <body> <div id="box2">中国</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> <h1>PHP 中文网</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> <p>测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码</p> <!--块状元素，由于没有设置宽度，宽度默认显示为100%--> <div id="box1">强军</div><!--块状元素，由于设置了width:300px，宽度显示为300px--> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492446 permainan