การจัดวางเป็นเรื่องง่ายด้วย CSS หากคุณคุ้นเคยกับการใช้เค้าโครงตารางในตอนแรกจะเป็นเรื่องยาก ไม่ใช่เรื่องยาก แค่มีแรงจูงใจที่แตกต่างกันและมีเหตุผลมากขึ้นในทางปฏิบัติ

คุณสามารถปฏิบัติต่อแต่ละส่วนของหน้านี้เสมือนเป็นส่วนที่แยกจากกัน ไม่ว่าคุณจะเลือกส่วนใดก็ตาม คุณสามารถแทนที่บล็อกนี้ด้วยบล็อกนั้นโดยสิ้นเชิงหรือค่อนข้างมากก็ได้

แอตทริบิวต์การกำหนด

ตำแหน่งใช้เพื่อกำหนดว่าองค์ประกอบเป็นแบบสัมบูรณ์ สัมพันธ์ คงที่ หรือคงที่

ค่าคงที่เป็นค่าเริ่มต้นสำหรับองค์ประกอบซึ่งสร้างขึ้นในลำดับปกติตามที่ปรากฏใน HTML

ญาตินั้นเหมือนกับคงที่ แต่คุณสามารถใช้คุณสมบัติด้านบน ขวา ล่าง และซ้ายเพื่อชดเชยตำแหน่งเดิมได้

Absolute แยกองค์ประกอบออกจากโฟลว์ปกติของ HTML และส่งไปยังโลกการวางตำแหน่งของตัวเองทั้งหมด ในโลกที่บ้าคลั่งเล็กน้อยนี้ องค์ประกอบสัมบูรณ์นี้สามารถวางได้ทุกที่ตราบใดที่ตั้งค่าบน, ขวา, ล่างและซ้าย

แก้ไขยังทำงานเหมือนสัมบูรณ์ แต่จะวางองค์ประกอบสัมบูรณ์สัมพันธ์กับหน้าต่างเบราว์เซอร์สัมพันธ์กับหน้า ดังนั้นตามทฤษฎีแล้ว องค์ประกอบคงที่จะยังคงอยู่ในวิวพอร์ตของเบราว์เซอร์อย่างสมบูรณ์เมื่อเลื่อนหน้า ทำไมตามทฤษฎี? หากไม่มีอะไรอื่น ก็ทำงานได้ดีใน Mozilla และ Opera แต่ไม่ใช่ IE

การใช้เค้าโครงตำแหน่งสัมบูรณ์

คุณสามารถใช้การวางตำแหน่งสัมบูรณ์เพื่อสร้างเค้าโครงสองคอลัมน์แบบดั้งเดิมได้โดยใช้กฎที่คล้ายกับต่อไปนี้ใน HTML:

ตัวอย่างซอร์สโค้ด [www.52css.com]

และใช้ CSS ต่อไปนี้:

ตัวอย่างซอร์สโค้ด [www.52css.com]

{

ด้าน

บน: 0; ความกว้าง: 10em;

}

#content

{

ระยะขอบซ้าย: 10em;

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

มันง่ายมาก! อย่างไรก็ตาม คุณไม่ถูกจำกัดด้วยแนวทางสองคอลัมน์นี้ ด้วยการวางตำแหน่งอัจฉริยะ คุณสามารถจัดวางบล็อกได้มากเท่าที่คุณต้องการ ตัวอย่างเช่น หากคุณต้องการเพิ่มคอลัมน์ที่สาม คุณสามารถเพิ่มบล็อก "navigation2" ลงใน HTML และใช้ CSS ต่อไปนี้:

ตัวอย่างซอร์สโค้ด [www.52css.com]

#navigation {

ตำแหน่ง: ด้านบน: 0; ซ้าย: 0; ความกว้าง: 10em;

}

#navigation2 {

ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ความกว้าง: 10em;

}

#content {

ระยะขอบ: 0 10em; ระยะขอบถึง 10em */

}

ผลข้างเคียงเพียงอย่างเดียวขององค์ประกอบที่มีตำแหน่งที่แน่นอนก็คือ เนื่องจากองค์ประกอบเหล่านี้อาศัยอยู่ในโลกของตัวเอง จึงไม่มีทางตัดสินใจได้อย่างแน่ชัดว่าองค์ประกอบเหล่านั้นจะไปสิ้นสุดที่ใด หากคุณใช้ตัวอย่างข้างต้นในพื้นที่การนำทางน้อยลงและมีพื้นที่เนื้อหามากขึ้น ก็ไม่มีปัญหา แต่โดยเฉพาะอย่างยิ่งเมื่อใช้ค่าสัมพัทธ์สำหรับความยาวและความกว้าง คุณมักจะต้องละทิ้งความหวังที่จะใส่อะไรเช่นเชิงอรรถไว้ข้างใต้ หากคุณต้องการทำจริงๆ แทนที่จะวางตำแหน่งไว้เฉยๆ ให้ลอยไป

ลอย

จะย้ายองค์ประกอบไปทางซ้ายหรือขวาของบรรทัดเดียวกัน ในขณะที่เนื้อหาโดยรอบจะลอย

Floating มักใช้เพื่อวางตำแหน่งองค์ประกอบเล็กๆ ภายในหน้า (ใน CSS เริ่มต้นดั้งเดิมของไซต์นี้ ลิงก์ "หน้าถัดไป" ของ HTML Basic Guide และ CSS Basic Guide จะลอยไปทางขวา ดูเพิ่มเติมที่: first- ใน pseudo-element ตัวอย่างตัวอักษร) แต่ยังสามารถนำมาใช้ในบล็อกขนาดใหญ่ เช่น คอลัมน์การนำทาง

ใช้ตัวอย่าง HTML ต่อไปนี้ คุณสามารถใช้ CSS ต่อไปนี้ได้:

ตัวอย่างซอร์สโค้ด [www.52css.com]

#navigation {

float: left; width: 10em;

}

#

navigation2 {

float: right;

10em

;

Margin: 0 10em;

}

หากคุณไม่ต้องการให้องค์ประกอบถัดไปพันรอบวัตถุที่ลอยอยู่ คุณสามารถใช้คุณสมบัติ clear ได้ clear: ซ้ายจะล้างองค์ประกอบด้านซ้าย clear: ขวาจะล้างองค์ประกอบด้านขวา และ clear: ทั้งสองจะล้างทั้งองค์ประกอบซ้ายและขวา ตัวอย่างเช่น คุณต้องมีส่วนท้ายของหน้า คุณสามารถเพิ่มบล็อกลงใน HTML ด้วยรหัส "ส่วนท้าย" จากนั้นใช้ CSS ต่อไปนี้:

ตัวอย่างซอร์สโค้ด [www.52css.com]

#footer {

clear: ทั้งสอง;

}

คุณก็เข้าใจแล้ว เชิงอรรถจะปรากฏใต้คอลัมน์ทั้งหมด ไม่ว่าคอลัมน์ใดก็ตามจะยาวแค่ไหนก็ตาม

โปรดทราบว่า

เราได้กล่าวถึงการวางตำแหน่งและการลอยโดยทั่วไป โดยเน้นที่บล็อก "ใหญ่" ของหน้า แต่โปรดจำไว้ว่า วิธีการเหล่านี้ยังสามารถใช้กับองค์ประกอบใดๆ ภายในบล็อกเหล่านั้นได้ เมื่อรวมการวางตำแหน่ง ลอย เส้นขอบ ช่องว่างภายใน และเส้นขอบ คุณสามารถสร้างการออกแบบเลย์เอาต์ใดๆ ก็ได้ ในแง่ของเลย์เอาต์ ไม่มีอะไรที่ตารางจะทำได้หากไม่มี CSS

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