Frontend Practice

HTML CSS

  1. clear

See the Pen clear 的正确用法 by billscofield (@billscofield) on CodePen.

布局

水平居中

  1. 文本/行内元素/行内块级元素
    • text-align:center(父元素上,vertical-align 是写在子元素上)
  2. 单个块级元素
    • margin:0 auto
  3. 多个块级元素
    • display:inline-block; + text-align:center;

  4. 使用绝对定位实现

     width:100px;
 height:50px;
 position:absolute;
 left:50%;
 margin-left:-50px;
 //transform: translateX(-50%);  /*自身宽度一半,等同于margin-left: -50px;*/

两栏布局

  1. 右侧固定

See the Pen 两栏布局右侧固定左侧自适应 by billscofield (@billscofield) on CodePen.

小知识点

  1. offsetWidth 对应 border-box, clientWidth 对应 padding-box
    • 原生 DOM API 没有 margin-box 对应的宽度和高度

See the Pen offsetWidth & clientWidth by billscofield (@billscofield) on CodePen.

  1. inline-block元素的baseline确定规则
    • inline-block 如果没有内联元素，或者overflow不是visible, 则该元素的基线就是其 margin 底边缘
    • inline-block 如果不是空的，基线是元素里面最后一行内联元素的基线

See the Pen inline-block 元素的 baseline 确定规则 by billscofield (@billscofield) on CodePen.

  1. 非主动触发位移的内联元素是不可能跑到计算容器外面的

See the Pen 非主动触发位移的内联元素 by billscofield (@billscofield) on CodePen.

  1. inline-block 特殊情况下的 baseline
    • inline-block 为空元素，或者 overflow 不为 visible 时，元素的 baseline 为 margin-bottom
    • 否则，inline-block 的baseline 为元素中最后一行内容的 baseline
    • line-height:0 时，inline-block 从 x 的中线开始，还是baseline 对齐，所以 父元素div会被撑开0.5ex

See the Pen inline-block 的 baseline by billscofield (@billscofield) on CodePen.