หากคุณกำลังวางแผนที่จะสร้างเค้าโครงหน้าเว็บที่ยอดเยี่ยม คุณจะต้องรู้เกี่ยวกับระยะขอบ เส้นขอบ ช่องว่างภายใน และเนื้อหา ทุกองค์ประกอบในการออกแบบเว็บ ไม่ว่าจะเป็นรูปภาพหรือข้อความ ใช้กล่องที่มีคุณสมบัติเหล่านี้ คุณสามารถสร้างเลย์เอาต์ที่ซับซ้อนได้อย่างง่ายดายโดยเล่นกับโมเดลกล่อง ในบทความนี้ เราจะวิเคราะห์ CSS Box Model และแสดงวิธีใช้คุณสมบัติเหล่านี้พร้อมตัวอย่างที่ใช้งานได้จริง
รูปแบบกล่อง CSS เป็นมาตรฐานที่สร้างขึ้นโดยWorld Wide Web Consortium มันอธิบายองค์ประกอบทั้งหมดในเอกสาร HTML เป็นกล่องสี่เหลี่ยมที่มีขนาดของตัวเอง กล่องเหล่านี้ประกอบด้วยพื้นที่เนื้อหาและพื้นที่ขอบ เส้นขอบ และช่องว่างภายในที่เป็นตัวเลือก เรามาสำรวจส่วนต่าง ๆ ของกล่อง CSS กัน
มาค้นพบสี่เลเยอร์ของโมเดลกล่อง CSS
พื้นที่เนื้อหาประกอบด้วยเนื้อหาหลักขององค์ประกอบซึ่งอาจเป็นรูปภาพ ข้อความ หรือเนื้อหาสื่อรูปแบบใดก็ได้ คุณสามารถแก้ไขขนาดขององค์ประกอบระดับบล็อกได้โดยใช้คุณสมบัติความสูงและความกว้าง
Padding คือช่องว่างระหว่างกล่องเนื้อหาและกล่องเส้นขอบ แม้ว่าเนื้อหาจะล้อมรอบเนื้อหาของคุณเป็นช่องว่าง แต่คุณสามารถใช้สีพื้นหลังเพื่อแสดงภาพความแตกต่างได้ คุณสามารถใช้คุณสมบัติpadding-top , padding-right , padding-bottomและpadding-leftเพื่อแก้ไขช่องว่าง
เส้นขอบล้อมรอบเนื้อหาและพื้นที่ช่องว่างภายใน คุณสามารถปรับขนาดและรูปแบบการใช้ชายแดนชายแดนกว้าง , ชายแดนสไตล์และเส้นขอบสีคุณสมบัติ
เลเยอร์สุดท้ายของโมเดลกล่องใช้กันอย่างแพร่หลายเพื่อสร้างช่องว่างระหว่างองค์ประกอบ ระยะขอบตัดเนื้อหา ช่องว่างภายใน และพื้นที่เส้นขอบ คุณสามารถใช้ขอบบน ขอบขวา , ขอบล่างและขอบซ้ายคุณสมบัติ คุณยังสามารถให้คุณสมบัติมาร์จิ้นเป็นค่าลบหรืออัตโนมัติเพื่อให้ได้เทคนิคการจัดตำแหน่งที่ยอดเยี่ยม
มาสร้างโปรเจ็กต์ขนาดเล็กเพื่อสาธิตโมเดลกล่องพื้นฐานด้วยคุณสมบัติกล่องเนื้อหาและช่องว่างภายใน เส้นขอบ และระยะขอบ คุณสามารถใช้ข้อความ รูปภาพ หรือเนื้อหาสื่อได้ เราจะเริ่มต้นด้วยการทำให้แน่ใจว่ามีโครงสร้างที่เหมาะสม
โมเดลกล่อง CSS
เอาท์พุท:
คุณสามารถใช้คุณลักษณะในตัวของเบราว์เซอร์ เช่นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chromeเพื่อดูว่าเกิดอะไรขึ้น เราใช้สองภาพจาก Unsplash เพื่อความง่าย เราจะซ่อนรูปภาพของสมาร์ทโฟนโดยใช้display: none; จนกว่าเราต้องการมันในภายหลัง
/************************* BASIC STYLING *************************/ * { margin: 0px; padding: 0px; } body { display: flex; flex-direction: row; } .display { display: none !important; }
ตอนนี้ มากำหนดรูปแบบกล่องเนื้อหาของเรากัน อันดับแรก เราจะกำหนดความสูงและความกว้างของรูปภาพ นอกจากนี้ การให้สีพื้นหลังช่วยให้เห็นภาพได้ดีขึ้น มาทำกัน
/************************* CONTENT BOX *************************/ .content-box { display: flex; flex-direction: row; justify-content: center; align-items: center; /* Styling the content box using height and width properties */ background-color: #fdf; height: 20em; width: 30em; }
คุณสามารถตั้งค่าคุณสมบัติpadding-top , padding-right , padding-bottomและpadding-leftทีละรายการหรือใช้ชวเลข พยายามใช้ชวเลขถ้าเป็นไปได้ เพราะจะช่วยประหยัดเวลาได้ มาดูกันว่า padding ทำงานอย่างไร
/************************* PADDING *************************/ /* Applying padding */ padding-top: 5em; padding-right: 2em; padding-bottom: 8em; padding-left: 2em; /* Padding shorthand */ /* top/right/bottom/left */ padding: 5em 2em 8em 2em; /* top/horizontal/bottom */ padding: 5em 2em 8em;
เอาท์พุท:
ขณะใช้คุณสมบัติเส้นขอบ ตรวจสอบให้แน่ใจว่าคุณกำลังใช้คุณสมบัติborder-colorเพื่อให้เส้นขอบมีสีที่แตกต่างจากพื้นหลัง คุณสามารถเลือกรูปแบบเส้นขอบได้ทั้งแบบเดี่ยวและแบบครั้งเดียวโดยใช้คุณสมบัติชวเลข เช่นเดียวกับที่ใช้กับชายแดนกว้างคุณสมบัติ
คุณยังสามารถตั้งค่ารัศมีเส้นขอบเพื่อให้กล่องมีมุมโค้งมนด้วยรัศมีเป็นpx , rem , emหรือเปอร์เซ็นต์
/************************* BORDER *************************/ /* Applying border properties */ /* Set the border color */ border-color: rgb(148, 234, 255); /* Select border style */ border-top-style: solid; border-right-style: dashed; border-bottom-style: groove; border-left-style: ridge; /* border-style shorthand */ /* top/right/bottom/left */ border-style: solid dashed groove ridge; /* Set border width */ border-top-width: 4em; border-right-width: 2em; border-bottom-width: 2em; border-left-width: 2em; /* border-width shorthand*/ /* top/right/bottom/left */ border-width: 4em 2em 2em 2em; /* top/horizontal/bottom */ border-width: 4em 2em 2em; /* border property shorthand */ /* border: 4em solid rgb(148, 234, 255); */ /* Set border-radius */ border-radius: 5em; border-radius: 20%;
เอาท์พุท:
คุณสามารถจัดกล่องให้อยู่กึ่งกลางในแนวนอนโดยใช้margin: 0 autoหากมีความกว้างที่แน่นอน
/************************* MARGIN *************************/ /* Applying margin properties */ margin-top: 4em; margin-right: 5em; margin-bottom: 3em; margin-left: 5em; /* Margin shorthand */ /* top/right/bottom/left */ margin: 4em 5em 3em 5em; /* top/horizontal/bottom */ margin: 4em 5em 3em; /* Using auto margin */ margin: 3em auto;
เอาท์พุท:
คุณสามารถระบุคุณสมบัติระยะขอบโดยใช้ค่าหนึ่ง สอง สาม หรือสี่ค่า ค่าที่อาจจะเป็นความยาวเปอร์เซ็นต์หรือคำหลักเช่นรถยนต์ มาทำความเข้าใจวิธีการทำงานกัน:
โปรดทราบว่าคุณยังสามารถใช้ทางลัดเหล่านี้สำหรับคุณสมบัติการเติมและเส้นขอบ
ดูเพิ่มเติม: Cheat Sheet คุณสมบัติ CSS3 ที่จำเป็น
คุณเคยใช้มาร์จิ้นติดลบหรือไม่? หากต้องการเห็นภาพ ให้ลบการแสดงผล: ไม่มีให้แสดงภาพที่สอง จากนั้นตั้งค่าระยะขอบติดลบ
/* .display { display: none !important; } */ .content-box { display: flex; flex-direction: row; align-items: center; background-color: #fdf; height: 20em; width: 30em; padding: 5em 2em 8em; border-style: solid dashed groove ridge; border-width: 4em 2em 2em; border-radius: 20%; /* Using negative margin */ margin: 3em -20em 3em 5em; }
เอาท์พุท:
โมเดลกล่องช่วยให้คุณกำหนดช่องว่างระหว่างองค์ประกอบ เพิ่มเส้นขอบ และสร้างเลย์เอาต์ที่ดูซับซ้อนได้อย่างง่ายดาย คุณสามารถเริ่มต้นได้ทันทีเพื่อสร้างเว็บไซต์ที่ยอดเยี่ยม ในขณะเดียวกัน คุณสามารถสำรวจคุณสมบัติborder-boxโดยละเอียดและลองใช้โค้ดด้านบน
คุณควรเข้าใจว่ามีวิธีอื่นในการจัดวางเนื้อหาใน CSS ซึ่งรวมถึง CSS Grid และ CSS Flexbox เมื่อคุณคุ้นเคยกับรูปแบบกล่องแล้ว คุณควรเรียนรู้เกี่ยวกับทางเลือกเหล่านี้ต่อไป
ในขณะที่คุณสามารถใช้เครื่องคิดเลขแบบกราฟิกบนคอมพิวเตอร์ของคุณ ล่ามภาษาโปรแกรม Python สามารถเพิ่มเป็นสองเท่าของเครื่องคิดเลขตั้งโต๊ะ เป็นเรื่องตลกที่เป็นที่นิยมในชุมชน Python ที่กล่าวถึงในบทช่วยสอนอย่างเป็นทางการ คุณสามารถใช้ Python เป็นเครื่องคิดเลขได้อย่างไร
ในฐานะโปรแกรมเมอร์ คุณควรรับความท้าทายเพื่อเอาตัวรอดและสร้างสิ่งมหัศจรรย์ในด้านการพัฒนาหรือการเขียนโปรแกรม ดังนั้น หากคุณกำลังมองหาการเรียนรู้ภาษาการเขียนโปรแกรมขั้นสูงเพื่อพัฒนาทักษะการทำงาน Java เป็นหนึ่งในผู้มีโอกาสเป็นลูกค้าที่ดีที่สุด
ทุกวันนี้ เป็นเรื่องปกติที่จะสร้างเว็บไซต์หรือแอพที่ปรับเปลี่ยนส่วนต่อประสานผู้ใช้ตามเบราว์เซอร์หรืออุปกรณ์ มีสองวิธีในการบรรลุเป้าหมายนี้ ประการแรกเกี่ยวข้องกับการสร้างเว็บไซต์หรือแอปเวอร์ชันต่างๆ สำหรับอุปกรณ์ต่างๆ แต่มันไม่มีประสิทธิภาพและสามารถนำไปสู่ข้อผิดพลาดที่คาดเดาไม่ได้
การทำงานกับตัวเลขเป็นส่วนสำคัญของการเขียนโปรแกรม ภาษาการเขียนโปรแกรมทุกภาษาให้การสนับสนุนในการจัดการตัวเลขในรูปแบบต่างๆ ในบทความนี้ คุณจะได้เรียนรู้วิธีค้นหาจำนวนหลักทั้งหมดในจำนวนเต็มโดยใช้วิธีการวนซ้ำ อิงตามบันทึก และอิงสตริง
คอนเทนเนอร์มีประโยชน์อย่างมากสำหรับการพัฒนาซอฟต์แวร์ การปรับใช้ และการจัดการในสภาพแวดล้อมเสมือนจริง Docker มีประโยชน์ในกระบวนการคอนเทนเนอร์ แต่ไม่ใช่แพลตฟอร์มเดียวที่อยู่รอบๆ หากคุณกำลังค้นหาทางเลือกอื่นสำหรับ Docker ไม่ต้องมองหาที่ไหนอีกแล้ว รายการนี้แสดงทางเลือก Docker ที่มีคุณลักษณะหลากหลายและมีประสิทธิภาพเพื่อใช้ในโครงการถัดไปของคุณ
SQL vs. NoSQL: ฐานข้อมูลที่ดีที่สุดสำหรับโครงการถัดไปของคุณคืออะไร?
การฝังบริการของบุคคลที่สามในโพสต์ WordPress ของคุณเป็นวิธีที่น่าตื่นเต้นในการดึงดูดความสนใจของผู้เยี่ยมชม เนื้อหาที่ฝังยังให้สัญญาณภาพที่ทำให้การสแกนง่ายขึ้น WordPress ทำให้การเพิ่มเนื้อหาประเภทนี้เป็นเรื่องง่าย
Node.js เป็นสภาพแวดล้อมรันไทม์ JavaScript ที่ให้คุณเรียกใช้ JavaScript นอกเว็บเบราว์เซอร์ ทำให้เป็นตัวเลือกยอดนิยมสำหรับการพัฒนาแอปพลิเคชันทุกประเภท ส่วนหนึ่งของความนิยมนั้นเกิดจากแพ็คเกจ NPM ที่มีอยู่มากมายเพื่อบรรเทาประสบการณ์ของนักพัฒนา
Solidity เป็นภาษาโปรแกรมที่ใช้โดย smart contract บน Ethereum blockchain มันเป็นภาษาการเขียนโปรแกรมเชิงวัตถุที่พิมพ์แบบคงที่
GitHub Badges สามารถเพิ่มความสามารถในการอ่านของที่เก็บโดยให้ผู้ใช้มีวิธีที่รวดเร็วในการจับเมตริกของที่เก็บ คุณสามารถฝังป้ายชื่อใน README.md ของคุณเพื่อชี้แจงความสำคัญและความจำเป็นของโครงการของคุณต่อนักพัฒนาคนอื่นๆ ด้วยเหตุนี้ ผู้อ่านจึงได้รับแนวคิดอย่างรวดเร็วเกี่ยวกับที่เก็บโดยการตรวจสอบป้ายที่แนบมา
วันเฉลิมฉลองสากลเป็นวิธีที่ดีในการให้การยอมรับในเรื่องสังคม วันประวัติศาสตร์ และอาชีพที่เกี่ยวข้อง วันโปรแกรมเมอร์สากลเฉลิมฉลองบทบาทของโปรแกรมเมอร์ในการพัฒนาชีวิตประจำวัน โลกอารยะที่เราอาศัยอยู่เป็นผลจากการทำงานหนักของโปรแกรมเมอร์
ไม่ว่าจะเป็นการสืบค้นฐานข้อมูลหรือผลลัพธ์ของการดำเนินการทางคณิตศาสตร์ วิธีการจัดรูปแบบสตริงของ Python นำเสนอวิธีที่มีพลังและน่าสนใจยิ่งขึ้นในการนำเสนอผลลัพธ์ต่อผู้ใช้
เมื่อต้นปีนี้ Microsoft ได้เปิดตัว Visual Studio 2022 เวอร์ชันตัวอย่างสู่โลกแห่งการเขียนโปรแกรม นี่เป็นข่าวดี! เป็น IDE ที่ได้รับความนิยมอย่างมาก แต่เนื่องมาจากการปรับแต่งหรือบางทีอาจถึงขั้นยกเครื่อง เนื่องจากการเปลี่ยนแปลงในระบบนิเวศ DevOps ที่เติบโตอย่างรวดเร็ว
เมตริกซอฟต์แวร์คือการวัดที่ใช้เพื่อหาปริมาณซอฟต์แวร์ของคุณในแง่มุมต่างๆ ประเด็นเหล่านี้อาจมีตั้งแต่ต้นทุน คุณภาพ และประสิทธิภาพของทีมพัฒนา
หากคุณเป็นนักพัฒนา Python คุณจะได้รับประโยชน์อย่างมากจากอาร์เรย์ของเฟรมเวิร์กที่มีอยู่ แม้ว่ากรอบงานบางประเภทจะเหมาะสมที่สุดสำหรับระบบนิเวศขนาดใหญ่ แต่บางกรอบงานก็เชี่ยวชาญในการให้บริการตามเป้าหมายการพัฒนาที่เฉพาะเจาะจง อ่านต่อไปเพื่อเรียนรู้คุณสมบัติพื้นฐาน การใช้งาน และความแตกต่างระหว่างสองเฟรมเวิร์กของ Python: Flask และ CherryPy
โปรแกรมเมอร์หลายคนชอบที่จะแก้ปัญหาทางคณิตศาสตร์ที่ยุ่งยากโดยใช้โค้ด ช่วยฝึกฝนจิตใจและพัฒนาทักษะการแก้ปัญหา ในบทความนี้ คุณจะได้เรียนรู้วิธีค้นหาสี่เหลี่ยมและลูกบาศก์ที่สมบูรณ์แบบ n-digit ที่เล็กที่สุดและใหญ่ที่สุดโดยใช้ Python, C++ และ JavaScript แต่ละตัวอย่างยังมีเอาต์พุตตัวอย่างสำหรับค่าต่างๆ
ไม่ต้องสงสัยเลยว่าเทคโนโลยีคืออุตสาหกรรมแห่งอนาคต หากคุณเป็นหนึ่งในคนหนุ่มสาวหลายล้านคนที่กำลังจะก้าวเข้าสู่ขั้นแรกของอาชีพการงาน คุณอาจสงสัยว่าจะทำอย่างไรถ้าคุณไม่ชอบเขียนโค้ด
กำลังมองหาทางเลือก WordPress เพื่อสร้างเว็บไซต์ของคุณ? มองไม่เพิ่มเติม บทความนี้จะแสดงระบบจัดการเนื้อหา (CMS) อื่นๆ ที่คุณสามารถใช้สร้างไซต์ของคุณได้
คุณมักจะเผชิญกับภาวะที่กลืนไม่เข้าคายไม่ออกในขณะที่สร้างเว็บไซต์สำหรับตัวคุณเองหรือธุรกิจของคุณ WordPress กับ Wix—จะเลือกอันไหนและอันไหนดีที่สุดสำหรับคุณ?
ในขณะที่คุณสามารถใช้เครื่องคิดเลขแบบกราฟิกบนคอมพิวเตอร์ของคุณ ล่ามภาษาโปรแกรม Python สามารถเพิ่มเป็นสองเท่าของเครื่องคิดเลขตั้งโต๊ะ เป็นเรื่องตลกที่เป็นที่นิยมในชุมชน Python ที่กล่าวถึงในบทช่วยสอนอย่างเป็นทางการ คุณสามารถใช้ Python เป็นเครื่องคิดเลขได้อย่างไร
ในฐานะโปรแกรมเมอร์ คุณควรรับความท้าทายเพื่อเอาตัวรอดและสร้างสิ่งมหัศจรรย์ในด้านการพัฒนาหรือการเขียนโปรแกรม ดังนั้น หากคุณกำลังมองหาการเรียนรู้ภาษาการเขียนโปรแกรมขั้นสูงเพื่อพัฒนาทักษะการทำงาน Java เป็นหนึ่งในผู้มีโอกาสเป็นลูกค้าที่ดีที่สุด
การเรียนรู้ภาษาการเขียนโปรแกรมใหม่อย่าง Python จะกลายเป็นเรื่องง่ายดาย หากคุณมีแผนงานที่ครอบคลุมซึ่งให้รายละเอียดว่าควรเรียนรู้แนวคิดใดในฐานะผู้เริ่มต้น และวิธีดำเนินการต่อไปเพื่อก้าวไปสู่ขั้นต่อไป แม้แต่โปรแกรมเมอร์ระดับกลางก็ควรหมั่นฝึกฝนพื้นฐานเพื่อสร้างรากฐานที่มั่นคงสำหรับตนเอง
ทุกวันนี้ เป็นเรื่องปกติที่จะสร้างเว็บไซต์หรือแอพที่ปรับเปลี่ยนส่วนต่อประสานผู้ใช้ตามเบราว์เซอร์หรืออุปกรณ์ มีสองวิธีในการบรรลุเป้าหมายนี้ ประการแรกเกี่ยวข้องกับการสร้างเว็บไซต์หรือแอปเวอร์ชันต่างๆ สำหรับอุปกรณ์ต่างๆ แต่มันไม่มีประสิทธิภาพและสามารถนำไปสู่ข้อผิดพลาดที่คาดเดาไม่ได้
การทำงานกับตัวเลขเป็นส่วนสำคัญของการเขียนโปรแกรม ภาษาการเขียนโปรแกรมทุกภาษาให้การสนับสนุนในการจัดการตัวเลขในรูปแบบต่างๆ ในบทความนี้ คุณจะได้เรียนรู้วิธีค้นหาจำนวนหลักทั้งหมดในจำนวนเต็มโดยใช้วิธีการวนซ้ำ อิงตามบันทึก และอิงสตริง
คอนเทนเนอร์มีประโยชน์อย่างมากสำหรับการพัฒนาซอฟต์แวร์ การปรับใช้ และการจัดการในสภาพแวดล้อมเสมือนจริง Docker มีประโยชน์ในกระบวนการคอนเทนเนอร์ แต่ไม่ใช่แพลตฟอร์มเดียวที่อยู่รอบๆ หากคุณกำลังค้นหาทางเลือกอื่นสำหรับ Docker ไม่ต้องมองหาที่ไหนอีกแล้ว รายการนี้แสดงทางเลือก Docker ที่มีคุณลักษณะหลากหลายและมีประสิทธิภาพเพื่อใช้ในโครงการถัดไปของคุณ
SQL vs. NoSQL: ฐานข้อมูลที่ดีที่สุดสำหรับโครงการถัดไปของคุณคืออะไร?
การฝังบริการของบุคคลที่สามในโพสต์ WordPress ของคุณเป็นวิธีที่น่าตื่นเต้นในการดึงดูดความสนใจของผู้เยี่ยมชม เนื้อหาที่ฝังยังให้สัญญาณภาพที่ทำให้การสแกนง่ายขึ้น WordPress ทำให้การเพิ่มเนื้อหาประเภทนี้เป็นเรื่องง่าย
Node.js เป็นสภาพแวดล้อมรันไทม์ JavaScript ที่ให้คุณเรียกใช้ JavaScript นอกเว็บเบราว์เซอร์ ทำให้เป็นตัวเลือกยอดนิยมสำหรับการพัฒนาแอปพลิเคชันทุกประเภท ส่วนหนึ่งของความนิยมนั้นเกิดจากแพ็คเกจ NPM ที่มีอยู่มากมายเพื่อบรรเทาประสบการณ์ของนักพัฒนา
Solidity เป็นภาษาโปรแกรมที่ใช้โดย smart contract บน Ethereum blockchain มันเป็นภาษาการเขียนโปรแกรมเชิงวัตถุที่พิมพ์แบบคงที่
