HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี
สี RGB HEX HSL
พื้นหลัง CSS
สีพื้นหลัง ภาพพื้นหลัง เล่นซ้ำพื้นหลัง ไฟล์แนบพื้นหลัง พื้นหลังชวเลข
CSS Borders
พรมแดน ความกว้างของเส้นขอบ เส้นขอบสี ชายแดน ชวเลขชายแดน Rounded Borders
CSS Margins
Margins Margin Collapse
CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS Text
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
แบบอักษร CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float
Float Clear Float Examples
CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS
Navbar Vertical Navbar Horizontal Navbar
CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients
Linear Gradients Radial Gradients Conic Gradients
CSS Shadows
Shadow Effects Box Shadow
เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

CSS ความสูงและความกว้าง

❮ ก่อนหน้า ถัดไป ❯

CSS heightและwidthคุณสมบัติใช้เพื่อกำหนดความสูงและความกว้างขององค์ประกอบ

คุณสมบัติ CSS max-widthใช้เพื่อกำหนดความกว้างสูงสุดขององค์ประกอบ

องค์ประกอบนี้มีความสูง 50 พิกเซลและความกว้าง 100%

CSS การตั้งค่าความสูงและความกว้าง

คุณสมบัติheightand widthใช้เพื่อกำหนดความสูงและความกว้างขององค์ประกอบ

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

ค่าความสูงและความกว้าง CSS

และ คุณสมบัติอาจ heightมีwidthค่าต่อไปนี้:

  • auto- นี่เป็นค่าเริ่มต้น เบราว์เซอร์คำนวณความสูงและความกว้าง
  • length- กำหนดความสูง/ความกว้างเป็น px, ซม. เป็นต้น
  • %- กำหนดความสูง/ความกว้างเป็นเปอร์เซ็นต์ของบล็อกที่มี
  • initial- ตั้งค่าความสูง/ความกว้างเป็นค่าเริ่มต้น
  • inherit- ความสูง/ความกว้างจะสืบทอดมาจากค่าพาเรนต์

ตัวอย่างความสูงและความกว้างของ CSS

องค์ประกอบนี้มีความสูง 200 พิกเซลและความกว้าง 50%

ตัวอย่าง

กำหนดความสูงและความกว้างของ <div> องค์ประกอบ:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

องค์ประกอบนี้มีความสูง 100 พิกเซลและความกว้าง 500 พิกเซล

ตัวอย่าง

ตั้งค่าความสูงและความกว้างขององค์ประกอบ <div> อื่น:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

หมายเหตุ:โปรดทราบว่า คุณสมบัติ heightและwidthไม่รวมช่องว่างภายใน เส้นขอบ หรือระยะขอบ! พวกเขากำหนดความสูง/ความกว้างของพื้นที่ภายในช่องว่างภายใน เส้นขอบ และระยะขอบขององค์ประกอบ!

การตั้งค่าความกว้างสูงสุด

คุณสมบัติmax-widthนี้ใช้เพื่อกำหนดความกว้างสูงสุดขององค์ประกอบ

สามารถmax-widthระบุได้ในค่าความยาวเช่น px, ซม. ฯลฯ หรือเป็นเปอร์เซ็นต์ (%) ของบล็อกที่มีอยู่ หรือตั้งค่าเป็น none (ค่านี้เป็นค่าเริ่มต้น หมายความว่าไม่มีความกว้างสูงสุด)

ปัญหา<div>ข้างต้นเกิดขึ้นเมื่อหน้าต่างเบราว์เซอร์มีขนาดเล็กกว่าความกว้างขององค์ประกอบ (500px) จากนั้นเบราว์เซอร์จะเพิ่มแถบเลื่อนแนวนอนไปที่หน้า

การใช้max-widthแทนในสถานการณ์นี้จะปรับปรุงการจัดการหน้าต่างขนาดเล็กของเบราว์เซอร์

เคล็ดลับ:ลากหน้าต่างเบราว์เซอร์ให้มีความกว้างน้อยกว่า 500px เพื่อดูความแตกต่างระหว่าง div ทั้งสอง!

องค์ประกอบนี้มีความสูง 100 พิกเซลและความกว้างสูงสุด 500 พิกเซล

หมายเหตุ:width หากคุณใช้ทั้ง คุณสมบัติและ max-widthคุณสมบัติในองค์ประกอบเดียวกัน ด้วยเหตุผลบางประการ และมูลค่าของ widthคุณสมบัตินั้นมากกว่า max-widthคุณสมบัติ ทรัพย์สิน max-widthจะถูกใช้ (และ widthทรัพย์สินจะถูกละเว้น)

ตัวอย่าง

องค์ประกอบ <div> นี้มีความสูง 100 พิกเซลและความกว้างสูงสุด 500 พิกเซล: 

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

ลองด้วยตัวคุณเอง - ตัวอย่าง


ตัวอย่างนี้สาธิตวิธีการตั้งค่าความสูงและความกว้างขององค์ประกอบต่างๆ


ตัวอย่างนี้สาธิตวิธีตั้งค่าความสูงและความกว้างของรูปภาพโดยใช้ค่าเปอร์เซ็นต์


ตัวอย่างนี้สาธิตวิธีตั้งค่าความกว้างต่ำสุดและความกว้างสูงสุดขององค์ประกอบโดยใช้ค่าพิกเซล


ตัวอย่างนี้สาธิตวิธีตั้งค่าความสูงต่ำสุดและความสูงสูงสุดขององค์ประกอบโดยใช้ค่าพิกเซล

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

ตั้งค่าความสูงขององค์ประกอบ <h1> เป็น "100px"

<style>
h1 {
  : 100px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

คุณสมบัติมิติข้อมูล CSS ทั้งหมด

Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

❮ ก่อนหน้า ถัดไป ❯