526互联

防御性CSS

发布时间 2023-10-20 21:56:52作者: Jannik

什么是防御性CSS呢？

我的理解是我们所写的网页的内容不完全是静态的，也是可以发生变化的，因此也就增加了CSS出现的问题。不管网页的内容是多是少，还是窗口尺寸是大还是小，页面里面的内容与布局是要能正常显示而不会被破坏。

Flexbox 折行

Flexbox 是 CSS 中经常使用的布局，在父元素中设置 display: flex 属性，子元素就会按顺序逐个排列。但是，当它们的空间不够用的时候，这些子元素默认情况下不会进行折行。所以我们需要添加 flex-wrap: wrap 属性来改变这种行为。下面是一个比较典型的例子。我们有一组选项，它们应该挨着显示。

 <ul class="breadcrumbs">
      <li class="breadcrumbs__item">
        <a href="#">Home</a>
      </li>
      <li class="breadcrumbs__item">
        <a href="#">Articles</a>
      </li>
      <li class="breadcrumbs__item">
        <a href="#">Defensive CSS</a>
      </li>
 </ul>

ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
}

.breadcrumbs__item:not(:last-child)::after {
  content: ">";
  margin-left: 0.5rem;
  margin-right: 1rem;
}