今日复习记录-面试基础题（重复最多的人就是天才）

一、CSS3

苟日新，又日新，日日新

• 浮动会对父元素带来什么影响？如何解决这个问题
• 子元素一旦浮动，父元素的高度为0，在父元素最后一个子元素位置处添加一个空的块级元素，并设置其clear属性值为both;

.clear:after{
	display:block;
	content:"";
	clear:both;
}

• 哪些元素默认有边距
• body、p、h1~h6、ul、ol、dl、pre
• 网页中如何定义锚点？如何连接到锚点位置？
• a标记用name定义锚点，其他标记用id属性定义锚点。
• 链接到锚点的位置：href：“#锚点名称”
• 框模型默认的计算方式是什么？要改变默认的计算方式用哪个属性及值
• 1 实际宽度=左右外边距+左右边框+左右内边距+width
• 2 实际占地宽度=上下外边距+上下边框+上下内边框+height
• 3 改变计算方式 box-size：border-box
• 实现时针转动的效果需要用到CSS中哪些关键技术？
• 旋转 动画 绝对定位
• 设置行内元素居中对齐用什么属性
• text-align:center;
• 如果要将表单中控件的值提交给服务器必须为控件设置什么属性
• name和value属性
• transition 和 animation 的区别
• Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是 transition 需要触发一个事件才能改变属性
• 而animation 不需要触发任何事情的情况下也会随时间改变属性值，并且 transition 为2 帧
• 从from…to，而animation可以一帧一帧的，也可以理解为一个 animation 是由多个 transition组成
• 如何实现水平垂直居中

1. 定位+外边距，盒子宽高已知；

{
	position：absolute；
	left:50%;
	top:50%;
	margin-left:-自身一半的宽度；
	margin-top：-自身一半的高度;
}

2. 定位+transform，盒子宽高已知

#container{
	position:relative;
	border:1px solid aqua;
	width:800px;
	height:600px;
}

#center{
	width:100px;
	height:100px;
	background:blue;
	position:absolute;
	top:50%;
	left:50;
	tansform:tansalte(-50%,-50%);
}

3. flex布局
   父级：
   display:flex;
   align-items:center;
   justify-content:center;

盒子模型你是怎么理解

• 元素框处理元素内容，内边距外边距以及边框的计算方式
• 盒子模型有两种，W3C，IE盒子模型
• w3c的盒子模型 width：content，不包括margin，padding，border
• IE 盒模型 width=content+padding+border
• box-sizng

•  	border-box在已设定的宽度和高度之内设定 padding 和border
  

•  	content-box在已设定的高度和宽度之外设置 padding和border
  

不容易啊 终于敲完了 ，各位看官感觉有哪些地方错误可以直言道出 请指导 感谢