前端Css面试题

序：复习面试题ing

Css:

1. 盒子模型
   Css的盒子模型分为 W3C盒子模型 和 IE盒子模型（怪异盒子模型）

   共同点：
   盒子模型都是由四个部分组成的 即：
   margin（外边距）
   border(边框)
   padding(内边距)
   content(主体内容)

   不同：
   在W3C盒子模型中设置属性width和height时作用的主体是content，即其它三分部分不受width和height影响，需用另外的属性进行设置；
   而在IE盒模型中，width和height属性会影响border和padding值，造成元素宽高与设置值不一致的问题；

   相关属性：box-sizing
   box-sizing用于控制盒子类型，通常用于兼容方面
   设置为W3C盒子模型:
   box-sizing:content-box(默认值)
   设置为IE盒子模型:
   box-sizing:boxder-box

   默认：
   如果页面声明了文档类型为DOCTYPE类型，则所有浏览器都会默认文档中的盒子模型为W3C盒子模型；

2. BFC
   BFC是一种块级格式化上下文，与之相对的还有IBF
   BFC规定了容器中元素的默认定位方案，即BFC容器中的元素默认从上至下垂直排列
   特殊规则：
   具有BFC的容器，其内部元素布局不会影响外部容器或元素的定位，即：脱离文档流
   元素特性：
   1.在BFC中元素上下之间的外边距会发生折叠现象(通过触发其中一个元素的bfc即可解决此问题)
   2.BFC容器计算高度时会将浮动元素的高度也加入其中
   3.在与float元素同级时BFC容器并不会被flaot元素覆盖
   应用场景:
   1.作为清除浮动的一种解决方法
   2.阻止元素被flaot元素覆盖，因此可用于两列自适应布局
   引发BFC的方法
   1.float的值不为none
   2.overflow的值不为visible
   3.display的值为table-cell、tabble-caption和inline-block之一
   4.position的值不为static或releative中的任何一个

3. 水平垂直居中
   对容器或者元素进行水平垂直居中是开发中经常需要使用的，但针对不同设计需求给与不同的垂直水平居中不仅方便动画的给与也便于适配其它设备的需求。

 		//1、已知父元素宽高
 			/*position + margin-top +margin-left*/
 				//父元素设置：
 				position:relative;
 				//子元素设置：
 				positon:absolue;
 				margin-top:本身元素的一半高度;
 				margin-left:本身元素的一般宽度;
 			/*position + margin:auto*/
 				//父元素设置：
 				position:relative;
 				//子元素设置：
 				position:absolute;
 				top:0;
 				left:0;
 				bottom:0;
 				margin:auto;
 		//2、父元素宽高未知
 			/*position+transform*/
 				//子元素设置：
 				position:relative;
 				left:50%;
 				top:50%;
 				transform:translate(-50%,-50%);
 			/*flex*/
 				//父元素
 				display:flex;
 				juctify-content:center;
 				align-items:center;

1. 清除浮动
   问：为什么要清除浮动？
   答：float元素不会影响到同级下块级容器布局（脱离文档流），只会影响到内联元素布局（多为文字）导致文字与元素不同步而布局混乱；同时父级容器不会将floa元素计入自身高度从而导致发生高度塌陷问题;
   问：怎么做到清除浮动？
   答：清除浮动主要是清除掉浮动元素带来的影响
   主要方法有两种
   1、clear属性 【kIir】
   clear属性规定了元素盒子的边不能与float元素相邻，即两者之间不会有任何的交集
   从而避免了浮动元素对元素的影响；
   用法：
   01、在浮动元素相邻的块级元素中加入
   clear:after
   02、赋予伪类(常用)
   因为clear只对块级元素生效，所以在对伪类使用clear属性时需要先通过dispaly属性将其转化为块级元素,具体设置
   ::after{
   conter:’’;
   display:table;(block,list-item皆可);
   clear:both
   }
   2、BFC(不太擅长使用此方法)
   根据BFC特性
   1、BFC容器计算高度时容器中的float元素也会被计算
   2、BFC中元素不影响外部元素
   用法：将父级元素声明为BFC元素
   displat:flex;(参考BFC部分)
   3、IE特用(希望你不会用上这个东西)
   Zoom:1
   触发haslayout

2. position属性
   position有五个属性
   absolute:生成绝对定位元素，相对与值不为static的最近父元素，当父元素的值为relative或absolute时以其左上角为原定进行定位；
   fixed：生成绝对定位，相对于整个浏览器窗口的左上角定位；
   relative：相对定位，相对于其元素本身所在的正常位置定位
   static：默认定位，按父元素块级上下文格式定位
   inherit：继承父元素的position值

3. css隐藏页面元素的方式
   opacity：更改透明度，元素本身仍存在于文档流中且会发生响应交互
   visibility：hidden
   ：将元素隐藏但保留其在文档流中的位置，但不会触发交互。如果要显示其中的子元素则为其子元素设置visibility:vislble(样式覆盖)
   display:none;
   ：不生成任何页面元素，也不包含在任何文档流中，但仍存在dom树中，可通过dom进行控制；

4. flex布局
   flex弹性布局
   1、任何容器都可以通过display:flex；设置为弹性布局
   块级flex：display:flex;行级：inline-flex;
   注意：在flex容器中,子元素的float、clear、vertical-align都会失效
   常用属性
   水平垂直居中
   display:flex;
   jusify-conter:center;
   align-items:center;
   布局
   flex：1
   排序：
   flex-warp
   flex-dlrection：colum、row