css的margin-block与margin-trim布局切换示例代码-html代码-BFW代码库

代码语言：html

代码描述：css的margin-block与margin-trim布局切换示例代码

代码标签： css margin-block margin-trim 布局切换示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
/*-------------------------------------------*/
/*   Options                                 */
/*-------------------------------------------*/

/* Margin block */

section:has(option[value="zero"]:checked) article p {
  margin-block: 0;
}
section:has(option[value="one-em"]:checked) article p {
  margin-block: 1em;
}
section:has(option[value="one-line-height"]:checked) article p {
  margin-block: 1lh;
}

/* Margin trim */

section:has(option[value="margin-trim-none"]:checked) article div {
  margin-trim: none;
}
section:has(option[value="margin-trim-block"]:checked) article div {
  margin-trim: block;
}
section:has(option[value="margin-trim-block-start"]:checked) article div {
  margin-trim: block-start;
}
section:has(option[value="margin-trim-block-end"]:checked) article div {
  margin-trim: block-end;
}

/* Support note about margin-trim */

.margin-trim-support {
  display: none;
  font-size: 85%;
  line-height: 1.4;
  background: light-dark(rgb(255, 0, 0, 0.2), rgb(140, 63, 95));
  margin-block: 1lh;
  padding: 1px 1lh;
  a {
    color: light-dark(black, #f5abca);
  }
}
section:has(option[value="margin-trim-block"]:checked) {
  @supports not (margin-trim: block) {
    .margin-trim-support {
      display: block;
    }
  }
}


/*-------------------------------------------*/
/*   Paragraphs and Guides                   */
/*-------------------------------------------*/

.paragraphs {
  p {    
    font-size: 1.2rem;
    line-height: 1.3;
  }
}
.paragraphs div {
  border: 1px solid canvas;
}
body:has(input[id="paragraphs-guides"]:checked) {
  .paragraphs {
    background-color: light-dark(lemonchiffon, midnightblue);
    div {
      background-color: light-dark(rgb(0, 232, 232, 0.3), 
                        color(display-p3 0 0.431 0.435));
      
      border: 1px solid light-dark(#00e8e8, 
                        color(display-p3 0 0.634 0.64));
    }
    p {
      background-color: canvas;
    }
  }
}

/*-------------------------------------------*/
/*   Overall page and UI                     */
/*-------------------------------------------*/

*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light dark;
  --code-font: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --code-color: rebeccapurple;
}
body {
  margin: 4rem;
  font-family: ui-rounded, system-ui, sans-serif;
  background: light-dark(#f0ebd4, color(display-p3 0.181 0.235 0.059));
}
header {
  text-align: center;
  color: light-dark(green, hotpink);
  code { color: green;  font-family: inherit; }
  h1 { 
    font-size: 3.2rem; 
    margin: 0; 
    font-weight: 100;
    text-wrap: balance;
  }
}
code {
  color: var(--code-color);
  font-family: var(--code-font);
}
main {
  display: grid;
  gap: 4rem;
  margin-block-start: 3rem;
  margin-inline: auto;
  max-width: 1250px;
}
main, button {
  font-family: var(--font-family);
} 
section.demo {
  display: grid;
  grid-template-columns: 32ch 1fr;
  grid-template-rows: max-content 1fr;
  grid-template-areas: "header demo"
                       "interface demo";
  gap: 2rem 1rem;
  background: light-dark(#faf6e3, #c8bf93);
  align-items: start;
  > h2 {
    grid-area: header;
    font-size: 1.8rem;
    font-weight: 100;
    color: #6e5b45;
    margin: 0;
    padding: 2rem 0 0 2rem;
  }
  .interface {
    grid-area: interface;
    padding: 0 0 2rem 2rem;
    /* should be padding-inline-start: 2rem; for narrow screens*/
    font-family: var(--code-font);
    label, select { color: var(--code-color); }
    label { display: block; margin-block-end: 0.5lh;}
    span { color: black; } 
    .guides {
      display: flex;
      align-items: center;
      gap: 0.5lh;
      accent-color: var(--code-color);
    }
  }
  article {
    grid-area: demo;
    background: canvas;
    /* background: paleyellow; */
    color: textColor;
    padding: 2lh;
    width: 100%;
    align-self: stretch;
    align-items: center;
    font-size: 1.2rem;
    line-height: 1.3;
  }
}
@media (max-width: 800px) {
  section.demo {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: &qu.........完整代码请登录后点击上方下载按钮下载查看