css面经集合（持续更新）

display

• block 转换成块状元素。
• inline 转换成行内元素。
• none 设置元素不可见。
• inline-block像行内元素一样显示，但其内容像块类型元素一样显示。
• list-item 像块类型元素一样显示，并添加样式列表标记。
• table 此元素会作为块级表格来显示
• inherit 规定应该从父元素继承 display 属性的值

定位

1. 普通流 (normal flow)
   元素按照其在 HTML 中的先后位置至上而下布局，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个行。
2. 浮动 (float)
   按照普通流定位，然后根据浮动方向偏左偏右。
3. 绝对定位 (absolute positioning)
   在绝对定位布局中，元素会整体脱离普通流。

BFC

Block Formatting Contexts (块级格式化上下文)————普通流

概念

可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

触发BFC

1. float：none以外的属性值。如：left 、 right
2. overflow：visible以外的属性值。如：hidden、auto 、 scroll
3. position属性值为：absolute、fixed（只有这两个可以）
4. dispaly属性值为：inline-block、 flex、 inline-flex、 table-cell、 table-caption 反正block不行就是了

BFC应用

1. 外边距重叠问题（可用BFC解决）
2. 可以包含浮动的元素（清除浮动）
3. 可以阻止元素被浮动元素覆盖（文本不会被浮动元素覆盖，可用作双列自适应布局）

IFC

概念

Inline Formatting Contexts（内联格式化上下文）

触发IFC

块容器盒里只有行内元素时自动生成IFC。

IFC应用

IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
水平居中：display:inline-block; text-align:center;
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其行内元素则可以在此父元素下垂直居中。

GFC

GridLayout Formatting Contexts（网格布局格式化上下文）
display:grid;

FFC

Flex Formatting Contexts（自适应格式化上下文）
display:flex（块级元素）或inlinde-flex（行内元素）;

div水平居中

position: absolute;
transform: translate(-50%, -50%);

2. margin值为当前div宽度一半的负值

div{
    width:600px;
    height: 600px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-300px;
}

3. 绝对定位法

div{
   width: 600px;
   height: 600px;
   background: red;
   position:absolute;
   left:0;
   top: 0;
   bottom: 0;
   right: 0;
   margin: auto;
}

4. flex

.box{
   height:800px;
   display:flex;
   align-items:center;
   justify-content:center;
   border:1px solid #ccc;
}
div.child{
   width:600px;
   height:600px;
   background-color:red;
}

4. table-cell

.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid #666;
}

5. 绝对定位：calc() 函数动态计算实现水平垂直居中

div{
    position: absolute;
    width: 200px;
    height: 50px;
    left:-webkit-calc((100vw - 200px)/2);	//google,safari
    top:-webkit-calc((100vh - 50px)/2);
    left:-moz-calc((100vw - 200px)/2);	//firefox
    top:-moz-calc((100vh - 50px)/2);
    left:calc((100vw - 200px)/2);
    top:calc((100vh - 50px)/2);
    background-color: red;
}

元素隐藏Opacity、Visibility、display

1. diisplay:none;
   Dom结构不渲染；无法进行事件监听；改变属性值会重排；不支持transition
2. visibility:hidden;
   元素隐藏，Dom渲染；无法进行事件监听；改变属性值会重绘；transition（visibility 会立即显示，隐藏时会延时）
3. opacity:0;
   透明度100%，元素隐藏，Dom渲染；可以进行事件监听；不会重绘；transition（opacity 可以延时显示和隐藏）

覆盖元素宽度

优先级：!important > style > id > class、属性、伪类 > 元素、伪元素
style —> style = " ";
id —> #id;
属性 —> [type = “submit”];
伪类 —> : hover;
元素、伪元素 —> p , : after ;

css：<img src="1.jpg" style="width:480px!important"/>
js ：document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")

清除浮动

https://blog.csdn.net/h_qingyi/article/details/81269667

1. 结尾处加空 div 标签 clear:both

.clear{
     clear:both;
 }
<div class="fahter clearfix">
	<div class="big">big</div>
    <div class="small">small</div>
    <div class="clear">额外标签法</div>
</div>

2. 父级 div 定义 overflow:hidden

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

3. 父级 div 定义伪类 :after 和 zoom

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

css新特性

一、先从css3的新选择器开始作答：

E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式

E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素

E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应

E：frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素

E：empty 选择没有子元素的每个E元素

E:target 选择当前活动的E元素

::selection 选择被用户选取的元素部分

属性选择器

E[abc*=“def”] 选择adc属性值中包含子串"def"的所有元素

二、文本

text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色

text-overflow:规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)

div{
	width:100px;
	border:1px soild #000000;
	overflow:hidden;
	text-space:nowrap;
	overflow:ellipsis;
}

text-wrap:规定文本换行的规则

word-break 规定非中日韩文本的换行规则

word-wrap 对长的不可分割的单词进行分割并换行到下一行

white-space: 规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行

三、边框

border-raduis:50%边框的圆角

border-image 边框图片

.border-image {

border-image-source:url(images/border.png);

boder-image-slice:27;

border-image-width:10px;

border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角，只适应与四边  

}

四、背景

rgba

backgrounnd-size:cover/contain，其中background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片

五、渐变

linear-gradient

background-image:linear-gradient(90deg,yellow 20%,green 80%)

radial-gradient

background-iamge:radial-gradient(120px at center center,yellow,green)

六、多列布局

column-count

column-width

column-gap

column-rule

七、过渡

transition

transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔

transition-duration:2s; //过渡持续的时间

transition-timing-function:ease;

transition-delay:5s //过渡延迟5s进行

八、动画、旋转

animation

transform ：translate（x,y) rotate(deg) scale(x,y)

translate

scale

rotate

skew（倾斜）

九、flex布局

十、@media媒体查询 min-width:600px

如果需要手动写动画，你认为最短时间间隔是多久，为什么？（阿里）

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms

css预处理器

为css增加一些编程特性，无需考虑浏览器兼容问题。
可以在css中使用变量、简单逻辑顺序、函数等编程语言特性。
让css更简洁、适应性更强、可读性更佳、更易于代码维护。

stylus/sass/less区别

• 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
• Scss 和 LESS 语法较为严谨， LESS要求一定要使用大括号“{}”， Scss 和 Stylus 可以通过缩进表示层次与嵌套关系
• Scss 无全局变量的概念， LESS 和Stylus 有类似于其它语言的作用域概念
• Sass 是基于 Ruby 语言的，而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进行编译；