防脱发神器

  1. 一图胜千言

  2. 使用 border-box 控制尺寸更加直观，因此，很多网站都会加入下面的代码：

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

尺寸的百分比

  1. 绝大部分可以书写尺寸的地方，都可以书写百分比，百分比是一个相对单位，其相对于元素的 参考系 ，比如：

    1. 普通元素的参考系为 父元素的内容区域；
    2. 绝对（固定）定位元素的参考系为父元素中 第一个定位元素的 padding 区域；

  2. 下面罗列常见的百分比情况：

    css 属性 百分比相对于 备注
    width 参考系的 宽度
    height 参考系的 高度 参考系高度受本身宽度影响时，设置无效
    padding 参考系的 宽度
    border 参考系的 宽度
    margin 参考系的 宽度

最大最小宽高

  1. 当一个元素的尺寸会自动变化时，设置最大最小宽高，可以让它不至于变得过小或过大。

    1. 最大宽度：max-width；
    2. 最大高度：max-height；
    3. 最小宽度：min-width；
    4. 最小高度：min-height；

  2. 在实际开发中，通常为 PC 端的页面设置一个最小宽度，通常此宽度为设计稿的宽度；

    html {
  min-width: 1226px;
}

  3. 又或者，会为页面中的所有图片设置一个最大宽度，让其不至于超过容器；

    img {
  max-width: 100%;
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 防脱发神器
  2. 2. 尺寸的百分比
  3. 3. 最大最小宽高