html5

h5新特性

web语义化
表单方面
- 增强表单，为input增加了color,email,data ,range等特性
- 新的表单控件
  - calander
  - date
  - time
  - email
  - uh
  - search
多媒体方面
- 音频 audio
- 视频 vedio
地理定位，canvas画布，拖放，多线程编程的web worker以及websoket协议

css

css选择器优先级

后面的会覆盖前面的

盒模型

BFC

块级格式上下文

link 与 @import 的区别

link 是 HTML 方式， @import 是 CSS 方式
link 最大限度支持并行下载，@import 过多嵌套导致串行下载，出现 FOUC
link 可以通过 rel="alternate stylesheet" 指定候选样式
浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式
@import 必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于@import

position 有哪些值？ relative 和 absolute 定位原点是？

absolute 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。
fixed （老 IE 不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。
inherit 规定从父元素继承 position 属性的值

动画

transform 转换
- translate(x 坐标，y 坐标) 平移到这个元素
- rotate()
- scale(2,4) 横坐标两背，纵坐标4倍
- skew()
- matrix()
transition 过渡
animate 动画
重要：transform配合animate或者transition使用https://blog.csdn.net/Ghost_Face/article/details/104441768
transition是一种特殊的animatehttps://blog.csdn.net/namechenfl/article/details/81094885
transition和animate区别
- 动画不需要事件触发，过渡需要
- 过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个

flex

blog.csdn.net/LzzMandy/ar…

flex-direction 弹性子元素在父容器中的位置
- row 横向从左到右排列（左对齐）
- row-reverse
- column
- column-reverse
flex-wrap 指定弹性盒子的子元素换行方式
- nowrap|
- wrap|
- wrap-reverse|
- initial|
- inherit
justify-content 把弹性项沿着弹性容器的主轴线（main axis）对齐
- flex-start |
- flex-end |
- center |(水平居中)
- space-between |
- space-around
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
- flex-start |
- flex-end |
- center |（垂直居中）
- baseline |
- stretch
align-content 用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。定义多根轴线的对齐方式
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
flex 属性用于指定弹性子元素如何分配空间。
- order
flex-flow flex-direction 和 flex-wrap 的简写

垂直居中

已知宽度和高度

字相父绝

子
top:0,right:0;bottom:0;left:0;margin:auto

定位

left:50%
top:50%
margin-left:元素宽度的一半(负的)
margin-top:元素高度的一半(负的)

未知高度和宽度

定位

left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%)

flex

justify-content:center;
align-items:center;

响应式布局

媒介查询

link

<link rel="stylesheet" href="" media  =" screen and (条件1) and (条件2)">

style

<style  media="screen and (条件1） and (条件2)" ></style>

css方式(常用)

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

百分比布局
rem布局
- rem 相对于根元素
- em
  - 字体相对于父元素
  - width，height,padding,margin 相对于该元素的font-size
视口单位
图片响应式
结合flex

三栏布局

定位

 * {
        margin: 0;
        padding: 0;
      }
      aside {
        position: absolute;
        width: 300px;
        min-height: 100px;
      }
      aside.left {
        left: 0;
        background-color: red;
      }
      aside.right {
        right: 0;
        background-color: blue;
      }
      main.center {
        position: absolute;
        left: 300px;(左右宽度)
        right: 300px;
        background-color: orange;
      }

<body>
    <aside class="left"></aside>
    <aside class="right"></aside>
    <main class="center">
      <h1>绝对定位解决方案</h1>
      <p>左右区域分别postion：absolute，固定到左右两边</p>
      <p>中间区域postion：absolute；left：300px; right: 300px</p>
      <p>给总的宽度加一个min-width，不然缩小窗口会有毛病</p>
    </main>
  </body>

浮动

* {
        padding: 0;
        margin: 0;
      }
      .left,
      .right,
      .center {
        min-height: 100px;
      }
      .left {
        background-color: red;
        width: 200px;
        float: left;
      }
      .right {
        background-color: blue;
        width: 200px;
        float: right;
      }
      .center {
        background-color: orange;
        width: 100%;
      }

flex

* {
        margin: 0;
        padding: 0;
      }
      .left,
      .right,
      .center {
        min-height: 100px;
      }
      .wrapper {
        display: flex;
      }
      .left{
        background-color: red;
        width: 300px;
      }
      .center {
        background-color: orange;
        flex: 1;
      }
      .right {
        background-color: blue;
        width: 300px;
      }

圣杯布局

/*基本样式*/
      .left, .right, .main {
        min-height: 300px;
      }
      .left {
        width: 200px;
        background-color:thistle;
      }
      .main {
        background-color: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 圣杯布局关键代码 */
      .left, .main, .right {
        float: left;
        position: relative;
      }
      .main {
        width: 100%;
      }
      .container {
        padding-left: 200px;
        padding-right: 300px;
      }
      .left {
        margin-left: -100%;
        left: -200px;
      }
      .right {
        margin-left: -300px;
        right: -300px;
      }

双飞翼布局

      .left,
      .right,
      .main {
        min-height: 200px;
      }
      .left {
        width: 200px;
        background-color: thistle;
      }
      .main {
        background: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 双飞翼布局重点 */
      .left,
      .main,
      .right {
        float: left;
      }
      .main {
        width: 100%;
      }
      .main-inner {
        margin-left: 200px;
        margin-right: 300px;
      }
      .left {
        margin-left: -100%;
      }
      .right {
        margin-left: -300px;
      }

css常见面试题

html5

h5新特性

css

css选择器优先级

盒模型

BFC

link 与 @import 的区别

position 有哪些值？ relative 和 absolute 定位原点是？

动画

flex

垂直居中

已知宽度和高度

未知高度和宽度

响应式布局

三栏布局

定位

浮动

flex

圣杯布局

双飞翼布局