大钱端之面试（上）
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的最小值
CSS****CSS3
关于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
}