前端知识总结

1.html

1. 如何理解html语义化

1. 让人更好的读懂 
2. 让搜索引擎更好的读懂 （有利于SEO)
复制代码

2. 详细例举一些 html标签 中内联元素 和 块级元素

块级元素 display: block/table  （div h1 h2 ul ol p table 等）
内联元素 display: inline/inline-block （span button input select img 等）
复制代码

2.css

1. flex布局

父元素上有什么属性 
    display: flex || inline-flex;
    justify-content: center || flex-start || flex-end || space-around || space-between
    align-items: center || flex-start || flex-end || stretch || baseline 
    flex-direction: row || row-reverse || columns || columns-reverse
    flex-wrap: wrap || nowrap || wrap-reverse
    flex-flow: flex-direction || flex-wrap 
    align-content: flex-start || flex-end || center || stretch
子元素上有什么属性
    order: <interger>
    align-self: flex-start || flex-end || center 
    flex-growth: <interger>
    flex-shrink: <interger>
    flex-basis: <interger>
    flex: flex-growth || flex-shrink || flex-basis 
复制代码

2. relative 和 absolute 依据什么来定位？

    relative 依据自身来进行定位
    absolute 依据最近一层的定位元素来进行定位 
    没有找到定位元素的话, 就会找到body
    
复制代码

3. 水平居中

行内元素 - 用 text-align: center 
块级元素 - 用 margin: 0px auto;
absolute元素 - left:50%; margin-left:<子元素宽度的负值>
display:flex; justify-content:center;
复制代码

4. 垂直居中

行内元素 - 用 line-height 取 父元素高度的值 
absolute元素 - top:50%; margin-top:<子元素高度的负值>
absolute元素 - top:50%; transform:translate('-50%')
absolute元素 - top:0px; bottom:0px; margin:auto; margin为auto的话 浏览器会自动分配均等空间 
display:flex; align-items:center;

复制代码

5. 水平垂直居中

flex布局 - display:flex; justify-content:center; align-items:center;
行内元素 - text-align:center; line-height: <父元素的高度>
absolute元素 - top:50%; left:50%; margin-left: 负值 margin-top: 负值 
absolute元素 - top:50%; left:50%; transform:translate('-50%','-50%')
absolute元素 - top:0px; right:0px; bottom:0px; left:0px; margin:auto;
复制代码

6. img中alt和title的区别

alt为图片加载不出来的时候,显示的文字
title为鼠标移到图片上面的时候，显示的文字
复制代码