ตารางสอบคอร์ส

ตัวเรียน CSS ระดับสูง

• หนังสือเรียน CSS
• CSS นิยาม
• CSS ภาษาพื้นฐาน
• CSS ภาษาอาวุโส
• CSS ตัวเลือกเลือกย่อย
• CSS ตัวเลือก id
• CSS ตัวเลือก class
• CSS สร้าง
• CSS พื้นหลัง
• CSS ข้อความ
• CSS ฟอนต์
• CSS รายการ

ตัวแบบ CSS

• สรุปมอดแบบกล่อง CSS
• CSS มุมด้านใน
• CSS ขอบ
• CSS มุมด้านนอก
• CSS การรวมมุมด้านนอก

ตำแหน่ง CSS

• สรุปการตั้งตำแหน่ง CSS
• การตั้งตำแหน่งเรlati ve
• การตั้งตำแหน่งเรlati ve absolute
• CSS ฟลอต

เลือกตัวใน CSS

• CSS ตัวเลือกตัวองค์ประกอบ
• การกลุ่มตัวเลือก CSS
• การเลือก class CSS ละเอียด
• การเลือก id CSS ละเอียด
• การเลือกตัวแปร CSS ละเอียด
• CSS ตัวเลือกลูกฐาน
• CSS ตัวเลือกลูกองค์ประกอบ
• CSS ตัวเลือกพี่น้องที่อยู่ข้างเคียง

คอร์สเลือกเลือก

การแนะนำคอร์ส:

• ตัวอย่างที่มีทรัพยากร CodeW3C.com

ตัวหน้าฟลอตสามารถย้ายซ้ายหรือขวางจนกว่ามุมด้านนอกของมันจะเจอกับของบรรจุภัณฑ์หรือของฟลอตอื่นๆ

เพราะตัวหน้าฟลอตไม่อยู่ในกระแสเอกสารทั่วไป ดังนั้นตัวหน้าบล็อคในกระแสเอกสารทั่วไปจะปรากฏเหมือนว่าตัวหน้าฟลอตไม่มีอยู่

CSS ฟลอต

ดูภาพด้านล่าง ของ 1 จะลงฟลอตขวาง มันจะออกจากกระแสเอกสารและย้ายขวางจนมุมขวางของมันเจอกับมุมขวางของของบรรจุภัณฑ์

ดูภาพด้านล่าง ของ 1 จะลงฟลอตซ้าย มันจะออกจากกระแสเอกสารและย้ายซ้ายจนมุมซ้ายของมันเจอกับมุมซ้ายของของบรรจุภัณฑ์ เพราะมันไม่อยู่ในกระแสเอกสาร มันไม่เข้าใจในการเข้าใจเป็นช่องว่าง จึงทำให้ปิดกั้นของ 2 และทำให้ของ 2 หายไปจากมุมมอง

ถ้าย้ายทั้งสามของไปทางซ้าย ของ 1 จะลงฟลอตซ้ายจนเจอกับของบรรจุภัณฑ์ และของอื่นๆจะลงฟลอตซ้ายจนเจอกับของฟลอตที่มาก่อน

เห็นจากภาพด้านล่าง ถ้าของบรรจุภัณฑ์มีขนาดเล็กเกินไปจนไม่สามารถรับตัวบวกฟลอตที่จัดเรียงระดับน้ำทะเลสามตัวได้ ตัวบวกฟลอตอื่นๆจะลงมาต่อไปจนมีช่องว่างเพียงพอ ถ้าตัวบวกฟลอตมีความสูงต่างกัน ในขณะที่มันลงมาอาจถูกตัวบวกฟลอตอื่นๆ 'ขวาง' ขึ้นมา

ตัวแปร float CSS

ใน CSS สามารถทำให้มีการเลื่อนตัวบวกโดยใช้คุณสมบัติ float

ถ้าคุณต้องการข้อมูลเกี่ยวกับคุณสมบัติ float มากกว่านี้ โปรดเข้าชมคู่มืออ้างอิง:ตัวแปร float CSS。

ตัวหน้าและการระบุ

ตัวหน้าบรรจุภัณฑ์ข้างของตัวหน้าฟลอตจะถูกย่อลง ซึ่งทำให้เหลือช่องว่างให้กับตัวหน้าฟลอต และตัวหน้าบรรจุภัณฑ์จะเลื่อนรอบตัวหน้าฟลอต

ดังนั้น การสร้างตัวหน้าฟลอต จะทำให้ข้อความเลื่อนรอบภาพ

เพื่อที่จะหยุดการปรับตัวของตัวหน้าที่มีการแลกเปลี่ยนตัวรอบตัวหน้าที่เลื่อนฟลอต จำเป็นต้องปรับสัญญาณแก่ตัวหน้านั้น คุณสมบัติ clearค่าของคุณสมบัติ clear สามารถเป็น left, right, both หรือ none ซึ่งหมายถึงขอบของกล่องที่ไม่ควรอยู่ติดกับ floating box:

เพื่อทำให้ได้รับผลลัพธ์นี้ ต้องใช้ clear ในองค์ประกอบที่ถูกครบเก็บ:ขอบเบื้องบนเพิ่มช่องว่างพอดีที่จะทำให้ขอบบนขององค์ประกอบตกลงมาใต้ floating box:

นี่เป็นเครื่องมือที่มีประโยชน์ ที่ทำให้องค์ประกอบที่อยู่รอบๆ ให้มีช่องว่างสำหรับองค์ประกอบที่ float:

ให้เห็นละเอียดเพิ่มเติมของ float และ clear โดยคาดว่าจะทำให้ภาพ float ไปทางซ้ายของบล็อคข้อความ และต้องการที่ภาพและข้อความนั้นจะอยู่ในองค์ประกอบที่มีสีพื้นหลังและเส้นขอบ:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

ในกรณีนี้ มีปัญหาหนึ่ง เพราะองค์ประกอบที่ float ได้หลุดออกจากกระแสเอกสาร ดังนั้น div ที่เข้าไปรอบรอบภาพและข้อความจะไม่เต็มที่ในเชิงฟิสิกส์:

หากต้องการที่องค์ประกอบที่เข้าไปรอบมีการเข้าไปรอบด้านทางฟิสิกส์กับองค์ประกอบที่ float นั้น ต้องการใช้ clear ในตำแหน่งใดๆ ขององค์ประกอบนี้:

แต่บางครั้งก็มีปัญหาใหม่ ตรงที่ไม่มีองค์ประกอบที่สามารถใช้การครบเก็บได้ ดังนั้นเราต้องเพิ่มองค์ประกอบว่างและทำการครบเก็บมัน:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

นี่จะทำให้ได้รับผลลัพธ์ที่เราต้องการ แต่ต้องเพิ่มรหัสเพิ่มเติม มักมีองค์ประกอบที่สามารถใช้ clear ได้ แต่บางครั้งต้องเพิ่มการทำเครื่องหมายที่ไม่มีมาตรฐานเพื่อการจัดโครงสร้าง:

แต่เรามีวิธีอื่นด้วย ซึ่งคือการทำการ float กับ div ของตัวแทน:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

นี่จะทำให้ได้รับผลลัพธ์ที่เราต้องการ แต่อย่างไรก็ตาม องค์ประกอบต่อไปของเราจะได้รับผลกระทบจากองค์ประกอบที่ float นี้ ในการแก้ปัญหานี้ บางคนเลือกที่จะทำการ float ทุกองค์ประกอบในโครงสร้าง และใช้องค์ประกอบที่มีมาตรฐานที่มีความหมาย (เป็นที่ส่วนใหญ่เป็นส่วนท้ายของเว็บไซต์) ที่จะทำการครบเก็บองค์ประกอบที่ float นั้น นี่ช่วยลดหรือกำจัดการทำเครื่องหมายที่ไม่จำเป็น:

ในตรงนี้ ทุกหน้าที่มีบนเว็บไซต์ CodeW3C.com ต่างใช้เทคโนโลยีนี้ หากคุณเปิดไฟล์ CSS ที่เราใช้ คุณจะเห็นว่าเราได้ทำการครบเก็บ div ของหลังเว็บไซต์ และ div สามอันที่อยู่ด้านบนของหลังเว็บไซต์นั้นเปลี่ยนแปลงเป็น float ไปทางซ้าย:

ตัวแปร clear CSS

เราเพิ่งได้หารือละเอียดอ่อนเกี่ยวกับหลักการทำงานของ CSS การครบเก็บและวิธีใช้คุณสมบัติ clear ครับ หากคุณต้องการเรียนรู้เกี่ยวกับคุณสมบัติ clear มากขึ้น โปรดเข้าถึงคู่มืออ้างอิงด้านล่าง:ตัวแปร clear CSS。

มีทรัพยากร

คู่มืออ้างอิง CSS

ตัวอย่าง CSS

การทดสอบ CSS

ตัวอย่าง CSS

ลิงก์ผู้สนับสนุน