CSS Coffee | The daily sip of CSS

生成你自己的 Playground

输入任意 CSS 属性，即时获得一个可交互的实时示例。

height

.container { background-color: #f0f0f0; padding: 20px; text-align: center; } .box { height: 150px; width: 150px; background-color: #3498db; color: white; display: flex; align-items: center; justify-content: center; border-radius: 10px; }

CSS中的'height'属性用于指定元素的高度。可以使用多种单位来设置，例如像素、百分比或视口单位。调整高度会显著影响网页元素的布局和外观。

hanging-punctuation

.text-container { width: 300px; margin: 20px; font-family: Arial, sans-serif; font-size: 18px; }
.hanging-punctuation { hanging-punctuation: first; text-align: justify; margin-left: -0.5em; display: inline-block; }

'hanging-punctuation' CSS 属性控制标点符号在文本行的开头或结尾的放置。它允许标点符号悬挂在边距外，从而创建更具视觉吸引力的文本布局。这个属性在排版中尤其有用，可以提高文本密集设计的可读性和美观性。

grid-template-rows

.grid-container { display: grid; grid-template-rows: 100px 200px auto; gap: 10px; }
.grid-item { background-color: lightblue; border: 1px solid blue; display: flex; align-items: center; justify-content: center; font-size: 20px; }

'grid-template-rows' CSS 属性定义了网格布局中行的高度。它允许您指定每一行的大小，使您能够轻松创建复杂的布局。这个属性对于创建响应式设计和控制内容的视觉层次结构特别有用。

grid-template-columns

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border: 1px solid #ddd; }

CSS中的'grid-template-columns'属性定义了网格布局中列的数量和大小。通过指定每列的宽度，无论是固定单位还是相对单位，它都允许您创建复杂且响应式的布局。这个属性对于将内容组织成结构化的网格格式至关重要。

grid-template-areas

.grid-container {
  display: grid;
  grid-template-areas: 'header header' 'sidebar main' 'footer footer';
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
} 
.header {
  grid-area: header;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 20px;
} 
.sidebar {
  grid-area: sidebar;
  background-color: #2196F3;
  color: white;
  padding: 20px;
} 
.main {
  grid-area: main;
  background-color: #f4f4f4;
  padding: 20px;
} 
.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

'grid-template-areas' CSS 属性允许您通过为网格的特定区域分配名称来定义网格布局。这使您能够创建一个结构化的布局，易于阅读和维护，因为您可以在 CSS 中引用这些命名区域，以便在网格内定位元素。

Learn CSS daily

生成你自己的 Playground