查漏补缺了~~~
这部分一直都是能用就行,不会就去网上搜,开发用的组件有对应样式,平时写的很少,更没有系统性学习过,成了短板…
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 将样式添加到未被访问过的链接
- p:first-of-type 选择属于其父元素的首个元素的每个元素。
- 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;