前端基础知识

html常见元素

meta title style link script base  div section article aside header footer p span em strong table thead tbody tr td  ul ol li dl dt dd 
a  from  input select  textarea button 

html5新增元素

      新区块标签  section article nav aside 

      表单增强  日期 时间 搜索 表单验证 praceholder 自动聚焦

      新增语义

     新的api   离线 音视频 图形 实时通信 本地存储  设备能力

html元素分类，按默认样式分

     块级block  行内 niline   inline-block

html嵌套关系  

     块级元素可以包含行内元素    块级元素不一定包含块级元素 例如 p  行内元素一般不包含块级元素  a除外

选择器分类

      元素选择器  a  伪元素选择器 ：：before是真实存在的  类选择器 class  属性选择器 type=redio  id  伪类选择器  ：hover是元素的状态   id选择器 组合选择器  否定选择器 ：not  通用选择器 *

选择权重

     id选择器 +100  类属性 伪类 +10   元素伪元素+1 其他选择器+0

字体自重颜色大小行高

     多字体fallback机制，不存在字体会使用默认字体

    inline box 按基线自动排版行高  行高决定上下多余的高度 lineboxt由inlinebox决定的

   line-height 默认垂直居中的

   修改基线对齐方法  vertical-align:middle/top/bottom

   文字和图片同时存在 图片也按基线排版所有底部空白

背景和边框

   背景颜色 background:red #000 hsl(0,1100%50%)色相饱和度亮度透明度 rgb  url

   渐变背景 liner-gradient  liner-gradient

   背景图片和属性  background  red url  no-repeat

   base64和性能优化  减少http连接 图片会增大1/3 增大解码压力 适合小图标

   多分辨适配  background-size 缩放图片像素 针对模糊都是大图片缩小来做

滚动和换行

     文字折行  overflow-wrap 通用换行控制 是否保留单词

     word-break 针对多字节文字 设置字母 单词 中文句子为单词

    white-space 空白处时候断行  也可以设置所有不折行

粗体 斜体 下划线

    font-weight 字重 粗体 font-style:itatic 斜体 text-decoration 下划线 cursor指针

其他

    css hack 兼容ie876

table 布局  

     table tr  td

float 浮动+mmargin布局

 元素浮动  脱离文档流 不脱离文本流  主要做图文混排 形成快 位置尽量靠上  上面贴非float元素 旁边贴float元素不影响其他块级元素与文本  对父级元素影响 

inline-block布局

flexbox布局

    弹性盒子  盒子本来是并列的 指定宽度即可  display:flex 子元素 flex:1

布局基本知识

    盒子模型 宽度和高度只对内容有效

    position static  relative 偏移是针对本身  原本位置不会变  absolute绝对定位 不会对其他元素有影响  flex相对可视区 不对其他元素有影响

响应式设计和布局

    在不同设备上正常使用 主要处理屏幕大小问题  通用的做法有 隐藏 侧边框 flooter  折行 自使用空间 rem  viewport  media query

    案例1  viewport 和 @media query  隐藏侧边框方法

    案例2 view  media query  折行居中方法

   案例3 更改viewport  width=320  或者脚本计算视图大小

    案例3 使用rem  但是不够精确  如果需要精确使用px  俩种布局策略  尺寸大的放上面