前端基础知识大总结

ava鱼
125 阅读2分钟
「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」

css

HTML语义化

  • 让人更容易懂 语义化
  • 更利于机器SEO

块状元素& 内联元素

  • 块状元素： display:block/table; 有div，h1-h6, talbe,ul,ol,p等
  • 内联元素: display:inline/inline-block;有img,span,input,button等

盒模型宽度计算

  • offsetWidth = (内容宽度+内边距+边框），无外边距
  • box-sizing:border-box
.text{
    width:100px;
    padding:10px;
    border:2px solid red;
    margin:5px;
    // box-sizing:border-box; // 如设置此行，则offsetWidth为100
}
// 则offsetWidth为124

margin 纵向重叠问题

  • 相邻元素的 margin-top和 margin-bottom会发生重叠
  • 空白内容的<p></p>也会重叠

p{
    font-size:14px;
    line-height:1;
    margin-top:10px;
    margin-bottom:20px;
}
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

AAA和BBB之间的距离是多少？ // 20px

margin 负值问题

  • margin-top 和 margin-left负值，元素向上、向左移动
  • margin-right 负值，右侧元素左移，自身不受影响
  • margin-bottom 负值，下侧元素上移，自身不受影响

BFC理解应用

  • Block format context, 块级格式化上下文
  • 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

  • float不是none
  • position是absolute或fixed
  • overflow不是visible
  • display是flex、 inline-block等

BFC的常见应用

  • 清除浮动

float布局

  • 实现圣杯布局和双飞翼布局
  • 手写clearfix
.clearfix:after{
    content:'';
    display:table;
    clear:both;
}
.clearfix{
    *zoom:1 ; //兼容低版本IE
}

flex布局

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • align-self

居中对齐方式

水平居中

  • inline元素： text-align:center
  • block元素：margin:auto
  • absolute元素 : left:50% + margin-left负值(or transform:tranlateX(-50%) )

垂直居中

  • inline元素： line-height的值=height值
  • absolute元素： top:50% + margin-top负值
  • absolute元素：transform:translate(-50% -50%)
  • absolute元素：top left bottom right= 0 + margin:auto

line-height如何继承

  • 写具体数值，如 20px, 则继承此值
  • 写比例，如 1.5, 则继承该比例
  • 写百分比，如200%，则继承计算出来的值
body{ font-size:20px;line-height:200%;}
p{ font-size:16px}
// p的line-height为40px

css响应式

  • rem
    • px 绝对长度单位
    • em 相对长度单位，相对父元素，不常用
    • rem 相对长度单位，相对于根元素html，常用于响应式布局
  • 响应式常见方案
    • media-query,根据不同的屏幕宽度设置根元素font-size
    • rem
  • vw vh
    • rem弊端：阶梯性
    • 网页视口尺寸
      • window.screen.height //屏幕高度
      • window.innerHeight // 网页视口高度 = 100vh
      • document.body.clientHeight //body高度
    • vh 网页视口高度的1/100
    • vw 网页视口宽度的1/100
    • vmax取2者最大值，vmin2者最小值
@media only screen and (max-width:374px){ 
    //iphone 5
    html{font-size:86px}
}
@media only screen and (min-width:375px) and (max-width:413px){ 
    //iphone 6/7/8/X
    html{font-size:100px}
}
@media only screen and (min-width:414px){ 
    // iphone 6P +
    html{font-size:110px}
}

css3动画

avatar
文章
阅读
粉丝