刷题- css html

• 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动画效果属性

• 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 属性将失效
  

• 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像素，屏幕分辨率