HTML5与CSS3(已归纳入其他博客弃用)_html5 css3 组件-优快云博客

查漏补缺了~~~
这部分一直都是能用就行，不会就去网上搜，开发用的组件有对应样式，平时写的很少，更没有系统性学习过，成了短板…

html5:

html5新增了语义化标签：nav、section、footer …
新增了canvas标签
新增视频和音频标签 video 、audio
html5完全支持css3
浏览器内核的理解
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
- 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
- JS引擎则：解析和执行javascript来实现网页的动态效果
行内元素：a b br i span input select strong
块级元素：div p h1—h6 from ul ol li
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

CSS3:

盒子模型 margin border padding content
CSS选择器：
ID类标签相邻+父子>后代通配属性[]伪类选择器:
id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child(n)）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
选择第几个子元素
display值
none–隐藏（visibility:hidden opacity:0）
inline（默认共享一行大小由内容撑开只有padding和margin的左右生效）
block–块元素（独占一行，会默认填满父元素的宽度，有盒子模型）
inline-block -行内块
table–表格显示
list-item–项目列表
flex
position值
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
CSS3新特性:
弹性盒模型 display: flex;
颜色透明度 color: rgba（255, 0, 0, 0.75）；
圆角 border-radius: 5px;
渐变 background:linear-gradient（red, green, blue）；
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
文字特效、旋转,缩放,定位,倾斜
新增伪类、伪元素
- p:first-of-type 选择属于其父元素的首个元素的每个元素。
  p:last-of-type 选择属于其父元素的最后元素的每个元素。
  p:only-of-type 选择属于其父元素唯一的元素的每个元素。
  p:only-child 选择属于其父元素唯一的子元素的每个元素。
- :hover 将样式添加到鼠标悬浮的元素
  :active 将样式添加到被激活的元素
  :focus 将样式添加到获得焦点的元素
  :link 将样式添加到未被访问过的链接
overflow属性
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
- margin: 0 auto;
px、em等单位
- 绝对单位
  cm 厘米、mm 毫米、in 英寸、px 像素
- 相对单位：
  em：相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
  rem：（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小
  vw：视窗宽度，1vw=视窗宽度的1%
  vh：视窗高度，1vh=视窗高度的1%
flex布局
粘性定位：position:sticky;top:0px;