Học cách kiểm soát layout và vị trí elements với Display properties và Positioning system
Display property quyết định cách element được hiển thị và tương tác với các elements khác trong layout.
/* Display Values */
display: block; /* Full width, new line */
display: inline; /* Content width, same line */
display: inline-block; /* Best of both worlds */
display: none; /* Hidden, no space taken */
display: flex; /* Flexible box layout */
display: grid; /* Grid layout */
/* Visibility vs Display */
visibility: hidden; /* Hidden but space reserved */
display: none; /* Hidden and no space taken *//* Block Elements */
.block-demo {
display: block;
background-color: #e3f2fd;
padding: 15px;
margin: 10px 0;
border: 2px solid #2196f3;
width: 200px;
}
/* Inline Elements */
.inline-demo {
display: inline;
background-color: #f3e5f5;
padding: 8px 12px;
border: 2px solid #9c27b0;
}
/* Inline-Block Elements */
.inline-block-demo {
display: inline-block;
background-color: #e8f5e8;
padding: 15px;
margin: 10px;
border: 2px solid #4caf50;
width: 120px;
height: 60px;
text-align: center;
}
/* Flex Container */
.flex-demo {
display: flex;
gap: 10px;
background-color: #fff3e0;
padding: 15px;
border: 2px dashed #ff9800;
}
.flex-item {
background-color: #ffcc80;
padding: 10px;
flex: 1;
text-align: center;
}Block, Inline, Flex, Grid
Static, Relative, Absolute, Fixed
Stacking order & context
Modals, cards, tooltips
Display và Positioning là nền tảng để tạo ra mọi layout phức tạp trong CSS! 🚀