前端面试题----css篇

说一下css盒模型

有俩种盒子模型：常用的标准盒子模型，少用的IE盒子模型
标准盒子模型的包含了content（width ,height）,padding,margin,border
在这里插入图片描述

IE盒子模型，content {width(padding,border);height;}margin。在ie盒子模型中的width包含了他的padding和boredr。
在这里插入图片描述
在css3中引入了box-sizing属性，值为conent-box的时候是标准模型。值为border-box是ie盒子模型

画一条0.5px的线

第一种使用屏幕缩放

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这中方式之在移动端生效，viewport之咋移动端生效，其原理就是让屏幕缩小一半  1px就变成了0.5px

第二种方法：
使用css的缩放功能：

transform: scale(0.5,0.5);

link标签和import标签的区别

加载资源问题
link不仅可以加载css还可以定义rss和rel连接属性。@import的只能加载css
兼容问题
link是html标签无兼容问题。@import2.1提出的IE5一下的无法兼容
加载顺序问题
link在页面时一起加载，@import会在页面加载完成以后在家
js控制问题
link引入的样式可以使用js去修改，@import的不行

transition和animation的区别

相同点都可以随着时间的变化去变化属性值，
区别在于transition需要主动的出发属性的变化以后再回有类似动画一样的效果。（过渡）在帧数方面只有俩帧form to
animation 被称为动画，不需要主动出发也可以变化属性值帧数可以一帧一帧变化

Flex布局

flex是Flexible Box 意为弹性布局。webkit的浏览器需要加上前缀 -webkit

.box{
    
    
  display: -webkit-flex; /* Safari */
  display: flex;
}

布局属性：
flex-direction: 决定了主轴的排列方向
flex-wrap:决定了换行的方向，或是否换行
flex-flow：是上面俩个的简写 flex-direction || flex-wrap 默认 row nowrap
justify-content: 决定了在主轴的排列方式（居中，左对齐右对齐，俩边对齐，居中分散对齐）
align-items: 属性定义项目在交叉轴上如何对齐。（上对齐，下对齐，居中，上下拉伸对齐，取水平线对齐）
align-content: 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（上对齐，下对齐，居中，上下拉伸对齐，取水平线对齐）

flex布局教程

BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）

触发条件：
根元素：html
float属性不为none，
overfloat不为visible，
display不为table-cell、table-caption 和inlink-block
position；不为 resolve和fixed

BFC就是一块独立区域，隔离的容器，子元素不会印象到外面元素。
1.可以阻止元素被浮动袁术给覆盖
2.可以包含浮动元素
3.属于同一个BFC的元素

的margin会重叠，给子元素设置不同的BFC可以结局问题

垂直居中的方法

margin：auto

<style>
	.div{
      
      
		position:absolute;
		width:100px;
		height:100px;
		top:0;
		left:0;
		right:0;
		bottom:0
		margin:auto
	}
</style>
<div class="div"></div>

margin负值

<style>
	.div{
      
      
		width:100px;
		height:100px;
		position:absolute;
		top:50%;
		left:50%;
		margin-left:-50px;
		margin-top:-50px;
	}
</style>
<div class="div"></div>

多行元素的文本省略号

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

浮动清除

1.增加新空标签设置属性clear:both
在浮动元素的后面加上

	<style>
		.clear{
      
      
			clear:both
		}
	</style>
	<div class="clear"></div>

缺点会增加无意义标签
2.使用overflow
给浮动元素的父元素添加不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果
3.给父元素设置高度
撑起父元素
4.给父元素设置伪类元素:after

.div:afert{
    
    
	content:'';
	height:0;
	line-height:0;
	display:block;
	visibility:hidden;
	clear:both
}

给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

calc属性

是css的计算属性；任何长度值都可以计算，需要注意的是运算符前后要有空格

	.div{
    
    
		width: calc(100% - 10px);
	}

css选择器的优先级

!import的优先级最高
行内样式 style
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或者继承
对应的权值
style样式为 1000
id为100
类选择为 10
标签选择为1