home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

โมเดลการจัดรูปแบบภาพ CSS

CSS Visual Formatting เป็นโมเดลที่สอดคล้องกับอัลกอริธึมที่ประมวลผลและแปลงแต่ละองค์ประกอบของเอกสารเพื่อสร้างกล่องอย่างน้อยหนึ่งกล่องที่สอดคล้องกับ CSS Box Model

เลย์เอาต์ของกล่องที่สร้างขึ้นนั้นขึ้นอยู่กับคุณสมบัติหลายประการ เช่น −

  • ขนาด
  • ประเภท − atomic inline-level, block, inline หรือ inline-block
  • การวางตำแหน่ง − สัมบูรณ์ ลอย หรือปกติ
  • ความสัมพันธ์กับลูกและองค์ประกอบเพื่อนบ้านของเอกสาร
  • ข้อมูลภายนอก − วิวพอร์ตและความกว้างของภาพ - ความสูง ฯลฯ

CSS Box การสร้างองค์ประกอบที่ประมวลผล -

  • ระดับการบล็อก
    • องค์ประกอบเหล่านี้บังคับให้เส้นแบ่งด้านบนและด้านล่างตัวเอง และใช้ความกว้างทั้งหมดที่มีอยู่แม้ว่าเนื้อหาจะไม่ต้องการก็ตาม
    • ตัวอย่างเช่น:ดิวิชั่น (
      ), ส่วนหัว (

      ถึง

      ) เป็นต้น
  • ระดับอินไลน์
    • องค์ประกอบเหล่านี้ไม่ได้บังคับให้เส้นแบ่งด้านบนและด้านล่างตัวเอง และใช้เฉพาะความกว้างที่จำเป็นสำหรับเนื้อหา
    • ตัวอย่างเช่น:ช่วง (), องค์ประกอบที่แข็งแกร่ง ()

ตัวอย่าง

มาดูตัวอย่างการสร้างกล่องระดับบล็อกกัน −

<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#headingPreview h2{
   background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML Heading</legend>
<input type="text" id="textSelect" placeholder="Type Heading Here...">
<div id="radioBut">
<label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked >
<label>H2</label><input class="radio" type="radio" name="heading" value="h2">
<label>H3</label><input class="radio" type="radio" name="heading" value="h3">
<label>H4</label><input class="radio" type="radio" name="heading" value="h4">
<label>H5</label><input class="radio" type="radio" name="heading" value="h5">
<label>H6</label><input class="radio" type="radio" name="heading" value="h6">
</div>
<div>Heading Preview: <span id="headingPreview">Output will show up here</span></div>
<input type="button" onclick="changeHeading()" value="Preview">
</fieldset></form>
<script>
var textSelect = document.getElementById("textSelect");
var headingPreview = document.getElementById("headingPreview");
function changeHeading() {
   if(textSelect.value === '')
      headingPreview.innerHTML = 'Write a Heading';
   else{
      for(var i=0; i<6; i++){
         var radInp = document.getElementsByClassName('radio')[i];
         if(radInp.checked === true && textSelect.value !== ''){
            headingPreview.innerHTML = '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
            headingPreview.innerHTML += '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
         }
      }
   }
}
</script></body></html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

หลังจากคลิก 'ดูตัวอย่าง' ปุ่มที่มีช่องข้อความว่าง -

โมเดลการจัดรูปแบบภาพ CSS

หลังจากคลิก 'ดูตัวอย่าง' ปุ่มที่มีช่องข้อความไม่ว่างและ 'h2' เลือกปุ่มตัวเลือกแล้ว -

โมเดลการจัดรูปแบบภาพ CSS

ตัวอย่าง

มาดูตัวอย่างการสร้างกล่องระดับอินไลน์กัน −

<!DOCTYPE html>
<html>
<head>
<title>em element</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
em{
   background-color: #FF8A00;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>em-element</legend>
<label for="textSelect">Formatter: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertItalic()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function convertItalic() {
   for(i=0; i<2; i++){
      var italicObject = document.createElement("EM");
      var italicText = document.createTextNode(textSelect.value);
      italicObject.appendChild(italicText);
      divDisplay.appendChild(italicObject);
   }
}
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

ก่อนคลิก 'ตรวจสอบ' ปุ่ม −

โมเดลการจัดรูปแบบภาพ CSS

หลังจากคลิก 'ตรวจสอบ' ปุ่ม −

โมเดลการจัดรูปแบบภาพ CSS