[TOC]

CSS部分

1. IE盒模型和标准盒模型

可使用CSS属性来切换IE盒模型和标准盒模型:

box-sizing:border-box || content-box || inherit
  • 当使用content-box时:页面将采用标准模式来解析计算,content-box也是默认模式
  • 当使用border-box时,页面将采用怪异模式解析计算,怪异模式也称为IE模式
  • 当使用inherit时:页面将从父元素继承box-sizing的值

参考资料:https://www.jianshu.com/p/cc2bc404269b

2. px、em、rem区别

px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。

chrome设置的最小字体大小为12px,意思就是说低于12px的字体大小会被默认为12px,当然这一尬境可以由css3解决,这里就不多说了。

em

  • 子元素字体大小的em是相对于父元素字体大小
  • 元素的width/height/padding/margin用em的话是相对于该元素的font-size

rem

rem是全部的长度都相对于根元素,根元素是谁?<html>元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。

3. 实现左、中、右三列布局

实现一个左、中、右三列布局,两边宽度固定,中间自适应

使用绝对定位:

<style>
  .father { position: relative; height: 400px; }
  .father > div {
    border: 1px solid;
    position: absolute;
    height: 100%;
    top: 0;
  }
  .son1 { left: 0; width: 200px; }
  .son2 {
    left: 200px;
    right: 200px;
    background-color: rgba(33, 33, 186, 0.2);
  }
  .son3 { right: 0; width: 200px; }
</style>
<div class="father">
  <div class="son1">左边</div>
  <div class="son2">中间中间中间中中间</div>
  <div class="son3">右边</div>
</div>

使用float:

<style>
  .father { height: 400px; }
  .father > div {
    border: 1px solid;
    height: 100%;
    box-sizing: border-box;
  }
  .son1 { float: left; width: 200px; }
  .son2 {
    background-color: rgba(33, 33, 186, 0.2);
    margin: 0 200px;
  }
  .son3 { float: right; width: 200px; }
</style>
<div class="father">
  <div class="son1">左边</div>
  <div class="son3">右边</div>
  <div class="son2">中间中间中间中中间</div>
</div>

参考资料:css中单位em和rem的区别

powered by Gitbook文件最后修改时间: 2020-04-24 15:05:49

results matching ""

    No results matching ""