- window.onload() \ document.ready()
- src 、href
href:网络资源所在位置,超链接
src:外部资源的位置,指向内容嵌入至文档中当前标签的位置(js、img、frame) - reflow 、repaint
reflow重排(回流):dom树发生变化,重新计算元素的几何信息
repaint重绘:根据dom树及几何信息,绘制html页面 - 伪类和伪元素
区别:是否创造了新元素
总结
伪类::hover、:first-child、:checked、:enabled
伪元素::first-letter :first-line :before :after :placeholder :selection
-
行内元素、块级元素
inline:a 、span、input、select、img
block:div、p、ul、ol、h1、dl、dt
-
html5新特性
1)canvas画布
2)video、audio元素
3)localstorage sessionstorage
4)语义化元素 header aside aticle footer nav section
5)表单控件:date、time、email、calendar、url、search
6)webworker、websocket -
html5语义化的理解
1)html语义化让页面内容更结构化,结构更清晰
2)便于对浏览器解析
3)搜索引擎的爬虫依赖于html标记确定上下文和各关键字的权重,利于SEO -
cookies,sessionStorage 和 localStorage 的区别
cookies:
为了标识用户身份而存储在本地终端上的数据,在同源的http请求中携带,会在浏览器和服务器端间传递,cookie过期之前一直有效
localStorage
本地持久性存储,浏览器关闭后数据不会丢失不会被删除
sessionStorage
本地会话存储,当前页面关闭数据也会随之自动删除 -
iframe内嵌框架
-
Label
label标签:当用户选择该标签时,浏览器会自动将焦点转移到标签相关的控件上 -
SEO
-
css盒子模型
W3C模型:width=content
IE模型:width=content+padding+margin
box-sizing: content-box(标准盒子) border-box(IE盒子) inherit;
-
link和@import的区别
link
属于xhtml标签,加载css,定义ref连接,和页面同时加载
@import
只能加载css,引用的css等到页面加载完再加载 -
清除浮动
block元素没有设置height,其高度会被子元素撑开,子元素使用浮动脱离标准文档流,则父元素的高度会被忽略,若不清除浮动父元素出现高度不够问题
1)父级div定义height
2)结尾处加空div clear:both
3)父级div定义overflow:hidden
,display:table
,:after 和zoom
4)父级一起浮动 -
水平居中
1)inline元素text-align:center
2)block元素margin:0px auto
设置top-margin
3)display:inline-block text-align:center
4)flex布局display:flex ;justify-content:center
-
垂直居中
1)单行inlineline-height父元素一样高
2)多行inlinedisplay: table-cell ;vertical-align:middle
3)已知高度margin-top:自身高度的一半
-
水平垂直居中
1)已知高度和宽度
.item{
position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}
.item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */
margin-left: -75px;
}
2)未知高度和宽度
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用 css3 的 transform 来实现 */
}
3)flex布局display: flex; justify-content: center;align-items: center; height:px
- position、float、display
position
:static、absolute、relative、fixed、inherit、sticky
relative:div属于正常的文档流,相对于html页面正常位置偏移,依然保留原本空间
absolute:脱离正常的文档流,不占据空间,相对于最近的父元素定位
float
:left、right 脱离普通文档流,直至它的边缘
display
:inline、block、inline-block、none、table相关、inherit
display:none
不占据文档空间
visiability:hidden
:占据文档空间
css定位机制:普通流、浮动、绝对定位
- css动画效果属性
animation-name:规定需要绑定到选择器的 keyframe 名称。。
animation-duration:规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay:规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。
animation-direction:规定是否应该轮流反向播放动画。
- css引入方式
1)内部样式<style> </style>
2)外部引入<link rel=" my.css ">
和@import
<style type="text/css">
@import url(my.css);
</style>
3)行内样式
-
css选择器优先级
!important > [# id > .class > tag ]
tag
:div ,h1, p
属性选择器:(a[rel = "external"])
伪类选择器:(a: hover, li: nth - child)
-
css3新特性
1)css3实现圆角border-redius
2)阴影box-shadow
3)文字加特效text-shadow
4)渐变gradient
5)旋转、缩放、定位、倾斜 -
flex布局
设为 Flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效
flex布局 -
BFC
块级格式化上下文:独立容器,决定内部Block Box 元素如何定位,以及与其他元素的关系 -
padding 和 margin
margin:外边距,border外侧;空白处不需要背景色时元素与元素之间
padding:内边距,border内侧,空白处需要背景色时元素与内容之间
-
响应式设计
响应式设计:一个网站可以兼容多个终端
原理:通过媒体查询检测不同的设备屏幕尺寸做处理
html页面头部meta声明viewport
<meta name="viewport" content="” width="device-width" initial-scale="1" maximum-scale="1" user-scalable="no"/>
-
伪元素::bofore :bofore ::after :after 区别
1)单冒号:是css3伪类;双冒号::是css3伪元素
2)::before 不存在dom之中,只存在html页面 -
CSS Sprites
1)将一个页面涉及到的所有图片都包含到一张大图中去,然后利用 CSS 的 background-image,background-repeat,background-position 的组合进行背景定位
2)利用 CSS Sprites 能很好地减少网页的 http 请求,从而大大的提高页面的性能; CSS Sprites 能减少图片的字节。
- rem 、em、px
rem
相对于html根目录下的字体大小
em
相对于父级元素的字体大小
px
像素,屏幕分辨率