今天没有学习其他的,还是决定刷一些面试题看看
1. CSS 盒子模型，绝对定位和相对定位
盒子模型:一个元素是有content(内容),padding(内补白),border(边框),margin(外补白)四部分组成,而这四个部分就组成了css中的盒模型
绝对定位:position:absolute 固定定位:position:fixed
2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
当脱离文档流时,造成高度塌陷
方法:clear:both overflow:hidden || auto
3. 如何保持浮层水平垂直居中
(1). 利用定位和transform
.children{
position:absolute;
left:50%;
top:50%;
transform:translate(-50% -50%);
}
(2). 利用flexbox
.parent{
display:flex;
justify-content:center;
align-items:center;
}
(3). 利用定位与margin: auto;
.child{
200px;
height:200px;
positon:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto
}
(4)使用visitical-align:center
.parent{
display:table-cell; //只有将父级转化为table-cell,才能使用visitical
visitical-align:center
}
4.position 和 display 的取值
position:static || relative || absolute || fixed || inherit
display:none || inline || inline-block || block || inherit
5. css3动画效果属性，canvas、svg的区别，CSS3中新增伪类举例
动画效果:transation 平衡过渡
transform :translate, rotate,scale,skew
新增伪类:p:first-of-type p:last-of-type p:nth-child(n) p:last-child :not(p)
6.px和em和rem的区别，CSS中link 和@import的区别是?
px指的是绝对尺寸,缺点是不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站
em指的是其相对于当前对象内文本的font-size
rem也表示相对尺寸，其参考对象为根元素<html>的font-size
link:属于html标签;页面被加载时,link也同时会被加载;由于属于HTML标签,无兼容性;link的权重高于@import的权重
@import:属于css的;只有当页面加载完,才能加载@import;在IE5之上才能识别;
7.flex布局(红色字体为常用的) display:flex || inline-flex
flex-wrap: nowrap | wrap | wrap-reverse; 用于控制是否可以换行
justify-content:flex-start | flex-end | center | space-between |space-around 主轴方向的对齐方式
align-items: flex-start | flex-end | center |baseline | stretch; 侧轴方向的对齐方式
align-content: flex-start | flex-end | center | spance-between | space-around |stretch; 只有在主轴方向上有多个轴线时才有效
flex-direction: row | row-reverse | column | column-reverse; 主轴的排序方式
flex-flow:flex-direction , flex-wrap 是flex-direction和 flex-wrap 缩写方式
8.gird布局(二维布局系统，可以把页面分割成不同的网格块，并且可以定义它们的大小) display:grid || inline-grid