1.什么是盒模型?
盒模型主要分为w3c盒模型和IE盒模型,盒模型主要包括content,padding,border,margin。其中w3c盒模型的width=content,IE盒模型的width=content+padding+border。
2.flex
flex为弹性布局,webkit内核的浏览器必须要加上-webkit前缀,flex容器的属性有六种:
flex-direction:决定主轴的方向,默认重左到右
flex-wrap:决定子元素是否换行,默认不换行
flex-flow:flex-direction和flex-wrap的简写
justify-content:定义项目在主轴的对其方式
align-items:定义项目在交叉轴(副轴)上如何对齐
align-content:定义项目多轴的对齐方式
如何通过flex实现水平垂直居中?
.parent{
display:flex;
justify-content:center;
align-items:center;
}
3.css的单位
px:绝对单位,为css像素
em:相对单位,以父节点字体大小为基准,如果自身设置了font-size,以自身的来计算。
rem:相对单位,以根节点的font-size为基准。
vw:视窗宽度,1vw=1%视窗宽度
vh:视窗高度,1vh=1%视窗高度
vmin:vw和vh中较小的那个
vmax:vw和vh中较大的那个
%:百分比
4.css选择器
ID选择器,类选择器,标签选择器,通用选择器,后代选择器,交集选择器(注:IE7才可以兼容),并集选择器,伪类选择器,子代选择器(注:IE7才可以兼容),序选择器(例:ul li:first-child)(注:IE8才开始兼容)
5.bfc清除浮动
.container{
overflow:auto;
}
.container::after{
content:"";
display:block;
clear:left;
}
6.层叠上下文
设置z-index
7.媒体查询
@media(max-width:300px){}//当文档宽度小于300px的时候匹配该样式,相应式布局就是根据媒体查询来做的
8.css3新特性2d和3d转换
2D/3d:transform:进行2d转化translate(平面移动),rotate(平面旋转),scale(放大缩小),skew(倾斜),matrix(前面动画的集合);
translate3d,rotate3d,scale3d
9.css3过渡与动画
过渡:transition:(使用时最好加webkit前缀)
div{
width:100px;
height:100px;
transition: width 3s;
-webkit-transition:width 3s;
}
div:hover{
width:300px;
}
动画:animation @keyframes
div{
animation: first 5s;
-webkit-animation: first 5s;
}
@keyframes first{
from{background:black;}
to{background:blue;}
}
@-webkit-keyframes first{
from{background:black;}
to{background:blue;}
}
10.display有哪些取值?
none,inline,block,inline-block,table,inline-table,list-item(li),flex
11.相邻的两个inline-block节点之间为什么会出现间隔如何解决?
1.使用margin负值 2.取消inline-block标签之间的空格
12.css实现宽度自适应100%,宽高为16:9的矩形
<style type="text/css">
*{
margin: 0;padding: 0
}
.box{
width: 100%;
}
.scale{
width: 100%;
padding-bottom: 56.25%;
position: relative;
}
.item{
width: 100%;
height: 100%;
position:absolute;
background-color: blue;
}
</style>
<body>
<div class="box">
<div class="scale">
<div class="item"></div>
</div>
</div>
</body>
13.画个三角形
div{
width:0;
height:0;
border-top:20px solid transparent;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid blue;
}