มักใช้ในเลย์เอาต์ของเว็บไซต์สมัยใหม่เพื่อสร้างกริดและหมายถึงบล็อกหรือคอนเทนเนอร์บางประเภท นอกจากนี้ยังสามารถซ้อนแท็กอื่นๆ ไว้ในนั้นได้ ซึ่งไม่สามารถทำได้กับองค์ประกอบบล็อกทั้งหมด ดังนั้น
สะดวกในการใช้งาน โดยปกติแล้วบล็อกจะซ้อนกันและไม่ได้แทรกลงในองค์ประกอบแบบอินไลน์ องค์ประกอบอินไลน์ HTML คือข้อความ และใช้ CSS เพื่อจัดรูปแบบ
เมื่อกำหนดความกว้างของเนื้อหา ความกว้างของบล็อกทั้งหมดคือผลรวมของค่าการเติมด้านขวาและด้านซ้าย ระยะขอบ เส้นขอบ และความกว้าง ที่ความสูงที่กำหนด - จากช่องว่างด้านบนและด้านล่าง ระยะขอบ เส้นขอบ และความสูง ข้อความในองค์ประกอบบล็อกจะถูกจัดแนวตามค่าเริ่มต้น หากหนึ่งในนั้นมีองค์ประกอบแบบอินไลน์ร่วมกับองค์ประกอบบล็อก บล็อกที่ไม่ระบุชื่อจะถูกสร้างขึ้นรอบๆ องค์ประกอบแบบอินไลน์ สไตล์เริ่มต้นจะถูกนำไปใช้กับมัน นอกจากนี้ยังจะสืบทอดสไตล์ที่ระบุซึ่งกำหนดให้กับพาเรนต์ด้วย
การไหลของเอกสาร
Flow หมายถึงลำดับการแสดงองค์ประกอบของหน้า ซึ่งกำหนดโดยคุณสมบัติที่ระบุใน CSS ในกรณีนี้ ตามค่าเริ่มต้น บล็อกจะเรียงจากบนลงล่าง และหากมีพื้นที่ไม่เพียงพอ แท็กอินไลน์จะถูกย้ายไปยังบรรทัดใหม่และจัดเรียงจากบนลงล่างและจากซ้ายไปขวา ตำแหน่งขององค์ประกอบบนเพจขึ้นอยู่กับตำแหน่งขององค์ประกอบในโค้ด ยิ่งสูงเท่าไร ก็จะยิ่งอยู่เร็วขึ้นเท่านั้น แต่ละองค์ประกอบบล็อกดูเหมือนสี่เหลี่ยมที่ผลักเพื่อนบ้านออกไป คุณสามารถเปลี่ยนลักษณะการทำงานนี้ได้โดยใช้คุณสมบัติพิเศษ การจัดแนวบล็อกบางส่วนให้อยู่กึ่งกลางหรือด้านข้างของคอนเทนเนอร์ใน CSS เรียกว่าการวางตำแหน่ง
องค์ประกอบการวางตำแหน่ง
การวางตำแหน่งของบล็อกสามารถควบคุมได้โดยใช้การวางตำแหน่งแบบสัมบูรณ์และแบบสัมพัทธ์ การวางตำแหน่งจะใช้เพื่อให้ส่วนใหญ่ของหน้ามีตำแหน่งเฉพาะ เพื่อสร้างอินเทอร์เฟซที่ซับซ้อน ป๊อปอัป และองค์ประกอบตกแต่ง คุณสมบัติหลักที่ใช้ในการวางตำแหน่งบล็อกใน CSS คือตำแหน่ง มีคุณสมบัติหลักสี่ประการ:
- ญาติ;
- แน่นอน;
- ที่ตายตัว;
- คงที่.
ด้วยความช่วยเหลือ คุณสามารถสลับโหมดเค้าโครงได้โดยระบุพารามิเตอร์หนึ่งในสี่ตัว: บน ขวา ล่าง หรือซ้าย นอกจากนี้ยังมีคุณสมบัติสำหรับการสั่งซื้อเลเยอร์ - z-index โดยปกติแล้วการวางตำแหน่งด้วยคุณสมบัติคงที่จะไม่ถูกใช้เนื่องจากจะระบุถึงการวางตำแหน่งเริ่มต้นของบล็อก ดังนั้นการใช้พารามิเตอร์ใดๆ จึงไม่ส่งผลกระทบแต่อย่างใด คุณสมบัติอีกสามประการอื่นใช้สำหรับโครงร่าง: แบบสัมพัทธ์ แบบสัมบูรณ์ แบบคงที่
ตำแหน่งสัมพัทธ์
การวางตำแหน่งสัมพัทธ์ของบล็อกใน CSS เช่น ตำแหน่ง: คุณสมบัติสัมพัทธ์ หมายความว่าองค์ประกอบสามารถย้ายได้และตำแหน่งเดิมมีการเปลี่ยนแปลง บล็อกดังกล่าวยังคงอยู่ในกระแส อันที่จริงไม่ใช่ตัวเขาเองที่ถูกแทนที่ แต่เป็นสำเนาของเขา ค่าคุณสมบัติถูกตั้งค่าเพื่อระบุจำนวนบล็อกที่จะเคลื่อนที่ไปในทิศทางเดียวหรืออีกทางหนึ่ง ส่วนใหญ่มักวัดเป็นพิกเซล แต่สามารถใช้หน่วยอื่นได้
การใช้คุณสมบัติสำหรับการกำหนดตำแหน่งสัมพัทธ์
คุณสมบัติด้านบนย้ายสำเนาของบล็อกเฉพาะขึ้นหรือลงตามจำนวนพิกเซลที่ระบุในคุณสมบัติ เมื่อใช้งานองค์ประกอบที่อยู่ด้านล่างหรือด้านบนจะยังคงอยู่ในตำแหน่งเดิมเนื่องจากในความเป็นจริงแล้วบล็อกที่ถูกเลื่อนจะไม่เคลื่อนที่ไปที่ใดก็ได้
คุณสมบัติด้านล่างจะย้ายบล็อกไปในทิศทางตรงกันข้ามกับคุณสมบัติด้านบน ค่าบวกช่วยเลื่อนขึ้น และค่าลบช่วยเลื่อนลง คุณสมบัติด้านซ้ายและขวาจะย้ายองค์ประกอบไปทางขวาและซ้ายตามลำดับ เมื่อรวมทั้งหมดเข้าด้วยกัน คุณสามารถกำหนดตำแหน่งที่แน่นอนของบล็อกบนหน้า โดยเลื่อนไปตามแกนพิกัดแนวตั้งและแนวนอน หากคุณเพิ่มการเยื้อง การเยื้องเหล่านั้นจะไม่คำนวณจากขอบของบล็อก แต่จากการคัดลอกออฟเซ็ตไปด้านข้าง
ตำแหน่งที่แน่นอน
ตำแหน่งที่แน่นอนของบล็อกใน CSS ถูกระบุโดยค่าของคุณสมบัติตำแหน่งที่แน่นอน องค์ประกอบที่อยู่ในตำแหน่งนั้นหลุดออกจากโฟลว์เอกสารอย่างแน่นอน และบล็อกที่อยู่ติดกันจะเข้ามาแทนที่ ความกว้างขององค์ประกอบดังกล่าวจะถูกขยายขึ้นอยู่กับเนื้อหาและสามารถเลื่อนได้โดยการตั้งค่าคุณสมบัติบางอย่างบน, ซ้าย, ขวา, ล่าง การวางตำแหน่งที่แน่นอนของบล็อกใน CSS มีประโยชน์สำหรับส่วนหัว แต่ตำแหน่ง: สัมบูรณ์ไม่ได้ทำงานเฉพาะกับองค์ประกอบบล็อกเท่านั้น แต่ยังรวมถึงองค์ประกอบแบบอินไลน์ด้วย
การจัดองค์ประกอบให้อยู่ตรงกลาง
องค์ประกอบอินไลน์ที่อยู่ในตำแหน่งจะทำงานเหมือนกับองค์ประกอบอินไลน์ทุกประการ ดังนั้น การวางตำแหน่งยังสามารถใช้เพื่อควบคุมข้อความใน CSS ได้ด้วย คุณสามารถใช้คุณสมบัติใหม่บางอย่างได้ เช่น เปลี่ยนความสูงและความกว้าง การจัดกึ่งกลางและแนวตั้งใน CSS ใช้คุณสมบัติหลายอย่างรวมกัน ควบคุมการจัดตำแหน่งแนวตั้งของคุณสมบัติด้านบน หากคุณต้องการจัดบล็อกให้อยู่ตรงกลางใน CSS คอนเทนเนอร์หลักควรอยู่ในตำแหน่งที่ค่อนข้างเหมาะสม และองค์ประกอบที่จัดชิดควรอยู่ในตำแหน่งที่แน่นอน คอนเทนเนอร์จำเป็นต้องตั้งค่าคุณสมบัติด้านบน: 50% และหากต้องการย้ายองค์ประกอบตามความสูงครึ่งหนึ่งของตัวเอง ให้ใช้คุณสมบัติการแปลที่มีค่า "0, -50%" องค์ประกอบที่มีตำแหน่งที่แน่นอนสามารถแยกแยะได้เป็นประเภทใหม่ เนื่องจากคุณสมบัติที่ไม่พร้อมใช้งานสำหรับการวางตำแหน่งประเภทอื่นจะถูกนำไปใช้กับองค์ประกอบเหล่านั้น
ตำแหน่งที่สัมพันธ์กับมุมซ้ายบนของเบราว์เซอร์
คุณสมบัติด้านซ้าย บน ขวา และล่างทำงานแตกต่างกันบนองค์ประกอบที่มีตำแหน่งที่แน่นอนและค่อนข้างตรงกัน สำหรับองค์ประกอบที่สัมพันธ์กัน คุณสมบัติเหล่านี้จะตั้งค่าออฟเซ็ตที่สัมพันธ์กับตำแหน่งขององค์ประกอบนั้น ตำแหน่งที่แน่นอนจะครอบครองตำแหน่งที่สัมพันธ์กับระบบพิกัดเฉพาะซึ่งเชื่อมโยงกับขนาดของหน้าต่างเบราว์เซอร์ จุดเริ่มต้นของระบบนี้คือมุมหน้าต่าง เมื่อใช้คุณสมบัติด้านซ้าย การเยื้องจะถูกนับจากด้านซ้ายของเบราว์เซอร์ แต่จะไม่มีแถบเลื่อน คุณสมบัติด้านบน เมื่ออยู่ในตำแหน่งที่แน่นอน จะระบุออฟเซ็ตจากด้านบนของเบราว์เซอร์ไปจนถึงด้านบนขององค์ประกอบที่จะใช้ ด้วยการรวมคุณสมบัติทั้งสองเข้าด้วยกัน จึงสามารถย้ายองค์ประกอบโดยสัมพันธ์กับมุมซ้ายบนของเบราว์เซอร์ได้
ตำแหน่งสัมพันธ์กับมุมขวาบนของเบราว์เซอร์
ในทำนองเดียวกัน การใช้คุณสมบัติด้านขวาและด้านบน คุณสามารถกดองค์ประกอบไปทางด้านขวาของหน้าต่างเบราว์เซอร์และเปลี่ยนตำแหน่งแนวตั้ง โดยเลื่อนไปที่มุมขวาบน หากคุณสมบัติที่ถูกต้องถูกตั้งค่าเป็นค่าลบ บล็อกจะย้ายออกไปนอกขอบหน้าต่าง หลังจากนี้ แถบเลื่อนควรปรากฏขึ้น หากต้องการย้ายองค์ประกอบลง ให้ใช้คุณสมบัติด้านล่าง ระบุการเยื้องจากขอบด้านล่างของหน้าต่างเบราว์เซอร์ไปที่ด้านล่างของบล็อก หากค่าเป็นลบ แถบเลื่อนก็จะปรากฏขึ้นเช่นกัน เนื่องจากองค์ประกอบถูกย้ายเกินขอบด้านล่างของหน้าต่างเบราว์เซอร์
ระบบพิกัดสำหรับตำแหน่งที่แน่นอน
ตามค่าเริ่มต้น องค์ประกอบทั้งหมดที่ได้รับการกำหนดตำแหน่งที่แน่นอนจะเชื่อมโยงกับระบบพิกัดเดียว - หน้าต่างเบราว์เซอร์ แต่สามารถเปลี่ยนแปลงได้โดยให้องค์ประกอบหลักวางตำแหน่งสัมพันธ์กัน จากนั้นบล็อกลูกจะเปลี่ยนตำแหน่งขึ้นอยู่กับพาเรนต์ หากในบรรดาองค์ประกอบหลักมีหลายรายการที่มีตำแหน่งสัมพันธ์กัน การนับจะดำเนินการจากองค์ประกอบที่ใกล้ที่สุด ในกรณีนี้ ตำแหน่งเริ่มต้นจะมาจากสิ่งที่ระบุไว้ในแท็กเนื้อหา
จุดอ้างอิงสำหรับองค์ประกอบที่มีตำแหน่งที่แน่นอน
ก่อนที่องค์ประกอบจะได้รับตำแหน่งที่แน่นอน องค์ประกอบนั้นอยู่ที่สถานที่บางแห่งที่เรียกว่าต้นกำเนิดโดยนัย หากบล็อกดังกล่าวไม่ได้รับคุณสมบัติ บล็อกนั้นก็จะไม่เคลื่อนที่ คุณสามารถเลื่อนได้โดยการตั้งค่าคุณสมบัติระยะขอบ มันจะทำงานคล้ายกับคุณสมบัติการวางตำแหน่ง หากคุณไม่ได้กำหนดค่าของคุณสมบัติด้านซ้ายและคุณสมบัติอื่นๆ ทั้งหมด ค่านั้นจะเท่ากับอัตโนมัติ คุณยังสามารถใช้อัตโนมัติเพื่อคืนองค์ประกอบกลับไปยังตำแหน่งเดิมได้
ตำแหน่งคงที่
ค่าอื่นได้รับการแก้ไขแล้ว คุณสมบัติตำแหน่งจะยึดองค์ประกอบไว้ที่ตำแหน่งเฉพาะ การวางตำแหน่งคงที่มักใช้เพื่อสร้างเมนูใน CSS มันคล้ายกับค่าสัมบูรณ์ แต่บล็อกคงที่หลุดออกจากโฟลว์ แม้ว่าจะเลื่อนหน้า องค์ประกอบดังกล่าวจะยังคงอยู่ ดังนั้นจึงสะดวกที่จะใช้สร้างเมนูใน CSS จุดเริ่มต้นจะเชื่อมโยงกับหน้าต่างเบราว์เซอร์ หากมีบล็อกหลายตำแหน่ง คุณสมบัติ z-index จะถูกใช้ในการเรียงลำดับ ด้วยความช่วยเหลือ คุณสามารถซ้อนทับบล็อกสัมพัทธ์กับบล็อกสัมบูรณ์ได้ หากคุณให้ดัชนีที่เกี่ยวข้องซึ่งแสดงเป็นจำนวนเต็ม ยิ่งมีขนาดใหญ่เท่าใด บล็อกก็จะยิ่งสูงขึ้นเท่านั้น
หนึ่งในสิ่งที่ดีที่สุดเกี่ยวกับ CSS คือสไตล์ที่ทำให้เราสามารถวางตำแหน่งเนื้อหาและองค์ประกอบบนเพจได้แทบทุกวิถีทางเท่าที่จะจินตนาการได้ สิ่งนี้จะเพิ่มโครงสร้างให้กับการออกแบบของเราและช่วยทำให้เนื้อหามีภาพมากขึ้น
มีไม่กี่อย่าง ประเภทต่างๆการวางตำแหน่งใน CSS แต่ละประเภทเหล่านี้มีขอบเขตของตัวเอง ในบทนี้ เราจะดูกรณีการใช้งานที่แตกต่างกันสองสามกรณี ได้แก่ การสร้างเลย์เอาต์ที่นำมาใช้ซ้ำได้ และการวางตำแหน่งองค์ประกอบแบบใช้แล้วทิ้งที่ไม่ซ้ำกัน และอธิบายวิธีการบางอย่างในการดำเนินการดังกล่าว
การวางตำแหน่งผ่านการลอย
วิธีหนึ่งในการวางตำแหน่งองค์ประกอบบนเพจคือผ่านคุณสมบัติ float คุณสมบัตินี้ค่อนข้างหลากหลายและสามารถใช้งานได้หลายวิธี
โดยพื้นฐานแล้ว คุณสมบัติ float จะรับองค์ประกอบ ลบออกจากโฟลว์ปกติของเพจ และวางตำแหน่งไว้ทางซ้ายหรือขวาขององค์ประกอบหลัก องค์ประกอบอื่นๆ ทั้งหมดในหน้าจะล้อมรอบองค์ประกอบดังกล่าว ตัวอย่างเช่น ย่อหน้าจะล้อมรอบรูปภาพหากเป็นองค์ประกอบ ตั้งค่าคุณสมบัติ float แล้ว
เมื่อคุณสมบัติ float ถูกนำไปใช้กับองค์ประกอบหลายรายการพร้อมกัน มันจะทำให้สามารถสร้างเลย์เอาต์ที่มีองค์ประกอบลอยอยู่ติดกันหรือตรงข้ามกัน ดังที่แสดงในโครงร่างแบบหลายคอลัมน์
คุณสมบัติ float รับค่าหลายค่า โดยค่าที่ได้รับความนิยมมากที่สุด 2 ค่าคือค่าซ้ายและขวา ซึ่งทำให้องค์ประกอบลอยไปทางซ้ายหรือขวาของค่าแม่
Img ( ลอย: ซ้าย; )
ลอยในทางปฏิบัติ
มาสร้างเค้าโครงหน้าทั่วไปโดยมีส่วนหัวอยู่ด้านบน สองคอลัมน์ตรงกลาง และส่วนท้ายที่ด้านล่าง ตามหลักการแล้ว หน้านี้ควรมาร์กอัปด้วยองค์ประกอบต่างๆ
,
,
สาธิตการวางแบบไม่มีโฟลต
นี่คือองค์ประกอบ และ
ส่วน ( ลอย: ซ้าย; ) กัน ( ลอย: ขวา; )
สำหรับการอ้างอิง องค์ประกอบแบบลอยจะถูกวางตำแหน่งตามขอบขององค์ประกอบหลัก หากไม่มีพาเรนต์ องค์ประกอบแบบลอยจะถูกวางตำแหน่งตามขอบของหน้า
เมื่อเราตั้งค่าองค์ประกอบให้ลอย เราจะลบออกจากโฟลว์ปกติของเอกสาร HTML ซึ่งจะทำให้ความกว้างเริ่มต้นขององค์ประกอบนั้นกลายเป็นความกว้างของเนื้อหา บางครั้ง เช่น เมื่อเรากำลังสร้างคอลัมน์สำหรับเค้าโครงที่นำมาใช้ใหม่ ลักษณะการทำงานนี้เป็นสิ่งที่ไม่พึงประสงค์ ซึ่งสามารถแก้ไขได้โดยการเพิ่มคุณสมบัติความกว้างที่มีค่าคงที่สำหรับแต่ละคอลัมน์ นอกจากนี้ เพื่อป้องกันไม่ให้องค์ประกอบที่ลอยอยู่แตะกัน ส่งผลให้เนื้อหาขององค์ประกอบหนึ่งอยู่ติดกัน เราสามารถใช้คุณสมบัติมาร์จิ้นเพื่อกำหนดช่องว่างระหว่างองค์ประกอบต่างๆ
ด้านล่างนี้เราขยายบล็อกโค้ดก่อนหน้าโดยการเพิ่มระยะขอบและความกว้างสำหรับแต่ละคอลัมน์เพื่อให้รูปร่างผลลัพธ์ที่เราต้องการดีขึ้น
ส่วน ( ลอย: ซ้าย; ระยะขอบ: 0 1.5%; ความกว้าง: 63%; ) กัน ( ลอย: ขวา; ระยะขอบ: 0 1.5%; ความกว้าง: 30%; )
การสาธิตเค้าโครงพร้อมโฟลต
float สามารถเปลี่ยนค่าการแสดงผลขององค์ประกอบได้
สำหรับองค์ประกอบแบบลอย สิ่งสำคัญคือต้องเข้าใจว่าองค์ประกอบนั้นถูกลบออกจากโฟลว์ปกติของหน้า และค่าที่แสดงเริ่มต้นขององค์ประกอบอาจเปลี่ยนแปลงได้ คุณสมบัติ float อาศัยค่าการแสดงผลขององค์ประกอบที่ถูกตั้งค่าเป็นบล็อก และสามารถเปลี่ยนค่าการแสดงผลเริ่มต้นขององค์ประกอบได้ หากยังไม่ได้แสดงผลเป็นองค์ประกอบบล็อก
ตัวอย่างเช่น องค์ประกอบที่ระบุการแสดงผลเป็นแบบอินไลน์ เช่น อินไลน์ ละเว้นคุณสมบัติความสูงหรือความกว้างใดๆ อย่างไรก็ตาม หากคุณระบุทศนิยมสำหรับองค์ประกอบแบบอินไลน์ ค่าที่แสดงจะเปลี่ยนเป็นบล็อก จากนั้นองค์ประกอบจะสามารถใช้คุณสมบัติความสูงหรือความกว้างได้แล้ว
เมื่อเราลอยองค์ประกอบ เราต้องระวังว่าองค์ประกอบนั้นจะส่งผลต่อค่าของคุณสมบัติการแสดงผลอย่างไร
สำหรับสองคอลัมน์ คุณสามารถตั้งค่า float คอลัมน์หนึ่งเป็นด้านซ้ายและอีกคอลัมน์เป็นด้านขวา แต่สำหรับหลายคอลัมน์ เราจะต้องเปลี่ยนแนวทางของเรา ตัวอย่างเช่น สมมติว่าเราต้องการให้มีแถวสามคอลัมน์ระหว่างองค์ประกอบของเรา และ
เพื่อจัดองค์ประกอบทั้งสามนี้ ในแถวที่มีสามคอลัมน์ เราต้องตั้งค่า float ให้กับองค์ประกอบทั้งหมด เหมือนไปทางซ้าย เราต้องปรับความกว้างด้วย โดยคำนึงถึงคอลัมน์เพิ่มเติมและวางไว้ติดกัน
ส่วน ( ลอย: ซ้าย; ระยะขอบ: 0 1.5%; ความกว้าง: 30%; )
ที่นี่เรามีสามคอลัมน์ โดยทั้งหมดมีความกว้างและค่าระยะขอบเท่ากัน และตั้งค่าลอยไปทางซ้าย
การสาธิตเค้าโครงสามคอลัมน์แบบลอยตัว
การล้างและลอยเนื้อหา
คุณสมบัติ float ได้รับการออกแบบมาเพื่อให้เนื้อหาไหลไปรอบๆ รูปภาพ ภาพสามารถทำให้เกิดการลอยตัวและเนื้อหาทั้งหมดที่อยู่รอบๆ ภาพนั้นจะไหลไปรอบๆ ภาพนั้นอย่างเป็นธรรมชาติ แม้ว่าคุณสมบัตินี้จะใช้งานได้ดีกับรูปภาพ แต่คุณสมบัติ float ไม่ได้มีจุดประสงค์เพื่อใช้ในการจัดวางและการวางตำแหน่งจริงๆ ดังนั้นจึงมาพร้อมกับข้อผิดพลาดบางประการ
ข้อผิดพลาดอย่างหนึ่งคือบางครั้งสไตล์ที่เหมาะสมไม่ปรากฏบนองค์ประกอบที่อยู่ติดกันหรือเป็นพาเรนต์ขององค์ประกอบแบบลอย เมื่อองค์ประกอบถูกตั้งค่าเป็นลอย องค์ประกอบนั้นจะถูกลบออกจากโฟลว์ปกติของเพจ และด้วยเหตุนี้ รูปแบบขององค์ประกอบรอบๆ องค์ประกอบที่ลอยอยู่จึงอาจได้รับผลกระทบในทางลบ
บ่อยครั้งที่ค่าของคุณสมบัติระยะขอบและช่องว่างภายในถูกตีความอย่างไม่ถูกต้อง ส่งผลให้ค่าเหล่านั้นผสานเข้ากับองค์ประกอบลอยตัว คุณสมบัติอื่น ๆ อาจได้รับผลกระทบเช่นกัน
จุดบกพร่องอีกประการหนึ่งคือบางครั้งเนื้อหาที่ไม่ต้องการเริ่มพันรอบองค์ประกอบโฟลต การลบองค์ประกอบออกจากโฟลว์ของเอกสารทำให้องค์ประกอบทั้งหมดรอบๆ องค์ประกอบแบบลอยสามารถข้ามได้ และใช้พื้นที่ว่างรอบๆ องค์ประกอบแบบลอย ซึ่งมักไม่เป็นที่พึงปรารถนา
ในตัวอย่างสองคอลัมน์ก่อนหน้าของเรา หลังจากที่เราเพิ่มทศนิยมให้กับองค์ประกอบแล้ว และ แต่ก่อนที่จะตั้งค่าคุณสมบัติ width ให้กับเนื้อหาภายในองค์ประกอบนั้น
การสาธิตเค้าโครงโดยไม่ต้องเคลียร์โฟลต
เพื่อป้องกันไม่ให้เนื้อหาพันรอบองค์ประกอบแบบลอย เราจำเป็นต้องล้างโฟลตและทำให้เพจกลับสู่โฟลว์ปกติ เราจะมาดูวิธีการเคลียร์โฟลตแล้วมาดูเนื้อหากันดีกว่า
เคลียร์ลอย
การล้างโฟลตเกิดขึ้นโดยใช้คุณสมบัติ clear ซึ่งใช้ค่าที่แตกต่างกันหลายค่า: ค่าที่ใช้บ่อยที่สุดคือ left , right และทั้งสองอย่าง
Div ( ชัดเจน: ซ้าย; )
ค่าทางซ้ายจะล้างโฟลตทางซ้าย ในขณะที่ค่าทางขวาจะล้างโฟลตทางขวา อย่างไรก็ตาม ค่าทั้งสองจะล้างโฟลตซ้ายและขวา และมักจะเป็นตัวเลือกที่เหมาะสมที่สุด
ย้อนกลับไปที่ตัวอย่างก่อนหน้านี้ หากเราใช้คุณสมบัติ clear ที่มีค่าทั้งสองอย่างในองค์ประกอบ แล้วเราก็เคลียร์ทุ่นได้เลย สิ่งสำคัญคือต้องล้างองค์ประกอบที่ระบุหลังองค์ประกอบลอย ไม่ใช่ก่อนหน้า เพื่อให้เพจกลับสู่โฟลว์ปกติ
ส่วนท้าย ( ชัดเจน: ทั้งสอง; )
การสาธิตโครงร่างพร้อมการเคลียร์โฟลต
เนื้อหาลอย
แทนที่จะล้างข้อมูล float อีกทางเลือกหนึ่งคือตั้งค่าเนื้อหาให้ลอย ผลลัพธ์จะค่อนข้างเหมือนเดิม แต่เนื้อหาแบบลอยช่วยให้แน่ใจว่าสไตล์ของเราทั้งหมดจะแสดงอย่างถูกต้อง
ในการตั้งค่าเนื้อหาแบบลอย องค์ประกอบแบบลอยจะต้องอยู่ภายในองค์ประกอบหลัก โดยจะทำหน้าที่เป็นคอนเทนเนอร์ ปล่อยให้การไหลของเอกสารภายนอกเป็นปกติโดยสมบูรณ์ การจัดสไตล์สำหรับองค์ประกอบหลักนี้แสดงโดยคลาสกลุ่ม ดังที่แสดงไว้ที่นี่:
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear: ทั้งสอง; ) .group ( clear: ทั้งสอง; *zoom: 1; )
ไม่ค่อยมีอะไรเกิดขึ้นมากนัก แต่โดยพื้นฐานแล้ว CSS ทั้งหมดจะล้างองค์ประกอบที่ลอยอยู่ทั้งหมดภายในองค์ประกอบกลุ่มและคืนเอกสารกลับสู่โฟลว์ปกติ
โดยเฉพาะอย่างยิ่ง องค์ประกอบหลอก ::before และ ::after ตามที่กล่าวไว้ในบทที่ 4 จะสร้างองค์ประกอบแบบไดนามิกด้านบนและด้านล่างองค์ประกอบด้วยกลุ่มคลาส องค์ประกอบเหล่านี้ไม่รวมเนื้อหาใดๆ และแสดงผลเป็นองค์ประกอบตาราง คล้ายกับองค์ประกอบบล็อก องค์ประกอบที่สร้างขึ้นแบบไดนามิกหลังจากองค์ประกอบกลุ่มล้างโฟลตภายในองค์ประกอบกลุ่ม เช่นเดียวกับที่ชัดเจนก่อนหน้านี้ ในที่สุด องค์ประกอบกลุ่มยังล้างโฟลตใด ๆ ที่อาจปรากฏขึ้นก่อนหน้านั้น ในกรณีที่มีการโฟลตที่มีค่า left หรือ right รวมไปถึงเคล็ดลับเล็กน้อยที่ทำให้เบราว์เซอร์รุ่นเก่าเล่นได้ดี
มีโค้ดมากกว่าแค่ชัดเจน: ทั้งสองคำสั่ง แต่มันค่อนข้างมีประโยชน์
เมื่อพิจารณาเค้าโครงหน้าสองคอลัมน์ของเราแล้ว เราก็สามารถสรุปได้ และ องค์ประกอบหลัก องค์ประกอบหลักนี้จะมีองค์ประกอบลอยตัว รหัสจะมีลักษณะดังนี้:
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear:both; ) .group ( clear:both; *zoom: 1; ) ส่วน ( float: left ; ระยะขอบ: 0 1.5%; ความกว้าง: 63%; ) กัน ( ลอย: ขวา; ระยะขอบ: 0 1.5%; ความกว้าง: 30%; )
การสาธิตเลย์เอาต์ที่มีเนื้อหาแบบโฟลต
เทคนิคที่แสดงที่นี่เรียกว่า "clearfix" และมักพบเห็นได้ทั่วไปในไซต์อื่นที่มีชื่อคลาส clearfix หรือ cf เราเลือกใช้กลุ่มชื่อคลาสเนื่องจากแสดงถึงกลุ่มขององค์ประกอบและแสดงเนื้อหาได้ดีกว่า
เมื่อองค์ประกอบถูกตั้งค่าเป็นโฟลต สิ่งสำคัญคือต้องตรวจสอบว่าองค์ประกอบเหล่านั้นส่งผลต่อโฟลว์เพจอย่างไร และให้แน่ใจว่าโฟลว์เพจถูกรีเซ็ตผ่านการล้างหรือผ่านเนื้อหาโฟลตตามที่ตั้งใจไว้ มิฉะนั้น การติดตามจำนวนโฟลตอาจทำให้เกิดอาการปวดหัวได้มาก โดยเฉพาะในหน้าที่มีหลายแถว โดยแต่ละแถวมีหลายคอลัมน์
ในการฝึกฝน
กลับไปที่ไซต์ Styles Conference แล้วลองเพิ่มโฟลตให้กับเนื้อหาบางส่วน
- ก่อนอื่น ก่อนที่จะใช้ float กับองค์ประกอบใดๆ เรามาจัดเตรียมเนื้อหาให้กับองค์ประกอบ float เหล่านั้นโดยการเพิ่ม clearfix ให้กับ CSS ของเรา ในไฟล์ main.css ด้านล่างสไตล์กริดของเรา เราจะเพิ่ม clearfix ใต้ชื่อคลาสกลุ่มเหมือนเมื่อก่อน /* ================================================ ====== เคลียร์ฟิกซ์ ======= =================================== * / .group::before, .group::after ( เนื้อหา: " "; แสดง: ตาราง; ) .group::after ( ชัดเจน: ทั้งสอง; ) .group ( ชัดเจน: ทั้งสอง; *ซูม: 1; )
ตอนนี้เราสามารถใช้ float ได้แล้ว มากำหนดมันสำหรับตัวหลักกันดีกว่า
องค์ประกอบภายใน ไปทางซ้ายและปล่อยให้เนื้อหาที่เหลือในส่วนหัวไหลไปทางขวาเมื่อต้องการทำเช่นนี้ ให้เพิ่มคลาสโลโก้ให้กับองค์ประกอบ
. ต่อไป ภายใน CSS ของเรา เราจะเพิ่มส่วนสไตล์ใหม่สำหรับส่วนหัวหลัก ในส่วนนี้เราจะเลือกองค์ประกอบ ด้วยคลาสโลโก้และตั้งค่าโฟลตไปทางซ้าย
/* ======================================= หัวเรื่องหลัก ====== = =================================== */ .logo ( float: left; )ระหว่างที่เราอยู่ที่นี่ มาเพิ่มรายละเอียดเล็กๆ น้อยๆ ให้กับโลโก้ของเรากัน เริ่มต้นด้วยการวางองค์ประกอบ
หรือการแบ่งบรรทัดระหว่างคำว่า "สไตล์" และ "การประชุม" เพื่อบังคับให้ข้อความโลโก้ของเราปรากฏเป็นสองบรรทัด
ใน CSS เราจะเพิ่มเส้นขอบที่ด้านบนของโลโก้และช่องว่างภายในแนวตั้งเพื่อให้โลโก้ "หายใจ" ได้อย่างอิสระ
โลโก้ ( ขอบด้านบน: 4px solid #648880; padding: 40px 0 22px 0; float: left; )
เนื่องจากเราสร้างธาตุขึ้นมา
คล่องตัวขึ้น เราต้องการตั้งค่าเนื้อหาให้ลอย ผู้ปกครองทันทีสำหรับ เป็นองค์ประกอบ ดังนั้นเราจะเพิ่มคลาสกลุ่มลงไป นี่จะใช้สไตล์ clearfix ที่เราตั้งไว้ก่อนหน้านี้
องค์ประกอบ กลายเป็นรูปเป็นร่างแล้ว มาดูองค์ประกอบกันดีกว่า . คล้ายกับสิ่งที่เราทำกับ เราจะกำหนดลอยลิขสิทธิ์ของเราไว้ข้างใน และปล่อยให้องค์ประกอบอื่นๆ ไหลรอบๆ ไปทางขวา
ไม่เหมือนธาตุ อย่างไรก็ตาม เราจะไม่นำคลาสไปใช้กับองค์ประกอบแบบลอยโดยตรง คราวนี้เราจะเพิ่มคลาสให้กับพาเรนต์ขององค์ประกอบ float และใช้ตัวเลือก CSS ที่ไม่ซ้ำกันเพื่อเลือกองค์ประกอบจากนั้นให้มันเป็น float
เริ่มต้นด้วยการเพิ่มคลาส primary-footer ให้กับองค์ประกอบ . เพราะเรารู้ว่าเราจะมีองค์ประกอบที่คล่องตัวอยู่ภายใน จากนั้นเราควรเพิ่มคลาสกลุ่มในขณะที่เราอยู่
ตอนนี้คลาส primary-footer ถูกตั้งค่าบนองค์ประกอบแล้ว เราสามารถใช้คลาสนี้เพื่อเลือกองค์ประกอบโดยเฉพาะได้ กับ ใช้ CSS. เราอยากให้มันลอยเหมือนซ้าย อย่าลืมสร้างส่วนใหม่ในไฟล์ main.css ของเราสำหรับรูปแบบส่วนท้ายหลัก
/* ======================================== ชั้นใต้ดินหลัก ====== ==================================== */ .primary-footer ขนาดเล็ก ( float: left; ) เพื่อตรวจสอบ - ที่นี่เราเลือกองค์ประกอบ ซึ่งควรอยู่ภายในองค์ประกอบที่มีค่าแอตทริบิวต์คลาสเป็น primary-footer เช่นองค์ประกอบของเรา
สุดท้ายนี้ เราจะเพิ่มช่องว่างภายในเล็กน้อยที่ด้านบนและด้านล่างขององค์ประกอบ ซึ่งจะช่วยแยกส่วนออกจากส่วนที่เหลือของหน้าเล็กน้อย เราสามารถทำได้โดยตรงโดยใช้คลาส primary-footer
ส่วนท้ายหลัก ( padding-bottom: 44px; padding-top: 44px; )
คำนึงถึงการเปลี่ยนแปลงองค์ประกอบทั้งหมดนี้ และ เราต้องแน่ใจว่าได้รวมไว้ในทุกหน้า ไม่ใช่แค่หน้า index.html
ข้าว. 5.01. การใช้องค์ประกอบลอยหลายรายการ และ ในหน้าหลักของ Styles Conference ทำงานร่วมกัน
การวางตำแหน่งผ่านอินไลน์บล็อก
นอกเหนือจากการใช้ float แล้ว อีกวิธีหนึ่งที่เราสามารถวางตำแหน่งเนื้อหาได้คือการใช้คุณสมบัติการแสดงผลร่วมกับค่า inline-block วิธีการบล็อกแบบอินไลน์ ดังที่เราจะกล่าวถึงในภายหลัง มีประโยชน์เป็นหลักสำหรับการจัดวางหน้าหรือการวางองค์ประกอบในบรรทัดที่อยู่ติดกัน
โปรดจำไว้ว่าค่าบล็อกอินไลน์สำหรับคุณสมบัติการแสดงผลจะแสดงองค์ประกอบในบรรทัด และอนุญาตให้องค์ประกอบเหล่านั้นใช้กับคุณสมบัติทั้งหมดของโมเดลกล่อง รวมถึงความสูง ความกว้าง การแพ็ดดิ้ง เส้นขอบ และระยะขอบ การใช้ inline-block ช่วยให้เราสามารถใช้ประโยชน์จากโมเดลบล็อกได้อย่างเต็มที่โดยไม่ต้องกังวลกับการล้างโฟลตใดๆ
อินไลน์บล็อกในทางปฏิบัติ
ลองมาดูตัวอย่างสามคอลัมน์ของเราตั้งแต่ต้น เราจะเริ่มต้นด้วยการบันทึก HTML ของเราดังนี้:
ตอนนี้แทนที่จะลอยสำหรับองค์ประกอบทั้งสามของเรา เราจะเปลี่ยนค่าการแสดงผลเป็น inline-block แล้วออกไป คุณสมบัติมาร์จิ้นและความกว้างเท่าเดิม ด้วยเหตุนี้ CSS ของเราจึงมีลักษณะดังนี้:
ส่วน ( จอแสดงผล: อินไลน์บล็อก; ระยะขอบ: 0 1.5%; ความกว้าง: 30%; )
น่าเสียดายที่โค้ดนี้เพียงอย่างเดียวไม่เพียงพอที่จะทำเคล็ดลับและองค์ประกอบสุดท้าย ถูกผลักไปที่บรรทัดใหม่ โปรดจำไว้ว่า เนื่องจากองค์ประกอบบล็อกอินไลน์ปรากฏบนบรรทัดติดกัน จึงมีช่องว่างระหว่างองค์ประกอบเหล่านั้น เมื่อเพิ่มขนาดของแต่ละช่องว่างเข้ากับความกว้างและค่าระยะขอบแนวนอนขององค์ประกอบทั้งหมดในแถว ความกว้างโดยรวมจะใหญ่เกินไป โดยผลักองค์ประกอบสุดท้ายออกไป ไปที่บรรทัดใหม่ เพื่อแสดงรายการทั้งหมด ในหนึ่งบรรทัด คุณควรลบช่องว่างระหว่างแต่ละบรรทัดออก
การสาธิตองค์ประกอบอินไลน์บล็อกพร้อมพื้นที่
การลบช่องว่างระหว่างองค์ประกอบอินไลน์บล็อก
มีหลายวิธีในการลบช่องว่างระหว่างองค์ประกอบบล็อกอินไลน์ และบางวิธีก็ซับซ้อนกว่าวิธีอื่นๆ เราจะมุ่งเน้นไปที่สองมากที่สุด วิธีการง่ายๆซึ่งแต่ละอย่างจะเกิดขึ้นภายใน HTML
วิธีแก้ไขแรกคือการใส่แท็กเปิดองค์ประกอบใหม่แต่ละรายการ ในบรรทัดเดียวกับแท็กปิดขององค์ประกอบก่อนหน้า . แทนที่จะใช้ บรรทัดใหม่สำหรับแต่ละองค์ประกอบ เราจะเริ่มต้นองค์ประกอบต่างๆ ในบรรทัดเดียวกัน HTML ของเราอาจมีลักษณะดังนี้:
การเขียนองค์ประกอบแบบอินไลน์บล็อกด้วยวิธีนี้ทำให้มั่นใจได้ว่าไม่มีช่องว่างระหว่างองค์ประกอบดังกล่าวใน HTML ดังนั้นช่องว่างจะไม่ปรากฏขึ้นเมื่อเพจถูกแสดง
การสาธิตองค์ประกอบอินไลน์บล็อกโดยไม่มีช่องว่าง
อีกวิธีในการลบช่องว่างระหว่างองค์ประกอบบล็อกอินไลน์คือการเปิดความคิดเห็น HTML ทันทีหลังแท็กปิดขององค์ประกอบ จากนั้นปิดความคิดเห็นก่อนแท็กเปิดขององค์ประกอบถัดไป ซึ่งช่วยให้องค์ประกอบบล็อกอินไลน์เริ่มต้นและสิ้นสุดในบรรทัดที่แยกกันใน HTML และจะ "ใส่เครื่องหมายความคิดเห็น" ช่องว่างที่เป็นไปได้ระหว่างองค์ประกอบ รหัสผลลัพธ์จะมีลักษณะดังนี้:
ไม่มีตัวเลือกใดที่สมบูรณ์แบบ แต่มีประโยชน์ ฉันมักจะชอบใช้ความคิดเห็นเพื่อการจัดระเบียบที่ดีขึ้น แต่ตัวเลือกที่คุณเลือกนั้นขึ้นอยู่กับคุณเลย
สร้างเค้าโครงที่นำมาใช้ซ้ำได้
เมื่อสร้างไซต์ วิธีที่ดีที่สุดเสมอคือการเขียนสไตล์โมดูลาร์ที่สามารถนำมาใช้ซ้ำที่อื่นได้ และเลย์เอาต์ที่นำมาใช้ซ้ำได้จะอยู่ที่ด้านบนของรายการโค้ดที่นำมาใช้ซ้ำได้ เค้าโครงสามารถสร้างได้โดยใช้องค์ประกอบลอยหรือบล็อกอินไลน์ แต่องค์ประกอบใดทำงานได้ดีที่สุดและเพราะเหตุใด
คำถามที่ว่าองค์ประกอบแบบลอยหรือแบบอินไลน์บล็อกดีกว่าสำหรับโครงสร้างหน้าหรือไม่นั้นเปิดให้ถกเถียงกัน แนวทางของฉันคือการใช้องค์ประกอบบล็อกอินไลน์เพื่อสร้างกริดหรือเค้าโครงหน้า จากนั้นใช้โฟลตเมื่อฉันต้องการให้เนื้อหาไหลไปรอบๆ องค์ประกอบ (ซึ่งเป็นสิ่งที่โฟลตได้รับการออกแบบเมื่อทำงานกับรูปภาพ) โดยทั่วไปแล้ว ฉันยังพบว่าองค์ประกอบแบบอินไลน์บล็อกใช้งานได้ง่ายกว่าอีกด้วย
อย่างไรก็ตาม ใช้สิ่งที่ดีที่สุดสำหรับคุณ หากคุณคุ้นเคยกับวิธีหนึ่งมากกว่าอีกวิธีหนึ่ง ก็ให้ใช้วิธีนั้น
มีข้อกำหนด CSS ใหม่ในงาน - โดยเฉพาะคุณสมบัติเฟล็กซ์และกริด - ซึ่งจะช่วยคุณตัดสินใจว่าจะจัดวางเพจของคุณอย่างไรให้ดีที่สุด จับตาดูวิธีการเหล่านี้เมื่อเริ่มปรากฏขึ้น
ในการฝึกฝน
ด้วยความเข้าใจอย่างถ่องแท้เกี่ยวกับเลย์เอาต์ที่นำมาใช้ซ้ำได้ ก็ถึงเวลาที่จะนำไปใช้บนเว็บไซต์ Styles Conference ของเรา
สำหรับเว็บไซต์ Styles Conference เราจะสร้างเค้าโครงสามคอลัมน์โดยใช้องค์ประกอบบล็อกอินไลน์ เราจะทำเช่นนี้เพื่อให้ได้คอลัมน์สามคอลัมน์ที่มีความกว้างเท่ากัน หรือสองคอลัมน์ที่มีความกว้างทั้งหมดหารระหว่างคอลัมน์เหล่านั้นเป็น 2/3 สำหรับคอลัมน์หนึ่ง และ 1/3 สำหรับอีกคอลัมน์หนึ่ง
ขั้นแรก เราจะสร้างคลาสที่กำหนดความกว้างของคอลัมน์เหล่านี้ เราจะเรียกทั้งสองคลาสนี้ว่า col-1-3 สำหรับหนึ่งในสาม และ col-2-3 สำหรับสองในสาม ในส่วนกริดของไฟล์ main.css เรามาดำเนินการต่อและกำหนดคลาสเหล่านี้และความกว้างที่สอดคล้องกัน
Col-1-3 (กว้าง: 33.33%; ) .col-2-3 (กว้าง: 66.66%; )
เราต้องการให้ทั้งสองคอลัมน์ปรากฏเป็นองค์ประกอบบล็อกแบบอินไลน์ เราต้องตรวจสอบให้แน่ใจด้วยว่าได้ตั้งค่าการจัดตำแหน่งแนวตั้งไว้ที่ด้านบนสุดของแต่ละคอลัมน์
มาสร้างตัวเลือกใหม่สองตัวที่แชร์การแสดงผลและการจัดแนวตั้ง
Col-1-3, .col-2-3 ( display: inline-block; Vertical-align: top; )
ลองดู CSS อีกครั้ง เราสร้างตัวเลือกคลาสสองตัว col-1-3 และ col-2-3 คั่นด้วยเครื่องหมายจุลภาค เครื่องหมายจุลภาคที่ส่วนท้ายของตัวเลือกแรกหมายความว่าตัวเลือกอื่นตามด้วย หลังจากตัวเลือกที่สอง จะมีเครื่องหมายปีกกาเปิด ซึ่งบ่งชี้ว่าคำอธิบายสไตล์เริ่มต้นขึ้น ด้วยการใช้เครื่องหมายจุลภาคเพื่อแยกตัวเลือก เราสามารถผูกสไตล์หนึ่งเข้ากับตัวเลือกหลายตัวพร้อมกันได้
เราต้องการเว้นวรรคระหว่างคอลัมน์เพื่อช่วยแยกเนื้อหา ซึ่งสามารถทำได้โดยการเพิ่มช่องว่างภายในแนวนอนลงในแต่ละคอลัมน์
วิธีนี้ใช้ได้ผลดี แต่เมื่อวางสองคอลัมน์ติดกัน ความกว้างของช่องว่างระหว่างคอลัมน์ทั้งสองจะกว้างเป็นสองเท่าของระยะห่างจากขอบด้านนอก เพื่อให้เกิดความสมดุล เราจะวางคอลัมน์ทั้งหมดของเราไว้ในตารางและเพิ่มช่องว่างภายในแบบเดียวกันลงไป
ลองใช้คลาสกริดเพื่อกำหนดกริดของเรา จากนั้นกำหนดช่องว่างในแนวนอนแบบเดียวกันให้กับคลาสกริด col-1-3 และ col-2-3 ด้วยเครื่องหมายจุลภาคเพื่อแยกตัวเลือกของเราอีกครั้ง CSS ของเราจะมีหน้าตาดังนี้:
ตาราง, .col-1-3, .col-2-3 ( ช่องว่างด้านซ้าย: 15px; ช่องว่างด้านขวา: 15px; )
เวลาจะวาง padding แนวนอน ก็ต้องระวังครับ โปรดจำไว้ว่าในบทเรียนที่แล้วเราได้สร้างคอนเทนเนอร์ที่มีคลาสคอนเทนเนอร์เพื่อจัดเนื้อหาทั้งหมดของเราไว้ตรงกลางหน้าด้วยความกว้าง 960 พิกเซล ใน ช่วงเวลานี้ถ้าเราวางองค์ประกอบที่มีคลาสกริดไว้ภายในองค์ประกอบที่มีคลาสคอนเทนเนอร์ การเสริมแนวนอนของพวกมันจะรวมกันและคอลัมน์ของเราจะไม่แสดงตามสัดส่วนความกว้างของส่วนที่เหลือของหน้า
เราจะดำเนินการนี้โดยแจกแจงกฎชุดเก่าของคอนเทนเนอร์ออกดังต่อไปนี้:
คอนเทนเนอร์, .grid ( ระยะขอบ: 0 อัตโนมัติ; ความกว้าง: 960px; ) .container ( ช่องว่างด้านซ้าย: 30px; ช่องว่างด้านขวา: 30px; )
ตอนนี้องค์ประกอบใดๆ ที่มีคลาสคอนเทนเนอร์หรือกริดจะมีความกว้าง 960 พิกเซลและอยู่ที่กึ่งกลางของหน้า นอกจากนี้ เรายังรักษาช่องว่างภายในแนวนอนที่มีอยู่สำหรับองค์ประกอบใดๆ ที่มีคลาสคอนเทนเนอร์โดยการย้ายไปยังชุดกฎใหม่ที่แยกจากกัน
เอาล่ะ ส่วนที่ยากทั้งหมดของการตั้งค่า mesh เสร็จสมบูรณ์แล้ว ตอนนี้ได้เวลาทำงานกับ HTML ของเราแล้วดูว่าคลาสเหล่านี้ทำงานอย่างไร
เราจะเริ่มต้นด้วยทีเซอร์ในหน้าแรกในไฟล์ index.html ซึ่งจัดเรียงเป็นสามคอลัมน์ ทีเซอร์ปัจจุบันถูกรวมไว้ในองค์ประกอบ กับคลาสคอนเทนเนอร์ เราต้องการเปลี่ยนคลาสคอนเทนเนอร์เป็นกริดเพื่อที่เราจะได้เริ่มวางคอลัมน์ไว้ข้างใน
...
...
...
...
และสุดท้าย เนื่องจากแต่ละคอลัมน์ของเราเป็นองค์ประกอบบล็อกแบบอินไลน์ เราจึงต้องแน่ใจว่าได้ลบช่องว่างระหว่างคอลัมน์เหล่านั้นออก ในการดำเนินการนี้ เราจะใช้ความคิดเห็นและเพิ่มเอกสารประกอบลงในแต่ละส่วนเพื่อจัดระเบียบโค้ดของเราให้ดีขึ้น
...
...
...
ในการตรวจสอบ เราได้แสดงความคิดเห็นไว้ในบรรทัดที่ 3 โดยระบุส่วน "ผู้พูด" ที่ตามมา ที่ท้ายบรรทัดที่ 7 เราจะเปิดความคิดเห็นทันทีหลังแท็กปิด ภายในความคิดเห็นนี้ ในบรรทัดที่ 9 เรากำหนดส่วน "กำหนดการ" ต่อไปนี้ จากนั้นปิดความคิดเห็นที่จุดเริ่มต้นของบรรทัด 11 ก่อนแท็กเปิด . โครงสร้างความคิดเห็นที่คล้ายกันจะปรากฏในบรรทัดที่ 13 ถึง 17 ระหว่างองค์ประกอบทั้งสอง ก่อนถึงส่วนสถานที่จัดงาน โดยทั่วไป เราได้ใส่ความคิดเห็นเกี่ยวกับช่องว่างที่อาจเกิดขึ้นระหว่างคอลัมน์ ขณะเดียวกันก็ใช้ความคิดเห็นเดียวกันเพื่อระบุส่วนต่างๆ ของเรา
ขณะนี้เรามีตารางสามคอลัมน์ที่ใช้ซ้ำได้ซึ่งสนับสนุนเค้าโครงที่แตกต่างกัน โดยใช้ความกว้างคอลัมน์ 1/3 และ 2/3 หน้าแรกของเราตอนนี้มีสามคอลัมน์ โดยแยกทีเซอร์ทั้งหมดออก
ข้าว. 5.02. หน้าแรกขณะนี้ Styles Conference มีเค้าโครงสามคอลัมน์
การสาธิตและซอร์สโค้ด
ด้านล่างนี้คุณสามารถดูเว็บไซต์ Styles Conference ในสถานะปัจจุบันและดาวน์โหลดได้ด้วย แหล่งที่มาเว็บไซต์ในขณะนี้
การวางตำแหน่งองค์ประกอบที่ไม่ซ้ำ
ไม่ช้าก็เร็ว ทุกคนจะต้องการวางตำแหน่งองค์ประกอบอย่างแม่นยำ แต่องค์ประกอบแบบลอยหรือบล็อกแบบอินไลน์ไม่อนุญาตให้ใช้กลอุบายดังกล่าว องค์ประกอบแบบลอยที่ลบองค์ประกอบออกจากโฟลว์ของหน้ามักจะให้ผลลัพธ์ที่ไม่พึงประสงค์ เนื่องจากองค์ประกอบที่อยู่รอบๆ ล้อมรอบองค์ประกอบแบบลอย องค์ประกอบบล็อกแบบอินไลน์ เว้นแต่ว่าเรากำลังสร้างคอลัมน์ อาจค่อนข้างยุ่งยากเมื่อพูดถึงการวางตำแหน่งอย่างถูกต้อง สำหรับสถานการณ์เช่นนี้ เราสามารถใช้คุณสมบัติตำแหน่งร่วมกับคุณสมบัติออฟเซ็ตของบล็อกได้
คุณสมบัติตำแหน่งจะกำหนดวิธีการจัดตำแหน่งองค์ประกอบบนเพจ และจะแสดงในการไหลของเอกสารปกติหรือไม่ ใช้ร่วมกับคุณสมบัติออฟเซ็ตของบล็อก top , right , lower และ left ซึ่งกำหนดตำแหน่งองค์ประกอบที่จะวางอย่างแม่นยำโดยการเคลื่อนย้ายองค์ประกอบไปในทิศทางที่ต่างกัน
ตามค่าเริ่มต้น ค่าตำแหน่งขององค์ประกอบแต่ละรายการจะถูกตั้งค่าเป็น static ซึ่งหมายความว่าองค์ประกอบนั้นมีอยู่ในขั้นตอนปกติของเอกสาร และไม่ได้ใช้คุณสมบัติใดๆ ในการวางตำแหน่ง ค่าคงที่มักถูกเขียนทับโดยค่าสัมพัทธ์หรือค่าสัมบูรณ์ ซึ่งเราจะดูต่อไป
ตำแหน่งสัมพัทธ์
การตั้งค่าคุณสมบัติตำแหน่งเป็นแบบสัมพันธ์ช่วยให้องค์ประกอบปรากฏในโฟลว์ปกติของเพจ โดยสงวนพื้นที่สำหรับองค์ประกอบตามที่ตั้งใจไว้ และป้องกันไม่ให้องค์ประกอบอื่นๆ ไหลรอบๆ องค์ประกอบนั้น อย่างไรก็ตาม ยังช่วยให้คุณแก้ไขตำแหน่งขององค์ประกอบโดยใช้คุณสมบัติออฟเซ็ตได้ด้วย ตัวอย่างเช่น พิจารณา HTML และ CSS ต่อไปนี้:
...
...
...
Div ( ความสูง: 100px; ความกว้าง: 100px; ) .offset ( ซ้าย: 20px; ตำแหน่ง: ญาติ; ด้านบน: 20px; )
การสาธิตการวางตำแหน่งสัมพัทธ์
ที่นี่สำหรับองค์ประกอบที่สอง
ด้วยคลาสออฟเซ็ต ค่าตำแหน่งจะถูกตั้งค่าเป็นญาติ เช่นเดียวกับคุณสมบัติออฟเซ็ตสองรายการ - ด้านซ้ายและด้านบน การทำเช่นนี้จะรักษาตำแหน่งเดิมขององค์ประกอบ และองค์ประกอบอื่นๆ จะไม่ได้รับอนุญาตให้ย้ายเข้าไปในพื้นที่นั้น นอกจากนี้ คุณสมบัติออฟเซ็ตจะย้ายองค์ประกอบโดยการกด 20 พิกเซลจากด้านซ้าย และ 20 พิกเซลจากด้านบนของตำแหน่งเดิม
สำหรับองค์ประกอบที่มีตำแหน่งค่อนข้างมาก สิ่งสำคัญคือต้องรู้ว่าคุณสมบัติออฟเซ็ตของบล็อกจะกำหนดตำแหน่งที่องค์ประกอบจะถูกย้าย โดยพิจารณาจากตำแหน่งเดิม ดังนั้นคุณสมบัติด้านซ้ายที่มีค่า 20 พิกเซลจะผลักองค์ประกอบไปทางขวา 20 พิกเซล คุณสมบัติบนสุดที่มีค่า 20px จะดันองค์ประกอบลง 20px
เมื่อเราวางตำแหน่งองค์ประกอบโดยใช้คุณสมบัติออฟเซ็ต องค์ประกอบจะซ้อนทับองค์ประกอบที่อยู่ด้านล่าง แทนที่จะกดลงเหมือนคุณสมบัติระยะขอบหรือช่องว่างภายใน
ตำแหน่งที่แน่นอน
ค่าสัมบูรณ์สำหรับคุณสมบัติตำแหน่งแตกต่างจากค่าสัมพัทธ์ตรงที่องค์ประกอบที่มีตำแหน่งที่แน่นอนไม่ปรากฏในโฟลว์ปกติของเอกสาร และไม่มีการสงวนพื้นที่และตำแหน่งดั้งเดิมขององค์ประกอบที่มีตำแหน่งที่แน่นอน
นอกจากนี้ องค์ประกอบที่มีตำแหน่งที่แน่นอนจะเคลื่อนที่โดยสัมพันธ์กับองค์ประกอบหลักที่อยู่ในตำแหน่งใกล้เคียงที่สุด หากไม่มีตำแหน่งพาเรนต์ที่ค่อนข้างสูง องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะถูกวางตำแหน่งโดยสัมพันธ์กับองค์ประกอบนั้น
. นี่เป็นข้อมูลเล็กๆ น้อยๆ มาดูกันว่ามันทำงานอย่างไรภายในโค้ดบางส่วน:
ส่วน ( ตำแหน่ง: ญาติ; ) div ( ตำแหน่ง: สัมบูรณ์; ขวา: 20px; ด้านบน: 20px; )
การสาธิตการวางตำแหน่งสัมบูรณ์
ในตัวอย่างนี้องค์ประกอบ อยู่ในตำแหน่งที่สัมพันธ์กับ แต่ไม่รวมคุณสมบัติออฟเซ็ตใดๆ ดังนั้นตำแหน่งจึงไม่เปลี่ยนแปลง องค์ประกอบ ด้วยคลาสออฟเซ็ตรวมถึงค่าตำแหน่งเป็นค่าสัมบูรณ์ ตั้งแต่ธาตุ
เป็นองค์ประกอบหลักที่อยู่ในตำแหน่งใกล้เคียงที่สุด จากนั้นองค์ประกอบ
จะมีตำแหน่งสัมพันธ์กับองค์ประกอบ
.สำหรับองค์ประกอบที่มีตำแหน่งค่อนข้างดี คุณสมบัติออฟเซ็ตจะกำหนดทิศทางที่องค์ประกอบจะถูกย้ายโดยสัมพันธ์กับตัวมันเอง สำหรับองค์ประกอบที่มีตำแหน่งที่แน่นอน คุณสมบัติออฟเซ็ตจะกำหนดทิศทางที่องค์ประกอบจะถูกย้ายโดยสัมพันธ์กับพาเรนต์ที่มีตำแหน่งใกล้เคียงที่สุด
อันเป็นผลมาจากคุณสมบัติด้านขวาและด้านบนองค์ประกอบ
จะปรากฏ 20 พิกเซลจากด้านขวา และ 20 พิกเซลจากด้านบนด้านใน
.ตั้งแต่ธาตุ
ตำแหน่งที่แน่นอน จะไม่อยู่ในตำแหน่งปกติของหน้า และจะทับซ้อนองค์ประกอบใดๆ รอบๆ หน้า อีกทั้งตำแหน่งเริ่มต้น
ไม่ได้ถูกบันทึก และองค์ประกอบอื่นๆ อาจเข้ามาแทนที่นี้ โดยทั่วไป การวางตำแหน่งส่วนใหญ่สามารถเกิดขึ้นได้โดยไม่ต้องใช้คุณสมบัติตำแหน่งและคุณสมบัติออฟเซ็ต แต่ในบางกรณีอาจมีประโยชน์อย่างยิ่ง
สรุป
การเรียนรู้วิธีวางตำแหน่งเนื้อหาใน HTML และ CSS ถือเป็นก้าวสำคัญสู่การเรียนรู้ภาษาเหล่านี้ เพิ่มโมเดลบล็อกเข้าไปด้วย และเราก็พร้อมที่จะเป็นนักพัฒนาส่วนหน้า
บทความบทช่วยสอนนี้จะเน้นไปที่หัวข้อที่สำคัญมากซึ่งเกี่ยวข้องกับการวางตำแหน่งขององค์ประกอบบนหน้าซึ่งจะต้องได้รับความสนใจสูงสุดจากคุณ คุณจะคุ้นเคยกับการวางตำแหน่งองค์ประกอบประเภทต่อไปนี้: แน่นอน, ญาติ, ที่ตายตัวและ คงที่.
การวางตำแหน่งจะช่วยให้คุณสามารถวางองค์ประกอบนี้หรือองค์ประกอบนั้นในตำแหน่งที่คุณต้องการได้ จุดประสงค์ของบทความนี้คือการทำความเข้าใจว่าสิ่งนี้เกิดขึ้นตามกฎอะไร ต้องใช้คุณสมบัติ CSS ใดและเพราะเหตุใด
ประเภทของการวางตำแหน่งองค์ประกอบ
พื้นฐาน คุณสมบัติซีเอสเอสสิ่งที่ช่วยให้คุณควบคุมตำแหน่งขององค์ประกอบบนเพจได้คือคุณสมบัติตำแหน่ง โดยจะบอกเบราว์เซอร์ว่ามีการใช้ตำแหน่งประเภทใดสำหรับองค์ประกอบ ( คงที่-คงที่ ญาติ-ญาติ, แน่นอน– สัมบูรณ์ หรือ ที่ตายตัว- ที่ตายตัว).
เพื่อให้เข้าใจอย่างถ่องแท้ถึงวิธีการวางตำแหน่งองค์ประกอบบนหน้าใด ๆ คุณต้องศึกษารายละเอียดการวางตำแหน่งทุกประเภท บทความบทช่วยสอนนี้จะให้โอกาสแก่คุณ ตอนนี้เราจะพูดคุยแยกกันเกี่ยวกับตำแหน่งแต่ละประเภทและวิเคราะห์ว่าการกระจัดขององค์ประกอบในเอกสารเกิดขึ้นอย่างไรและสัมพันธ์กันอย่างไร
ตำแหน่งที่แน่นอน
ดังที่คุณสังเกตเห็นองค์ประกอบต่างๆที่มี ตำแหน่งที่แน่นอน, แยกออกจากโฟลว์หน้าหลักซึ่งอาจนำไปสู่องค์ประกอบที่ซ้อนซ้อนกันได้ ความแตกต่างอีกอย่างหนึ่งการทำงานกับองค์ประกอบที่มี ตำแหน่งที่แน่นอนนั่นคือสิ่งที่พวกเขาเป็น ไม่สามารถลอยได้. องค์ประกอบลอยตัวต้องเป็นองค์ประกอบที่มีเท่านั้น ตำแหน่งคงที่(คงที่) นั่นคือค่าที่กำหนดโดยค่าเริ่มต้นสำหรับองค์ประกอบ เราได้พูดคุยถึงวิธีการทำงานกับองค์ประกอบลอยตัวในบทความในตำราเรียน ""
ตำแหน่งสัมพัทธ์
ตำแหน่งประเภทต่อไปที่เราจะดูคือ . องค์ประกอบที่ถูกกำหนดไว้ ตำแหน่งสัมพัทธ์(ตำแหน่ง: ญาติ) ถูกเลื่อน (วาง) หรืออีกนัยหนึ่ง
มาดูตัวอย่างกันก่อนแล้วพูดถึงความแตกต่างทั้งหมดที่จะเกิดขึ้นเมื่อทำงานด้วย .
การวางตำแหน่งสัมพัทธ์ขององค์ประกอบ
คงที่
คลาส = "ญาติ" >ญาติ
คลาส = "คงที่" >คงที่
สิ่งที่เราทำในตัวอย่างนี้:
- สำหรับบล็อก (องค์ประกอบ
), ที่มี
ตำแหน่งคงที่(ค่าเริ่มต้น) ตั้งค่าความสูงเป็น 50 พิกเซล และสีพื้นหลังเป็น -
สีแดง.
- เราวางองค์ประกอบด้วย ตำแหน่งสัมพัทธ์(ตำแหน่ง : สัมพันธ์) ตั้งค่าความสูงเป็น 100 พิกเซล และสีพื้นหลัง สีเขียว. นอกจากนี้ยังได้บ่งชี้ว่าเขา เคลื่อนที่สัมพันธ์กับตำแหน่งปัจจุบันจากขอบบน 50 พิกเซล และจากขอบซ้าย 100 พิกเซล ทำให้เอกสารล้น
ผลลัพธ์ของตัวอย่างของเรา:
นอกจากนี้ยังจำเป็นต้องเน้นจากตัวอย่างนี้ว่าไม่เหมือน ตำแหน่งที่แน่นอนองค์ประกอบอื่นๆ ในเอกสารตอบสนองต่อองค์ประกอบต่างๆ ด้วย ตำแหน่งสัมพัทธ์. แม้ว่าเราจะให้คำสั่งแก่เบราว์เซอร์เพื่อย้ายองค์ประกอบ แต่เบราว์เซอร์ก็สงวนพื้นที่สำหรับองค์ประกอบนั้น โดยเหลือพื้นที่ว่างในตำแหน่งที่องค์ประกอบควรอยู่ในตอนแรกก่อนจะย้าย
ในทางปฏิบัติ คุณมักจะไม่ต้องย้ายองค์ประกอบที่มี ตำแหน่งสัมพัทธ์. แนวคิดหลัก ตำแหน่งสัมพัทธ์ไม่ใช่การย้ายองค์ประกอบไปที่ใดที่หนึ่ง แต่ สร้าง "คอนเทนเนอร์" สำหรับองค์ประกอบที่มี ตำแหน่งที่แน่นอน
. กล่าวอีกนัยหนึ่ง องค์ประกอบที่ซ้อนกันจะไม่ถูกชดเชยเมื่อเทียบกับขอบของหน้าต่างเบราว์เซอร์ แต่จะสัมพันธ์กับองค์ประกอบนี้ ซึ่งจะมี ตำแหน่งสัมพัทธ์และตั้งอยู่ ในเธรดเอกสารหลัก. เราจะพิจารณาประเด็นนี้โดยละเอียดเพิ่มเติมในบทความบทช่วยสอนนี้
ตำแหน่งคงที่
ที่สามประเภทของการวางตำแหน่งที่เราจะพิจารณาคือ . ที่ ตำแหน่งคงที่การเคลื่อนไหวขององค์ประกอบ สัมพันธ์กับขอบที่กำหนดของหน้าต่างเบราว์เซอร์. คุณสมบัติที่โดดเด่นการวางตำแหน่งนี้คือเมื่อเลื่อนหน้า องค์ประกอบจะอยู่ในที่เดียวกล่าวคือ โดยคร่าวๆ จะเลื่อนไปตามหน้า (องค์ประกอบได้รับการแก้ไขแล้ว)
ฉันคิดว่าขณะเดินทางบนอินเทอร์เน็ต คุณมักจะเจอเมนูนำทาง แถบด้านข้าง หรือแม้แต่ปุ่ม "ด้านบนของหน้า" ที่ได้รับการแก้ไขในที่เดียว ทั้งหมดนี้เป็นไปได้ด้วย ตำแหน่งคงที่.
ลองดูตัวอย่างที่เราจะออกแบบแถบด้านข้างแบบตายตัว
การวางตำแหน่งองค์ประกอบคงที่
ที่ตายตัว
คลาส = "คอนเทนเนอร์" >
ลองดูสิ่งที่เราทำในตัวอย่างนี้:
- ตั้งค่าสำหรับองค์ประกอบ และ ความสูงเท่ากับ 100% ซึ่งจะช่วยให้เรากำหนดความสูงเป็นเปอร์เซ็นต์สำหรับแถบด้านข้างได้ นอกจากนี้ เราได้ลบระยะขอบสำหรับองค์ประกอบเหล่านี้ ซึ่งจำเป็นในการลบสไตล์ในตัวของเบราว์เซอร์
- สำหรับแถบด้านข้าง ให้ตั้งค่าความสูงเป็นองค์ประกอบหลัก (100%) ตั้งค่าความกว้างเป็น 15% ขององค์ประกอบหลัก และตั้งค่าสีพื้นหลัง สีแดง. ยังชี้ให้เห็นว่าแถบด้านข้างของเรามี ตำแหน่งคงที่ซึ่งทำให้ดูเหมือนติดหน้าจอ เพื่อให้แผงของเราปรากฏทางด้านขวา เราได้ตั้งค่าที่ถูกต้องเป็น 0 (ออฟเซ็ตขององค์ประกอบที่อยู่ในตำแหน่งจากขอบด้านขวาของหน้าต่างเบราว์เซอร์)
- เพื่อการสาธิต ตำแหน่งคงที่เราสร้างคอนเทนเนอร์ที่มีความสูง 2,000 พิกเซล ตอนนี้ถ้าเราเลื่อนหน้า แถบด้านข้างของเราจะยังคงอยู่ แต่เนื้อหาของคอนเทนเนอร์ (เนื้อหาหลัก) จะถูกเลื่อน
ผลลัพธ์ของตัวอย่างของเรา:
การวางตำแหน่งแบบคงที่
การวางตำแหน่งประเภทสุดท้ายคือ ตำแหน่งคงที่(คงที่) คุณและฉันได้พูดคุยเกี่ยวกับเรื่องนี้หลายครั้งแล้ว การวางตำแหน่งแบบคงที่มันคลาสสิก ในกระแส เอกสาร HTML
ฉันอยากจะดึงความสนใจของคุณไปที่ข้อเท็จจริงประการหนึ่งว่าคุณสมบัติดังกล่าวข้างต้นที่รับผิดชอบในการแทนที่องค์ประกอบไม่สามารถใช้กับองค์ประกอบที่มี ตำแหน่งคงที่นั่นคือมีตำแหน่งซึ่งกำหนดไว้เป็นค่าเริ่มต้น
ตำแหน่งสัมบูรณ์ขั้นสูง
ก่อนที่จะก้าวไปสู่แอพพลิเคชั่นขั้นสูง ตำแหน่งที่แน่นอนฉันต้องการดึงความสนใจของคุณให้เป็นจริงว่าหากคุณ ไม่ได้ระบุค่าของตำแหน่งแนวตั้งขององค์ประกอบด้วย ตำแหน่งที่แน่นอน(บนหรือล่าง) หรือในทางกลับกันกับตำแหน่งแนวนอน (ซ้ายหรือขวา) จากนั้น เบราว์เซอร์จะปล่อยองค์ประกอบไว้ที่ตำแหน่งเดิมบนหน้าเว็บที่อยู่ในโฟลว์ทั่วไป(จะถูกวางไว้ด้านบนของเนื้อหาหากมี)
เราได้เรียนรู้แล้วว่าธาตุนั้นด้วย ตำแหน่งที่แน่นอน(ตำแหน่ง : สัมบูรณ์ ) ตำแหน่ง สัมพันธ์กับขอบที่กำหนดของบรรพบุรุษและบรรพบุรุษจะต้องมีตำแหน่งค่า แตกต่างจากค่าเริ่มต้น-คงที่ มิฉะนั้นจะดำเนินการนับ (การเคลื่อนที่) สัมพันธ์กับขอบที่ระบุของหน้าต่างเบราว์เซอร์. ถึงเวลาดูตัวอย่างดังนี้:
ตำแหน่งที่แน่นอนสัมพันธ์กับบรรพบุรุษ
ญาติ
คลาส = "คอนเทนเนอร์" >คอนเทนเนอร์
คลาส = "สัมบูรณ์" >แน่นอน
มาดูสิ่งที่เราทำในตัวอย่างนี้กันดีกว่า:
- ขั้นแรกเราวางบล็อก (element
) ซึ่งมี
ตำแหน่งสัมพัทธ์. เราระบุระยะขอบภายในจากด้านบน (ขอบบน) เท่ากับ 100 พิกเซล กำหนดความกว้าง ความสูง และสีของพื้นหลัง
- จากนั้นจึงวางองค์ประกอบบล็อกไว้ข้างใน (องค์ประกอบ
) ซึ่งมีความสูง 100 พิกเซลและมีสีพื้นหลัง
สีเหลือง. ตามที่คุณเข้าใจองค์ประกอบนี้มี
ตำแหน่งคงที่(ค่าเริ่มต้น) เนื่องจากมูลค่าของคุณสมบัติตำแหน่ง
ไม่ได้รับมรดกและไม่ได้สืบทอดมาจากบล็อกหลัก
ตำแหน่งสัมพัทธ์.
- จากนั้นเราก็ใส่ลงไปในภาชนะของเราด้วย ตำแหน่งคงที่องค์ประกอบที่มี ตำแหน่งที่แน่นอน. ตั้งค่าความกว้างและความสูงเป็น 50 พิกเซลและสีพื้นหลัง สีแดง. โปรดทราบว่าจุดที่สำคัญที่สุดคือองค์ประกอบนี้ไม่ได้อยู่ในตำแหน่งที่สัมพันธ์กับหน้าต่างเบราว์เซอร์ ไม่สัมพันธ์กับองค์ประกอบหลัก แต่สัมพันธ์กับบรรพบุรุษซึ่งมีตำแหน่งอื่นที่ไม่ใช่คงที่! ด้วยเหตุนี้ เราจึงวางองค์ประกอบของเราไว้ที่มุมขวาบนของบรรพบุรุษด้วย ตำแหน่งสัมพัทธ์.
ผลลัพธ์ของตัวอย่างของเรา:
มาสรุปสิ่งที่เราเรียนรู้ในบทความบทช่วยสอนนี้เกี่ยวกับการวางตำแหน่งองค์ประกอบ:
- การวางตำแหน่งแบบคงที่มันคลาสสิก การจัดวางองค์ประกอบจากบนลงล่าง(รายการจะแสดงตามลำดับที่แสดง ในสตรีมเอกสาร HTML) ถือเป็นค่าเริ่มต้นสำหรับองค์ประกอบทั้งหมด
- องค์ประกอบอยู่ในตำแหน่ง สัมพันธ์กับหน้าต่างเบราว์เซอร์ถ้าเขามี ตำแหน่งคงที่(องค์ประกอบได้รับการแก้ไขเมื่อเลื่อนเอกสาร)
- องค์ประกอบอยู่ในตำแหน่ง สัมพันธ์กับหน้าต่างเบราว์เซอร์ถ้าเขามี ตำแหน่งที่แน่นอน, และเขา ไม่ซ้อนกันภายในองค์ประกอบที่มีตำแหน่งอื่นนอกเหนือจาก คงที่
.
- องค์ประกอบที่ตั้งค่าไว้ ตำแหน่งสัมพัทธ์กะ สัมพันธ์กับตำแหน่งในสตรีมเอกสาร (เทียบกับตำแหน่งปัจจุบันของเขา).
- องค์ประกอบอยู่ในตำแหน่ง สัมพันธ์กับด้านข้างขององค์ประกอบอื่นในกรณีที่เขา มีบรรพบุรุษหรือผู้ปกครองด้วย แน่นอน, ญาติหรือ ที่ตายตัวการวางตำแหน่ง.
คำถามและงานในหัวข้อ
ก่อนที่จะไปยังหัวข้อถัดไป ให้ฝึกปฏิบัติให้เสร็จสิ้น:
2016-2019 Denis Bolshakov คุณสามารถส่งความคิดเห็นและข้อเสนอแนะบนเว็บไซต์ไปที่ [email protected]
วิธีจัดรูปภาพให้ชิดขวา
ย่อหน้ายาวที่มีหลายประโยค ประกอบด้วยข้อความที่อธิบายคุณสมบัติที่ถูกตั้งค่าสถานะและรูปภาพที่จะกดไปที่ขอบด้านขวา
โดยจะนำองค์ประกอบออกจากโฟลว์และดันไปที่ขอบด้านซ้ายหรือด้านขวาของพาเรนต์ องค์ประกอบและข้อความที่อยู่ในโค้ดหลังจากองค์ประกอบ float ไหลไปรอบๆ ฝั่งตรงข้าม
ไม่ได้รับการสืบทอด ใช้กับองค์ประกอบทั้งหมด นำองค์ประกอบออกจากโฟลว์และวางไว้บนส่วนที่เหลือของเนื้อหา สามารถย้ายโดยสัมพันธ์กับขอบเขตของพาเรนต์ซึ่งมีค่าตำแหน่งอื่นที่ไม่ใช่ static โดยใช้คุณสมบัติ top , right , lower , left เมื่อทิศทาง: ltr; คุณสมบัติทางซ้ายจะมีความสำคัญมากกว่าคุณสมบัติทางขวา เว้นแต่คุณสมบัติทางซ้ายจะถูกตั้งค่าเป็น auto
ย่อหน้ายาวที่มีหลายประโยค
ประกอบด้วยข้อความที่อธิบายคุณสมบัติที่ถูกตั้งค่าสถานะและรูปภาพที่จะกดไปที่ขอบด้านขวา
คุณสมบัติ
จัดข้อความ
สืบทอดมานำไปใช้กับองค์ประกอบบล็อก
จัดแนวองค์ประกอบอินไลน์และข้อความที่มีอยู่ทั้งหมดตามแนวนอน จะไม่ย้ายองค์ประกอบเองหรือย้ายบล็อก และจะไม่ทำงานหากกำหนดให้กับองค์ประกอบแบบอินไลน์ มีความหมายหลายประการ ได้แก่
ขวา
ทำให้คุณสามารถย้ายเนื้อหาไปทางขวาได้
คุณสมบัติ
ขอบซ้าย
ไม่ได้รับการสืบทอด ใช้กับองค์ประกอบทั้งหมด
มันมีความหมาย
อัตโนมัติ
ซึ่งจัดแนวองค์ประกอบบล็อกในแนวนอน กล่าวคือ
ขอบซ้าย: อัตโนมัติ;
ผลักองค์ประกอบไปที่ขอบด้านขวาของพาเรนต์ ตำแหน่งนี้สามารถเปลี่ยนแปลงได้โดยที่พัก
ขอบขวา
..html">เมื่อใด
ขอบซ้าย: อัตโนมัติ;
และ
ขอบขวา: อัตโนมัติ;
องค์ประกอบถูกวางไว้ตรงกลางความกว้างของบรรพบุรุษ
คุณสมบัติ
ลอย
ไม่ได้รับการสืบทอด ใช้กับองค์ประกอบทั้งหมด
โดยจะนำองค์ประกอบออกจากโฟลว์และดันไปที่ขอบด้านซ้ายหรือด้านขวาของพาเรนต์ องค์ประกอบและข้อความที่อยู่ในโค้ดหลังจากองค์ประกอบ float ไหลไปรอบๆ ฝั่งตรงข้าม
คุณสมบัติ
ตำแหน่ง
ไม่ได้รับการสืบทอด ใช้กับองค์ประกอบทั้งหมด
ตำแหน่ง: แน่นอน;
นำองค์ประกอบออกจากโฟลว์และวางไว้บนส่วนที่เหลือของเนื้อหา สามารถเคลื่อนย้ายได้โดยสัมพันธ์กับขอบเขตของผู้ปกครองที่มีค่า
ตำแหน่ง
แตกต่างจาก
คงที่
โดยใช้คุณสมบัติ
สูงสุด
,
ขวา
,
ด้านล่าง
,
ซ้าย
. ที่
ทิศทาง: ltr;
คุณสมบัติ
ซ้าย
มีความสำคัญเหนือกว่าทรัพย์สิน
ขวา
เว้นแต่เมื่อทรัพย์สินนั้น
ซ้าย
มีความหมาย
อัตโนมัติ
.
คุณสมบัติ แสดง
ไม่ได้รับการสืบทอด ใช้กับแท็กองค์ประกอบทั้งหมด..html"> โต๊ะ
, ก ตารางเซลล์
— ทีดี
.
คำแนะนำ:บน
ในตัวอย่างนี้การดูว่ารูปภาพทำงานอย่างไรเมื่อขนาดของหน้าต่างเบราว์เซอร์ลดลงเป็นเรื่องน่าสนใจ
วิธีจัดข้อความให้ชิดขวา
ข้อความสั้นทางด้านขวา
ข้อความสั้นทางด้านขวา
วัสดุที่เกี่ยวข้อง:
- อัปเดตการจัดตำแหน่ง html แนวนอนแล้ว
- เหตุผล html ต้องการอัปเดต
วิธีจัดแนวบล็อกไปทางขวา
องค์ประกอบไม่ส่งผลต่อความสูงหรือความกว้างขององค์ประกอบหลัก และไม่ทำให้ล้น
องค์ประกอบจะไม่ส่งผลต่อความสูงของพาเรนต์ เว้นแต่จะล้างโฟลตออก
วิธีจัดแนวหลายบล็อกไปทางขวา
ระยะขอบ: 0 100% 0 -100%;
/* คุณไม่จำเป็นต้องเพิ่ม wrapper อื่น แต่ในรูปแบบก่อนหน้านี้ ให้ระบุการแปลง: แปล(-100%, 0); */พื้นหลัง:สีเขียว; )
CSS ถือว่าเค้าโครงของเอกสาร HTML เป็นแผนผังขององค์ประกอบ องค์ประกอบเฉพาะที่ไม่มีองค์ประกอบหลักเรียกว่า รากองค์ประกอบ. โมดูลการกำหนดตำแหน่ง CSS อธิบายถึงวิธีการจัดตำแหน่งองค์ประกอบใดๆ โดยไม่คำนึงถึงลำดับของเอกสาร (เช่น นำออกจาก "โฟลว์")
ใน CSS2 แต่ละองค์ประกอบในแผนผังเอกสารจะสร้างกล่องตั้งแต่ศูนย์ขึ้นไป ตามโมเดลกล่อง โมดูล CSS3 เสริมและขยายโครงร่างการวางตำแหน่ง ตำแหน่งของบล็อกเหล่านี้ได้รับการควบคุม:
- ขนาดและประเภทขององค์ประกอบ
- รูปแบบการวางตำแหน่ง (การไหลปกติ การไหล และตำแหน่งสัมบูรณ์)
- ความสัมพันธ์ระหว่างองค์ประกอบในแผนผังเอกสาร
- ข้อมูลภายนอก (เช่น ขนาดวิวพอร์ต ขนาดภาพภายใน ฯลฯ)
แผนผังการวางตำแหน่ง
ใน CSS บล็อกขององค์ประกอบสามารถวางตำแหน่งตามรูปแบบการวางตำแหน่งสามแบบ:
1. การไหลปกติ
โฟลว์ปกติประกอบด้วยบริบทการจัดรูปแบบบล็อก (องค์ประกอบที่มี display block , list-item หรือ table ) บริบทการจัดรูปแบบอินไลน์ (องค์ประกอบที่มี display inline , inline-block หรือ inline-table ) และการวางตำแหน่งที่สัมพันธ์กันและเหนียวขององค์ประกอบระดับบล็อกและ เส้น
2. ไหลไปรอบๆ
ในแบบจำลองโฟลว์ บล็อกจะถูกลบออกจากโฟลว์ปกติและจัดตำแหน่งไปทางซ้ายหรือขวา เนื้อหาล้อมรอบด้านขวาขององค์ประกอบด้วย float: left และด้านซ้ายขององค์ประกอบด้วย float: right
3. ตำแหน่งที่แน่นอน
ในแบบจำลองการกำหนดตำแหน่งสัมบูรณ์ บล็อกจะถูกลบออกจากการไหลปกติโดยสมบูรณ์ และกำหนดตำแหน่งที่สัมพันธ์กับบล็อกที่มี การวางตำแหน่งแบบสัมบูรณ์จะดำเนินการโดยใช้ค่าตำแหน่ง: สัมบูรณ์; และตำแหน่ง: คงที่; .
องค์ประกอบ "นอกสตรีม" อาจเป็นองค์ประกอบลอย องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน หรือองค์ประกอบราก
โดยทั่วไป บล็อกที่มีคือบล็อกที่มีองค์ประกอบอื่น ในกรณีของโฟลว์ปกติ องค์ประกอบ root html คือบล็อกที่มีสำหรับองค์ประกอบเนื้อหา ซึ่งในทางกลับกันคือบล็อกที่มีสำหรับองค์ประกอบลูกทั้งหมด และอื่นๆ ในกรณีของการวางตำแหน่ง บล็อกที่มีจะขึ้นอยู่กับประเภทของการวางตำแหน่งโดยสิ้นเชิง
สำหรับองค์ประกอบที่ไม่ใช่รูทที่มีตำแหน่ง: static; หรือตำแหน่ง: ญาติ; บล็อกที่มีนั้นถูกสร้างขึ้นโดยขอบของพื้นที่เนื้อหาของบล็อกระดับบล็อกหลัก เซลล์ตาราง หรือบล็อกระดับแถวที่ใกล้ที่สุด
สำหรับองค์ประกอบที่ไม่ใช่รูทที่มีตำแหน่ง: สัมบูรณ์; บล็อกที่มีการตั้งค่าให้ใกล้ที่สุด องค์ประกอบหลักด้วยค่าตำแหน่งอื่นที่ไม่ใช่คงที่เช่นนี้:
- หากบรรพบุรุษเป็นองค์ประกอบระดับบล็อก บล็อกที่มีจะเป็นพื้นที่เนื้อหาบวกกับช่องว่างภายในขององค์ประกอบ
- หากบรรพบุรุษเป็นองค์ประกอบระดับบรรทัด บล็อกที่มีจะเป็นพื้นที่เนื้อหา
- หากไม่มีบรรพบุรุษ บล็อกที่มีองค์ประกอบจะถูกกำหนดให้เป็นบล็อกเริ่มต้น
สำหรับบล็อกแบบ "ติดหนึบ" บล็อกที่มีนั้นเป็นบล็อกที่ใกล้เคียงที่สุดของการเลื่อนหรือวิวพอร์ต มิฉะนั้น
2. การเลือกรูปแบบการวางตำแหน่ง: คุณสมบัติตำแหน่ง
คุณสมบัติตำแหน่งจะกำหนดว่าอัลกอริธึมการกำหนดตำแหน่งใดใช้ในการคำนวณตำแหน่งของบล็อก
ทรัพย์สินไม่ได้รับมรดก
ตำแหน่ง |
---|
ความหมาย: |
|
คงที่ |
บล็อกอยู่ในตำแหน่งตามการไหลปกติ คุณสมบัติด้านบน ขวา ด้านล่าง และด้านซ้ายจะไม่ถูกนำมาใช้ ค่าเริ่มต้น |
ญาติ |
ตำแหน่งบล็อกคำนวณตามการไหลปกติ จากนั้นบล็อกจะถูกชดเชยจากตำแหน่งปกติ และในทุกกรณี รวมถึงองค์ประกอบของตาราง จะไม่ส่งผลกระทบต่อตำแหน่งของบล็อกใดๆ ที่ตามมา อย่างไรก็ตาม การชดเชยดังกล่าวอาจส่งผลให้เกิดบล็อกที่ทับซ้อนกัน รวมถึงแถบเลื่อนหากมีการโอเวอร์โฟลว์ บล็อกที่อยู่ในตำแหน่งค่อนข้างจะคงขนาดไว้ รวมถึงการขึ้นบรรทัดใหม่และพื้นที่ที่สงวนไว้ตั้งแต่แรก
บล็อกที่มีตำแหน่งค่อนข้างจะสร้างบล็อกใหม่สำหรับลูกที่อยู่ในตำแหน่งที่แน่นอน
ตำแหน่งที่มีอิทธิพล: ญาติ; ในองค์ประกอบตารางมีการกำหนดดังนี้: องค์ประกอบที่มี table-row-group , table-header-group , table-footer-group และ table-row จะถูกชดเชยจากตำแหน่งปกติในตาราง หากเซลล์ตารางขยายหลายแถว เฉพาะเซลล์ในแถวเริ่มต้นเท่านั้นที่จะถูกออฟเซ็ต table-column-group , table-column ไม่ได้ชดเชยคอลัมน์ที่เกี่ยวข้องและไม่มีผลกระทบต่อภาพ คำบรรยายตารางและเซลล์ตารางถูกเลื่อนจากตำแหน่งปกติในตาราง หากเซลล์ตารางขยายหลายคอลัมน์หรือแถว ทั้งเซลล์จะถูกเลื่อน
|
แน่นอน |
ตำแหน่งของบล็อก (และขนาดอาจเป็น) ถูกระบุโดยใช้คุณสมบัติด้านบน ขวา ล่าง และซ้าย คุณสมบัติเหล่านี้กำหนดออฟเซ็ตที่ชัดเจนซึ่งสัมพันธ์กับบล็อกที่มีอยู่ บล็อกที่อยู่ในตำแหน่งที่แน่นอนจะถูกลบออกจากโฟลว์ปกติโดยสิ้นเชิง โดยไม่กระทบต่อการวางตำแหน่งขององค์ประกอบย่อย ขอบของบล็อกที่อยู่ในตำแหน่งที่แน่นอนจะไม่ยุบลง
บล็อกที่มีตำแหน่งที่แน่นอนจะสร้างบล็อกใหม่สำหรับเด็กที่มีการไหลปกติและเด็กที่มีตำแหน่ง: สัมบูรณ์; .
เนื้อหาขององค์ประกอบที่มีตำแหน่งที่แน่นอนไม่สามารถพันรอบบล็อกอื่นได้ บล็อกที่อยู่ในตำแหน่งที่แน่นอนอาจซ่อนเนื้อหาของบล็อกอื่น (หรืออาจถูกซ่อนไว้เอง) ขึ้นอยู่กับค่าดัชนี z ของบล็อกที่ทับซ้อนกัน
|
เหนียว |
ตำแหน่งบล็อกคำนวณตามการไหลปกติ จากนั้นบล็อกจะถูกชดเชยโดยสัมพันธ์กับบรรพบุรุษที่เลื่อนใกล้เคียงที่สุด หรือวิวพอร์ตหากไม่มีบรรพบุรุษคนใดเลื่อนได้ บล็อกแบบติดหนึบสามารถซ้อนทับบล็อกอื่นๆ และสร้างแถบเลื่อนได้หากบล็อกนั้นล้น
บล็อกเหนียวยังคงรักษาขนาดไว้ รวมถึงการขึ้นบรรทัดใหม่และพื้นที่ที่สงวนไว้ตั้งแต่แรก
บล็อกเหนียวจะสร้างบล็อกใหม่สำหรับเด็กที่อยู่ในตำแหน่งที่แน่นอนและค่อนข้างเหมาะสม
|
ที่ตายตัว |
การวางตำแหน่งคงที่จะคล้ายกับการวางตำแหน่งแบบสัมบูรณ์ ยกเว้นว่ามีการตั้งค่าวิวพอร์ตสำหรับบล็อกที่มี บล็อกดังกล่าวจะถูกลบออกจากโฟลว์ของเอกสารโดยสมบูรณ์ และไม่มีตำแหน่งที่เกี่ยวข้องกับส่วนใดๆ ของเอกสาร บล็อกคงที่ไม่เคลื่อนไหวเมื่อเลื่อนเอกสาร ด้วยเหตุนี้จึงคล้ายกับภาพพื้นหลังคงที่ เมื่อพิมพ์ บล็อกคงที่จะถูกทำซ้ำในแต่ละหน้า โดยบล็อกที่มีจะกำหนดพื้นที่หน้าสำหรับบล็อกเหล่านั้น บล็อกตำแหน่งคงที่ที่มีขนาดใหญ่กว่าพื้นที่หน้าจะถูกตัดออก
|
อักษรย่อ |
ตั้งค่าคุณสมบัติให้เป็นค่าเริ่มต้น |
สืบทอด |
สืบทอดค่าคุณสมบัติจากองค์ประกอบหลัก |
ไวยากรณ์
ตำแหน่ง: คงที่; ตำแหน่ง: ญาติ; ตำแหน่ง: แน่นอน; ตำแหน่ง: เหนียว; ตำแหน่ง: คงที่; ตำแหน่ง: เริ่มต้น; ตำแหน่ง: สืบทอด;
ข้าว. 1. ความแตกต่างระหว่างการวางตำแหน่งแบบคงที่ แบบสัมพันธ์ และแบบสัมบูรณ์
3. Block offset: คุณสมบัติ บน, ขวา, ล่าง, ซ้าย
องค์ประกอบจะถือว่าอยู่ในตำแหน่งหากคุณสมบัติตำแหน่งถูกตั้งค่าเป็นอย่างอื่นที่ไม่ใช่แบบคงที่ องค์ประกอบที่มีตำแหน่งจะสร้างบล็อกที่มีตำแหน่งและสามารถวางตำแหน่งได้ตามคุณสมบัติทางกายภาพสี่ประการต่อไปนี้:
ไวยากรณ์
ด้านบน: 10px; ด้านบน: 2em; ด้านบน: 50%; ด้านบน:อัตโนมัติ; ด้านบน: สืบทอด; ด้านบน: เริ่มต้น;
คุณสมบัติด้านบนระบุระยะทางที่ขอบด้านบนของบล็อกที่อยู่ในตำแหน่งที่แน่นอน (ขึ้นอยู่กับระยะขอบ) จะถูกชดเชยด้านล่างขอบด้านบนของบล็อกที่มี สำหรับบล็อกที่มีตำแหน่งค่อนข้างมาก ให้ระบุออฟเซ็ตที่สัมพันธ์กับขอบด้านบนของบล็อก (นั่นคือ บล็อกจะได้รับตำแหน่งในโฟลว์ปกติ จากนั้นออฟเซ็ตจากตำแหน่งนั้นตามคุณสมบัตินี้)
ไวยากรณ์
ขวา: -10px; ขวา: .5em; ขวา: -10%; ขวา: อัตโนมัติ; ขวา: สืบทอด; ขวา: เริ่มต้น;
คุณสมบัติที่ถูกต้องระบุระยะทางที่ขอบด้านขวาของบล็อกที่อยู่ในตำแหน่งที่แน่นอน (โดยคำนึงถึงระยะขอบ) จะถูกชดเชยไปทางซ้ายจากขอบด้านขวาของบล็อกที่มี สำหรับบล็อกที่มีตำแหน่งค่อนข้างมาก ให้กำหนดออฟเซ็ตที่สัมพันธ์กับขอบด้านขวาของบล็อก
ไวยากรณ์
ด้านล่าง: 50px; ด้านล่าง: -3em; ด้านล่าง: -50%; ด้านล่าง: อัตโนมัติ; ด้านล่าง: สืบทอด; ด้านล่าง: เริ่มต้น;
คุณสมบัติด้านล่างระบุระยะทางที่ขอบด้านล่างของบล็อกถูกชดเชยขึ้นเมื่อเทียบกับขอบด้านล่างของบล็อกที่มี สำหรับบล็อกที่มีตำแหน่งค่อนข้างมาก ให้กำหนดออฟเซ็ตที่สัมพันธ์กับขอบด้านล่างของบล็อกเอง
ไวยากรณ์
ซ้าย: 50px; ซ้าย: 10 นาที; ซ้าย: 20%; ซ้าย: อัตโนมัติ; ซ้าย: สืบทอด; ซ้าย: เริ่มต้น;
คุณสมบัติด้านซ้ายระบุระยะทางที่ขอบด้านซ้ายถูกชดเชยไปทางขวาจากขอบด้านซ้ายของบล็อกที่มี สำหรับบล็อกที่มีตำแหน่งค่อนข้างมาก ให้กำหนดออฟเซ็ตที่สัมพันธ์กับขอบด้านซ้ายของบล็อก
ค่าบวกจะย้ายองค์ประกอบภายในบล็อกที่มี และค่าลบจะย้ายองค์ประกอบไปนอกบล็อกที่มี
4. การห่อ: คุณสมบัติลอยตัว
การห่อช่วยให้บล็อกลอยไปทางซ้ายหรือขวาบนบรรทัดปัจจุบัน "บล็อกลอย" ถูกเลื่อนไปทางซ้ายหรือขวาจนกระทั่งขอบด้านนอกแตะขอบของบล็อกที่มีหรือขอบด้านนอกของบล็อกลอยอื่น หากมีหน่วยสายเป็นหน่วยภายนอก ส่วนบนบล็อกลอยอยู่ในแนวเดียวกับด้านบนของบล็อกบรรทัดปัจจุบัน
เมื่อใช้คุณสมบัติ float กับองค์ประกอบ แนะนำให้ตั้งค่าความกว้าง สิ่งนี้จะสร้างพื้นที่สำหรับเนื้อหาอื่นในเบราว์เซอร์ หากมีพื้นที่ในแนวนอนไม่เพียงพอสำหรับองค์ประกอบแบบลอย องค์ประกอบจะถูกกดลงจนกว่าจะพอดี ในกรณีนี้ องค์ประกอบระดับบล็อกอื่นๆ จะเพิกเฉย และองค์ประกอบระดับแถวจะย้ายไปทางขวาหรือซ้าย เพื่อเพิ่มพื้นที่ว่างและไหลไปรอบๆ
กฎที่ควบคุมพฤติกรรมของด้านลอยนั้นอธิบายโดยคุณสมบัติ float
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
ลอย: ซ้าย; ลอย: ขวา; ลอย: ไม่มี; ลอย: สืบทอด;
บล็อกแบบลอยใช้มิติของเนื้อหา โดยคำนึงถึงช่องว่างภายในและเส้นขอบ ขอบด้านบนและด้านล่างขององค์ประกอบแบบลอยไม่ยุบ
องค์ประกอบแบบลอยสามารถใช้ระยะขอบติดลบเพื่อย้ายออกนอกพื้นที่เนื้อหาขององค์ประกอบหลักได้
คุณสมบัติจะเปลี่ยนค่าที่คำนวณ (แสดงเบราว์เซอร์) ของคุณสมบัติการแสดงผลโดยอัตโนมัติเพื่อแสดง: บล็อกสำหรับค่าต่อไปนี้: inline , inline-block , table-row , table-row-group , table-column , table-column-group , ตารางเซลล์ คำบรรยายตาราง, กลุ่มส่วนหัวของตาราง, ส่วนท้ายของตารางกลุ่ม ค่าของการเปลี่ยนแปลงตารางอินไลน์เป็นตาราง
คุณสมบัติไม่มีผลกระทบต่อองค์ประกอบที่มี display: flex และ display: inline-flex ใช้ไม่ได้กับองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน
ข้าว. 3. พันรอบองค์ประกอบ
5. การควบคุมการไหลรอบองค์ประกอบลอยตัว: คุณสมบัติที่ชัดเจน
คุณสมบัติที่ชัดเจนระบุว่าด้านใดของบล็อกขององค์ประกอบไม่ควรอยู่ติดกับบล็อกลอยที่อยู่ด้านบนในเอกสารต้นฉบับ ใน CSS2 และ CSS 2.1 คุณสมบัตินี้ใช้กับองค์ประกอบระดับบล็อกที่ไม่ลอยตัวเท่านั้น
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
ชัดเจน: ไม่มี; ชัดเจน: ซ้าย; ชัดเจน: ถูกต้อง; ชัดเจน: ทั้งสอง; ชัดเจน: สืบทอด;
หากต้องการป้องกันไม่ให้พื้นหลังหรือเส้นขอบแสดงใต้องค์ประกอบแบบลอย ให้ใช้กฎ (overflow: ซ่อนเร้น;)
6. การกำหนดบริบทการซ้อนทับ: คุณสมบัติ z-index
ใน CSS แต่ละบล็อกจะมีตำแหน่งเป็นสามมิติ นอกจากตำแหน่งแนวนอนและแนวตั้งแล้ว บล็อกยังซ้อนกันตามแกน Z ที่ด้านบนของกันและกัน ตำแหน่งตามแนวแกน Z มีความสำคัญอย่างยิ่งเมื่อบล็อกซ้อนทับกันอย่างเห็นได้ชัด
ข้าว. 1. ตำแหน่งขององค์ประกอบตามแกน Z
ลำดับของการวาดแผนผังเอกสารบนหน้าจออธิบายโดยใช้ บริบทซ้อนทับ. แต่ละบล็อกเป็นของบริบทซ้อนทับเดียว แต่ละบล็อกในบริบทการซ้อนทับที่กำหนดจะมีระดับจำนวนเต็ม ซึ่งเป็นตำแหน่งบนแกน Z ที่สัมพันธ์กับบล็อกอื่นๆ ในบริบทการซ้อนทับเดียวกัน
บล็อกที่มีระดับสูงกว่าจะปรากฏก่อนบล็อกที่มีระดับต่ำกว่าเสมอ และบล็อกที่มีระดับเดียวกันจะถูกจัดเรียงจากล่างขึ้นบนตามลำดับขององค์ประกอบในเอกสารต้นฉบับ กล่องขององค์ประกอบมีตำแหน่งเดียวกับกล่องของแม่ เว้นแต่จะได้รับระดับที่แตกต่างกันโดยคุณสมบัติดัชนี z
คุณสมบัติดัชนี z ช่วยให้คุณสามารถเปลี่ยนวิธีที่องค์ประกอบซ้อนกันได้
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
ดัชนี Z: อัตโนมัติ; ดัชนี z: 0; ดัชนี z: 5; ดัชนี z: 999; ดัชนี z: -1; ดัชนี z: สืบทอด; ดัชนี z: เริ่มต้น;
โลกแห่งโปรแกรมฟรีและเคล็ดลับที่เป็นประโยชน์
2024 whatsappss.ru