การจัดวางเป็นเรื่องง่ายด้วย CSS หากคุณคุ้นเคยกับการใช้เค้าโครงตารางในตอนแรกจะเป็นเรื่องยาก ไม่ใช่เรื่องยาก แค่มีแรงจูงใจที่แตกต่างกันและมีเหตุผลมากขึ้นในทางปฏิบัติ
คุณสามารถปฏิบัติต่อแต่ละส่วนของหน้านี้เสมือนเป็นส่วนที่แยกจากกัน ไม่ว่าคุณจะเลือกส่วนใดก็ตาม คุณสามารถแทนที่บล็อกนี้ด้วยบล็อกนั้นโดยสิ้นเชิงหรือค่อนข้างมากก็ได้
ตำแหน่งแอตทริบิวต์การกำหนด
ตำแหน่งใช้เพื่อกำหนดว่าองค์ประกอบเป็นแบบสัมบูรณ์ สัมพันธ์ คงที่ หรือคงที่
ค่าคงที่เป็นค่าเริ่มต้นสำหรับองค์ประกอบซึ่งสร้างขึ้นในลำดับปกติตามที่ปรากฏใน HTML
ญาตินั้นเหมือนกับคงที่ แต่คุณสามารถใช้คุณสมบัติด้านบน ขวา ล่าง และซ้ายเพื่อชดเชยตำแหน่งเดิมได้
Absolute แยกองค์ประกอบออกจากโฟลว์ปกติของ HTML และส่งไปยังโลกการวางตำแหน่งของตัวเองทั้งหมด ในโลกที่บ้าคลั่งเล็กน้อยนี้ องค์ประกอบสัมบูรณ์นี้สามารถวางได้ทุกที่ตราบใดที่ตั้งค่าบน, ขวา, ล่างและซ้าย
แก้ไขยังทำงานเหมือนสัมบูรณ์ แต่จะวางองค์ประกอบสัมบูรณ์สัมพันธ์กับหน้าต่างเบราว์เซอร์สัมพันธ์กับหน้า ดังนั้นตามทฤษฎีแล้ว องค์ประกอบคงที่จะยังคงอยู่ในวิวพอร์ตของเบราว์เซอร์อย่างสมบูรณ์เมื่อเลื่อนหน้า ทำไมตามทฤษฎี? หากไม่มีอะไรอื่น ก็ทำงานได้ดีใน Mozilla และ Opera แต่ไม่ใช่ IE
การใช้เค้าโครงตำแหน่งสัมบูรณ์
คุณสามารถใช้การวางตำแหน่งสัมบูรณ์เพื่อสร้างเค้าโครงสองคอลัมน์แบบดั้งเดิมได้โดยใช้กฎที่คล้ายกับต่อไปนี้ใน HTML:
ตัวอย่างซอร์สโค้ด [www.52css.com]
<div id="navigation">
<ul>
< li ><a href="this.html">นี่</a></li>
<li><a href="that.html">นั่น</a></li>
<li><a href= " theOther.html">อีกฝ่าย</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo แบนโจ</h1>
<p>ยินดีต้อนรับสู่ Ra ra รา รา แบนโจ รา รา แบนโจ. รา รา แบนโจ.</p>
<p>(รา รา แบนโจ)</p>
</div>
และใช้ 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 แสดงให้เห็นถึงความก้าวหน้าอย่างแท้จริง - หน้าที่มีการใช้งานสูงเป็นเพียงเศษเสี้ยวของขนาดไฟล์ของหน้าแบบตาราง