文章目录
  1. 一，关于布局的注意点
  2. 二，基础布局
  3. 三，尺寸问题
  4. 参考资料

一，关于布局的注意点

  1. 设置max-width比设置width能让浏览器更好地处理小窗口的情况，你可以试一试。当设置为max-width的时候浏览器宽度是不能调节为比max-width小的。

  2. 我建议给所有元素都设置的，因为border-box可以让你的内边距和边框不再增加你的width和height（如果默认的话（content-box），你设置width:800px，其实只是内容的宽度，还要加上边框和padding）

    * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

  3. position的一些注意点：

    • static是默认值，啥用都没有。
    • relative和static的差别是它可以设置top，left之类的属性让它偏离原本它应该在的位置
    • fixed和relative的区别是他是相对视窗定位的，这就是说它不随页面滚动而改变位置，可以用来一些导航栏的设置。
    • absolute和fixed类似，但是它是相对最近的positioned的祖先元素（不是static的元素），如果找不到就相对body元素进行偏移，所以记得有时候要把当前元素的父元素设置为不是static哦。

  4. 当我们使用百分比的时候可能缩小窗口会破坏类似侧边栏的显示效果，你可以查询一下当前宽度，然后设置不同的显示。

    @media (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media (max-width:599px) {
  nav li {
    display: inline;
  }
}

  5. 相对float，其实display:inline-block更好用。

二，基础布局

  1. 空间居中布局

    .container{
  display:grid;
  place-items:center;
}

    类似的可以设置place-items为start和end设置为左上角和右下角布局。

  2. 并列式布局：多个项目并列，放不下就换行

    .container{
    display:flex;
    flex-wrap:wrap; //可换行
    justify-content:center; //内容居中
}
.item{
  flex:0 1 150px; //flex-grow flex-shrink flex-basis
  margin:5px;
}

  3. 两栏式布局：边栏始终存在，主栏大小改变

    .container{
  display:grid;
  grid-template-columns:minmax(150px,25%) 1fr; //页面分为两列，第一列宽度为最小宽度为150px,最大宽度为总宽度25%；第二列为1fr,即剩下所有宽度。
}

  4. 三明治布局：页眉+内容区+页脚 宽度自适应，页脚始终在容器底部

    .container{
  display:grid;
  grid-template-rows:auto 1fr auto; //页眉和页脚高度为auto，就是本来宽度；内容区为1fr,即剩下所有宽度。
}

  5. 圣杯布局：页眉+页脚+内容区（左边栏+右边栏+中间栏），宽度太窄左边栏和右边栏会看不到。

    .container{
  display:grid;
  grid-template:auto 1fr auto/auto 1fr auto;
}

三，尺寸问题

  1. px、em、rem的区别：
  • px：像素，绝对单位，相对显示器屏幕分辨率而言。
  • em：相对长度单位，相对当前对象内的文本字体尺寸，继承父级元素的字体大小（font-size），如果没设置font-size那么会相对于浏览器的默认字体尺寸（16px）。为了换算方便，我们都会给body设置font-size=62.5%，这样1em=10px。
  • rem（root em）：相对长度单位，但是只相对HTML根元素，没有父级元素继承。（适配性很强，调整界面大小文字也会大小改变，适配性最好）

参考资料