大钱端之面试（上）

HTML && CSS面试题

如何理解html语义化

<h1>title</h1>
  <div>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>

这就是语义化，别问！

人看的懂，爬虫容易爬

默认情况下，块级元素内联元素有哪儿些html元素

常用的块级元素：

　address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ul , li

常用内联的元素：

　　a , b , br , em , font , img , input , label , select , small , span , textarea

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

　　button

CSS布局

盒子模型宽度如何计算

<style>
  #div1 {
     100px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
  }
</style>

<body>
  <div id='div'></div>
</body>

Q: offset Width是多少？

Offset Width = ( 内容边距 + 外边距 + 边框)，无外边框
因此答案为122

Q: 如果想让offset Width为100，如何实现
 100px;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-sizing:boder-box;

margin纵向重叠的问题

<style>
  p {
    font-size: 16px;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 15px;
  }
</style>

<body>
  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>
</body>

Q: AAA与BBB之间的距离是多少
相邻元素的margin-top与margin-buttom会发生重叠
空白内容的P标签会被重叠【忽略】
所以答案是15px

margin负值的问题

Q: margin 中的 top right bottom left 设置负值有何效果
margin-top margin-left 为负值，会向上向左移动
margin-bottom margin-right 为负值，相邻元素受影响,自身不受影响

BFC的理解和应用

什么是BFC ? 如何应用它
Block format context 块级格式化上下文
一个独立的渲染区域，内部元素的渲染不会影响到外部元素

形成BFC的条件

* float不是none
* postion是absolute 或 fixd
* overflow 不是 visable
* display 是inline-block等

BFC的应用

* 清除浮动

 .bfc {
 	overflow:hidden
 }

float布局的问题，以及clearfix

如何实现圣杯布局和双飞翼布局

圣杯布局和双飞翼布局目的:
	三栏布局，优先加载和渲染中间布局
	两侧内容固定，中间内容随宽度自适应
技术层面:
	都是用float布局
	两侧使用margin负值，与中间内容横向重叠
	防止中间内容被覆盖，用 margin 或者 padding

body {
    min- 550px;
}
#header {
    text-align: center;
    background-color: #f1f1f1;
}

#container {
    padding-left: 200px;
    padding-right: 150px;
}
#container .column {
    float: left;
}

#center {
    background-color: #ccc;
     100%;
}
#left {
    position: relative;
    background-color: yellow;
     200px;
    margin-left: -100%;
    right: 200px;
}
#right {
    background-color: red;
     150px;
    margin-right: -150px;
}

#footer {
    text-align: center;
    background-color: #f1f1f1;
}

/* 手写 clearfix */
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

双飞翼布局：

body {
    min- 550px;
}
.col {
    float: left;
}

#main {
     100%;
    height: 200px;
    background-color: #ccc;
}
#main-wrap {
    margin: 0 190px 0 190px;
}

#left {
     190px;
    height: 200px;
    background-color: #0000FF;
    margin-left: -100%;
}
#right {
     190px;
    height: 200px;
    background-color: #FF0000;
    margin-left: -190px;
}

手写clearfix

.clearfix:after {
	content:''
	display:table
	clear:both
}

flex画色子

flex实现一个三色的骰子

常用语法回顾:

flex-direction 规定灵活项目的方向

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

justify-content 主轴（横轴）方向上的对齐方式

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

align-items 交叉轴对齐方式

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

flex-warp 换行

 flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-self 子元素在交叉轴的对齐方式

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

骰子的画法:

 .box{
  display: flex;
  justify-content: space-between; //两端对齐
 }
 
 .item{
 	.... /高宽边框背景色样式/ 
 }
 
 .item.nth-child(2){
 	align-self : center  // 居中对齐
 }
 
  .item.nth-child(3){
 	align-self : flex-end //底部对齐
 }


<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>

CSS定位

absolute 和 relative 分别依靠什么来定位

relative : 依据自身定位
absolute : 依据最近一层定位元素定位 [relative  fix  body]

居中对齐有哪儿些实现方式

水平居中

inline元素 >  text-align:center
block元素  >  margin:auto
absolute元素 > left:50%  + margin-left负值

垂直居中

inline元素 >  line-height值等于height值
absolute元素 > top:50%  + margin-top负值
absolute元素 > transform:translate(-50%,-50%)
absolute元素 > top.right.bottom.left 都设为0 + margin:auto

line-height的继承问题 <百分比的坑>

line-height:50px  继承50px
line-height:1.5   继承高度x1.5
line-height:200%  继承父元素高度算出来的line-height px  
	假如父元素20px  则继承的line-height为40px

CSS响应式

rem是什么？ em px对比

rem 是个相对长度单位 （相对根元素）,所以常用于响应式布局
px  绝对长度单位
em  相对长度单位（相对父元素）

如何实现响应式（通过rem）

media-query 查询屏幕宽度来设置根元素的 font-size
rem 基于根元素的相对单位

基于iphone 67x 为基准的响应式

@media only screen and (max- 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
    html {
        font-size: 86px;
    }
}
@media only screen and (min- 375px) and (max- 413px) {
    /* iphone6/7/8 和 iphone x */
    html {
        font-size: 100px;
    }
}
@media only screen and (min- 414px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 110px;
    }
}

关于 vw vh

windows.screen.height 屏幕高度

windows.inner.height 网页视口高度

windows.body.clientHeight body高度

vh : 网页视口高度的 1/100
vw : 网页视口宽度的 1/100
vmax : 取vh与vw的最大值
vmin : 取vh与vw的最小值

CSSCSS3

关于CSS3动画

暂时先不搞~ 不会！查文档~

CSS面试总结

块状元素：独占一行！

display:block/table  |  div h1 h2 table ul op p 等

内联元素：我们挤挤，直到右边边距

display:inline/inline-block | span img input button 等

盒子模型宽度如何计算

OffsetWidth = ( 内容边距 + 外边距 + 边框)，无外边框
box-sizing = border-box  宽度等于offset宽度 宽度等于border-box

相邻元素的margin-top与margin-buttom会发生重叠
空白内容的P标签会被重叠【被忽略】

margin负值的问题

margin-top margin-left 为负值，会向上向左移动
margin-bottom margin-right 为负值，相邻元素受影响,自身不受影响

形成BFC

float不是none
postion是absolute 或 fixd
overflow 不是 visable
display 是inline-block等

圣杯双飞翼布局

两侧使用margin负值，与中间内容横向重叠
防止中间内容被覆盖，圣杯布局用margin实现双飞翼布局用padding实现

手写 clearfix

.clearfix:after {
	content:''
	display:table
	clear:both
}