กระแสปกติ

การไหลปกติเป็นวิธีที่องค์ประกอบต่างๆจะปรากฏในหน้าเว็บในสถานการณ์ส่วนใหญ่ องค์ประกอบทั้งหมดใน HTML อยู่ในกล่องที่มีทั้งกล่องแบบอินไลน์หรือ บล็อก

วางกล่องที่ถูกบล็อก

ในการไหลตามปกติกล่องบล็อกจะวางตำแหน่งไว้ที่หน้าหนึ่งหลังจากที่อื่น (ตามลำดับที่เขียนใน HTML ) พวกเขาเริ่มต้นที่ด้านซ้ายบนของกล่องบรรจุและกองจากบนลงล่าง ระยะห่างระหว่างแต่ละช่องถูกกำหนดโดยขอบที่มีส่วนบนและด้านล่างยุบลงไปอีก

ตัวอย่างเช่นคุณอาจมี HTML ต่อไปนี้:

นี่เป็น div แรก กว้าง 200 พิกเซลพร้อมขอบ 5px รอบ ๆ

นี่คือ div ที่กว้างกว่า

นี่คือส่วนที่กว้างกว่าที่สอง

แต่ละ DIV เป็นองค์ประกอบของบล็อกดังนั้นจึงจะวางไว้ใต้องค์ประกอบบล็อกก่อนหน้า ขอบด้านซ้ายแต่ละด้านจะแตะขอบด้านซ้ายของช่องที่มีอยู่

การวางกล่องแบบอินไลน์

กล่องข้อความแบบอินไลน์ถูกวางไว้บนหน้ากระดาษในแนวนอนหนึ่งอันหลังจากจุดเริ่มต้นอื่นที่ด้านบนของส่วนคอนเทนเนอร์ เมื่อไม่มีช่องว่างเพียงพอเพื่อให้พอดีกับองค์ประกอบทั้งหมดของกล่องแบบอินไลน์ในบรรทัดเดียวพวกเขาจะห่อหุ้มไปที่บรรทัดถัดไปและกองซ้อนกันในแนวตั้งจากที่นั่น

ตัวอย่างเช่นใน HTML ต่อไปนี้:

ข้อความนี้เป็น ตัวหนา และข้อความนี้เป็น ตัวเอียง นี่เป็นข้อความธรรมดา

ย่อหน้าเป็นองค์ประกอบแบบบล็อก แต่มีองค์ประกอบแบบอินไลน์อยู่ 5 องค์ประกอบดังนี้

• "ข้อความนี้เป็น"
• "กล้า"
• "และข้อความนี้คือ"
• "ตัวเอียง"
• "และนี่เป็นข้อความธรรมดา"

การไหลปกติคือสิ่งที่องค์ประกอบบล็อกและองค์ประกอบแบบอินไลน์จะแสดงบนหน้าเว็บโดยไม่มีการแทรกแซงใด ๆ โดยนักออกแบบเว็บไซต์

ถ้าคุณต้องการส่งผลต่อตำแหน่งขององค์ประกอบที่อยู่บนหน้าเว็บคุณสามารถใช้การวางตำแหน่ง CSS หรือ CSS floats ได้