一些CSS中的必须熟知的技能～～
一、如何居中一个元素（终结版）
1、水平居中
1.1 行内元素水平居中
利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
我是行内元素
我是行内元素
.parent{
width: 500px;
height: 40px;
background: red;
text-align: center;
}
.child1{
display: inline-block;
}
.child2{
display: inline-table;
}
复制代码此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
<div class="parent">
<div class="child">Demodiv>
div>
<style>
.parent{
text-align:center;
}
.child {
display: inline-block;
}
style>
复制代码1.2 块元素水平居中
- ①将该块级元素左右外边距margin-left和margin-right设置为auto
.child{
width: 100px;//确保该块级元素定宽
margin:0 auto;
}
复制代码- ②使用table+margin 先将子元素设置为块级表格来显示（类似），再将其设置水平居中
display:table在表现上类似block元素，但是宽度为内容宽。
<div class="parent">
<div class="child">Demodiv>
div>
<style>
.child {
display: table;
margin: 0 auto;
}
style>
复制代码③使用absolute+transform
不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。
<div class="parent">
<div class="child">Demodiv>
div>
<style>
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}
.parent {
position:relative;
}
style>
复制代码- ④使用flex+justify-content
<div class="parent">
<div class="child">Demodiv>
div>
<style>
.parent {
display: flex;
justify-content:center;
}
style>
复制代码- ⑤使用flex+margin
<div class="parent">
<div class="child">Demodiv>
div>
<style>
.parent {
display: flex;
}
.child {
margin:0 auto;
}
style>
复制代码总结：让单个元素水平居中
1 margin: 0px auto;
2 text-align: center;
3 display: table; margin: 0px auto;
4 position: absolute; transform: translateX(-50%);
5 display: flex; justify-content: center;
6 display: felx; margin: 0px auto;
复制代码1.3 多块级元素水平居中
- ①利用flex布局
#container {
display: flex;
justify-content: center;
}
复制代码- ②利用inline-block
将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}
复制代码1.4 浮动元素水平居中
- ①定宽的非浮动元素
relative + 负margin
.child {
position:relative;
left:50%;
margin-left:-250px;
}
我是要居中的浮动元素
复制代码- ②不定宽的浮动元素
<div class="box">
<p>我是浮动的p>
div>
.box{
width: 300px;
background: red;
float: left; // 这里是清除浮动
}
p{
float:left;
position:relative;
left:50%;
transform: translateX(-50%);
}
复制代码- ③通用办法flex布局(不管是定宽还是不定宽)
<div class="parent">
<span class="chlid">我是要居中的浮动元素span>
div>
.parent {
width:500px;
background: red;
display:flex;
justify-content:center;
}
.chlid{
float: left;
width: 200px;//有无宽度不影响居中
}
复制代码1.5 绝对定位元素水平居中
- 1、margin:0px auto; left: 0px; right: 0px;
让绝对定位的元素水平居中对齐。
.parent{
width: 500px;
height: 100px;
background: yellow;
position:relative;
}
.child{
position: absolute; /*绝对定位*/
width: 200px;
height:100px;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略，且为0*/
right: 0;/*此处不能省略，且为0*/
}
复制代码- 2、万能的justify-content: center;
<div class="parent">
<div class="child">
让绝对定位的元素水平居中对齐。
div>
div>
.parent{
width: 500px;
height: 100px;
background: yellow;
position:relative;
display: flex;
justify-content: center;
}
.child{
position: absolute; /*绝对定位*/
width: 200px;
height:100px;
}
复制代码2、垂直居中
2.1 单行内联元素垂直居中
- line-height = height;
单行内联元素垂直居中。。
复制代码2.2 多行内联元素垂直居中
- ①利用flex布局（flex）
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
.parent {
width: 400px;
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
border: 2px dashed #f69c55;
}
复制代码- ②利用表布局（table）
利用表布局的vertical-align: middle可以实现子元素的垂直居中
.parent {
width: 400px;
height: 240px;
border: 2px dashed #f69c55;
display: table;
}
p{
display: table-cell;
vertical-align: middle;
}
复制代码2.3 块级元素垂直居中
- 使用absolute+负margin(已知高度宽度)
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
复制代码- 使用absolute+transform
未知高度的块级元素垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
复制代码- 使用flex+align-items
未知高度的块级元素垂直居中。
.parent {
display:flex;
align-items:center;
}
复制代码- 使用table-cell+vertical-align
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
.parent {
width: 400px;
height: 240px;
border: 2px dashed #f69c55;
display: table-cell;
vertical-align: middle;
}
复制代码通过将父元素转化为一个表格单元格显示（类似 和 ），再通过设置 vertical-align属性，使表格单元格内容垂直居中。
总结：垂直居中
1 line-height = height; 行内元素
2 flex 通通适用
3 position: absolute; 负margin-top
4 position: absolute; transform: translateY(-50%);
5 parent: display: table; child: display: table-cell;certical-align: center;
6 parent: display: table-cell; vertical-align: center;
复制代码3、水平垂直居中
- 方法1：绝对定位与负边距实现（已知高度宽度）
这种方式需要知道被垂直居中元素的高和宽，才能计算出margin值，兼容所有浏览器。
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
复制代码- 方法2：绝对定位与margin:auto（已知高度宽度）
这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器
#container {
position: relative;
height:100px;//必须有个高度
}
#center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;//注意此处的写法
}
复制代码- 方法3：绝对定位+CSS3(未知元素的高宽)
利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
复制代码- 方法4：flex布局
#container {//直接在父容器设置即可
height: 100vh;//必须有高度
display: flex;
justify-content: center;
align-items: center;
}
复制代码- 方法5：flex/grid与margin:auto(最简单写法)
.parent {
width: 400px;
height: 240px;
border: 2px dashed #f69c55;
display: grid;
}
.child{
margin: auto;
}
复制代码二、面试题集一
面试题——CSS新特性
1、增强了选择器，书写方式于jquery类似
2、增加了圆角、阴影、web字体、渐变等效果
3、增加了过渡和动画
4、增加了元素的2D和3D变换
5、两种全新的布局、多列布局和弹性布局
6、背景图设置做了一定的加强
复制代码面试题——CSS浏览器前缀
-moz- Firfox
-o- Opera
-ms- IE
-webkit- Chrome/Safari
因为CSS3出来的时候，并没有制定一套好的标准，各浏览器厂商都先一步遵循css3草案实现了相应的效果，只是需要加上自己的前缀，后来css3的标准出来后，各浏览器厂商也组件都在新版本的浏览器支持了。
复制代码面试题——什么是CSS预处理器？
css预处理器就是对css的一个增强，解决了css难以复用、代码冗余、可维护性低等缺点，对于css来说是雪中送碳，常见的css预处理器有less、sass、stylus。
复制代码面试题——语义化？
语义化就是为了解决易懂的问题，一个是让人易懂，一个是让机器易懂。
- 让人易懂
对于人来说，代码可读性、语义化就是一个非常广泛的概念了，无论在html、css、js中都有语义化。目的是为了让人阅读代码更为友好。
- 让机器易懂
HTML 符合XML标准，但是跟其又不完全一样，因为XML允许自定义标签，但是HTML不可以，W3C自己定义了许多的标签。例如p div h1 ul等 —— 就是为了语义化。其实，如果你精通 CSS 的话，你完全可以全部用
因为拿搜索引擎来说，爬虫下载到我们网页的 HTML 代码，它如何更好地去理解网页的内容呢？—— 就是根据 HTML 既定的标签。h1标签就代表是标题；p里面的就是段落详细内容，权重肯定没有标题高；ul里面就是列表；strong就是加粗的强调的内容 …… 如果我们不按照 HTML 语义化来写，全部都用
所以HTML语义化是很重要的。为了加强 HTML 语义化，HTML5 标准中又增加了header section article等标签。因此，书写 HTML 时，语义化是非常重要的，否则 W3C 也没必要辛辛苦苦制定出这些标准来。
面试题——预处理器的优缺点？
优点：
1、用变量的形式存储一些公用的信息，比如颜色、字体等
2、使用mixin函数可以复用某些效果
3、可以进行嵌套
4、导入规则可以让个部分代码保持独立
5、丰富的函数
缺点：
1、需要编译
2、学习成本
3、调试可能存在一定的困难
复制代码面试题——盒子模型
初学 CSS 的朋友，一开始学 CSS 基础知识的时候一定学过padding border和margin，即内边距、边框和外边距。它们三者就构成了一个“盒子”。就像我们收到的快递，本来买了一部小小的手机，收到的却是那么大一个盒子。因为手机白色的包装盒和手机机器之间有间隔层（内边距），手机白色盒子有厚度，虽然很薄（边框），盒子和快递箱子之间还有一层泡沫板（外边距）。这就是一个典型的盒子。
标准盒子模型(W3C盒子模型)
width指content部分的宽度
.content {
width: 300px;
height: 400px;
border: 5px solid #242424;
padding: 20px;
background-color: #898989;
}
复制代码IE盒子模型
width表示content+padding+border这三个部分的宽度
盒子模型的转换
如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box
复制代码盒子的显示类型
CSS3用display来指定盒子的类型，常见的有块级（block）、行内（inline）、行内块级（inline-block）、表格（table）、伸缩盒子（flexbox）。
HTML元素默认只有两种，block（块级元素）和inline（行内元素），行内元素不可定义css的width、height、margin（上下）、padding（上下）。
- [1] 行内元素
行内元素不可定义css的width、height、margin（上下）、padding（上下）。如果想要设置宽高等，则需要设置为inline-block;
- [2] 块级元素
外边距塌陷
块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷。通常有三种情况：
- 同级相邻元素
同级相邻元素之间的外边距会塌陷，塌陷后的间距等于两个元素外边距的较大值（如果后者被清除浮动，不遵循此规则），例如：
h1 {
margin: 0 0 25px 0;
background: #cfc;
}
p {
margin: 20px 0 0 0;
background: #cf9;
}
复制代码- 父子元素间的边距塌陷
Heading Content
Paragraph content
复制代码h1 {
margin: 0;
background: #cff;
}
div {
margin: 40px 0 25px 0;
background: #cfc;
}
p {
margin: 20px 0 0 0;
background: #cf9;
}
复制代码上例子是一个上外边距塌陷的例子：块级父元素和其第一个子元素就会发生上外边距塌陷的现象。除尺之外还有下外边距塌陷。
为了避免边距塌陷，只需要将父元素和子元素的外边距“分隔开”，例如为父元素添加一个边框： 解决办法：
h1 {
margin: 0;
background: #cff;
}
div {
margin: 40px 0 25px 0;
background: #cfc;
border-top: 1px solid #000;
}
p {
margin: 20px 0 0 0;
background: #cf9;
}
复制代码前端布局之外边距塌陷问题
- [3] 行内块级元素
用inline-block可以创建混合了块级和行内特征的元素。可以不再借助于浮动实现排列在一行。有一个小问题就是，空白符号会导致并列显示的元素会出现缝隙。解决办法就是设置父元素的font-size： 0px;
- [4] table元素
目前，在大多数开发环境中已经不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table元素呢？
table 编写出来的文件较大
table必须要在页面还在出来后才会显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示。
table语义化较差，不利于SEO
table嵌套太多，不利于书写
复制代码display: table会将指定元素作为table，除了不能使用合并行列之外，其他基本一样。
我们常使用的是display：table、和table-cell用来实现垂直居中。
我们需要注意一些：
display: table-cell;会被一些css属性破坏，比如float, position:absolute。
（1）display: table时padding会失效
（2）display: table-row时margin、padding同时失效
（3）display: table-cell时margin会失效
复制代码display: table-cell的使用实例：
1、使用display-cell实现多行居中
.parent{
width: 100px;
display: table;
}
.child{
display: table-cell;
vertical-align: center;
}
复制代码2、父元素宽度固定，想让若干个子元素平分宽度,一行显示
遇到这种情况我们可以使用百分比、flex。百分比因为整除不能除尽的原因，所以或多或少存在一些问题。
以下解决办法，只适用于单行内容的三等分。如果内容多了，会失去三等分效果。（也就是每一个son的内容都必须小于parent的33%;）
<div class="parent">
<div class="son">
我是多行内容。。。。。。1
div>
<div class="son">
我是多行内容。。。。。。2
div>
<div class="son">
我是多行内容。。。。。。3
div>
div>
复制代码.parent{
width: 1000px;
height: 100px;
display: table;
background: red;
}
.son{
display: table-cell;
text-align: center;
}
复制代码3、两box实现等高对齐
<div class="wrap">
<div class="content">
<div class="img-box"><img width="70" src="img/p2.jpg"/>div>
<div class="text-box">
<span>左侧的box的高度始终跟随右侧的box的高度变化而变化span>
<p>案例不对右侧的box设置display:table-cell，只对左侧设置，所以就会出现左侧跟随右侧高度变化而变化。p>
<p>如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。p>
<p>如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。p>
<p>如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。p>
<p>如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。p>
div>
div>
div>
复制代码*{
padding: 0;
margin: 0px;
}
.wrap{
width: 60%;}
.content{
display: table;
width: 100%;
border: 1px solid #CCCCCC;
}
.img-box{
display: table-cell;
width: 100px;
vertical-align: middle;
text-align: center;
background: #979797;
}
.text-box{
margin-left: 10px;
padding: 10px;
}
复制代码4、等高布局
<div class="box">
<div class="list_row">
<div class="list_cell">你一定也有过这种感觉的。当你心事重重，渴望找一个人聊一聊的时候，那个可以聊的人来了，可是你们却并没有聊什么。当然，聊是聊了，可是他聊他的，你也试着开始聊你的，只是到后来，你放弃了……那么，最后的办法就是静下来，啃啮自己的寂寞。或者反过来说，让寂寞来吞噬你。------罗兰《寂寞的感觉》div>
<div class="list_cell list_center">作为一个被基阿异捅过两个大血窟窿的人。告诉后来的基友们一句：一命二运三风水，四积阴功五读书。div>
<div class="list_cell">奔波了一天，收到了无数的生日快乐，享受了电影见面会现场各种形式的祝福和礼物，以及场面宏大的生日快乐歌，感谢＜西风烈＞，感谢支持我的朋友们！现在机场举长寿面祝你们都永远幸福快乐！
div>
div>
div>
div>
复制代码.box {
width: 600px;
}
.list_row {
display: table;
}
.list_cell {
display: table-cell;
width: 30%;
padding: 1.6%;
background-color: #f5f5f5;
}
.list_center {
background-color: #f0f3f9;
}
复制代码- [5] Flex-box 伸缩盒子
Flex 布局新旧混合写法详解（兼容微信）
Flex 布局教程：语法篇
三、BFC
1、什么是BFC
BFC是css2中的一个概念，可以称为是块级格式化上下文。他就是一个渲染区域，规定了内部的块级元素如何布局，并且于外部毫不想干。通俗点可以理解为是一个容器，用来管理块级元素。
2、如何创建一个BFC
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block|inline-flex|flex
position为 absolute|fixed
根元素
复制代码3、BFC的应用与原理
3.1特性1：BFC会阻止垂直外边距折叠
只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素或者嵌套元素，只要他们之间没有阻挡（比如边框、非空内容、padding等）就会发生margin重叠。
- ①相邻兄弟元素margin重叠问题
ABC
abc
复制代码我们上面提到的方法是通过设置border进行隔断。
我们也可以使用BFC来解决。只需要在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。
ABC
"wrap">
abc
复制代码- ②父子元素margin重叠问题
"box">box
"wrap">
h1
复制代码*{
padding: 0px;
margin: 0px;
}
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
background:yellow;
margin-top: 40px;
/* overflow: auto; */
}
.wrap h1{
background:pink;
margin:40px;
}
复制代码在wrap元素中添加:overflow:hidden;或者overflow：auto；使其父元素形成一个BFC；也可以在wrap元素中添加border：1px solid；或是padding：1px；这些都可以有效解决父子元素margin重叠问题。
*{
padding: 0px;
margin: 0px;
}
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
background:yellow;
margin-top: 40px;
overflow: auto;
}
.wrap h1{
background:pink;
margin:40px;
}
复制代码3.2 特性2：使用BFC来清除浮动
一个BFC可以包含浮动。很多时候我们会碰到这种情况，一个容器里有浮动元素。由于这个原因，容器元素没有高度，它的浮动孩子将会脱离页面的常规流。我们通常使用清除浮动来解决这个问题，最受欢迎的方法是使用一个clearfix的伪类元素。但我们同样可以通过定义一个BFC来达到这个目的。
由于容器内两个div元素浮动，脱离了文档流，父容器内容宽度为零（即发生高度塌陷），未能将子元素包裹住。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。
3.3 特性3：使用BFC来防止文字环绕
"box1">我是一个左浮动的元素
"box2">喂喂喂!大家不要生气嘛，生气会犯嗔戒的。悟空你也太调皮了，
我跟你说过叫你不要乱扔东西，你怎么又……你看，我还没说完你就把棍子给扔掉了!
月光宝盒是宝物，你把它扔掉会污染环境，要是砸到小朋友怎么办，就算砸不到小朋友，
砸到花花草草也是不对的。
复制代码.box1{
height: 100px;
width: 100px;
float: left;
background: lightblue;
}
.box2{
width: 400px;
height: 300px;
background: #eee;
}
复制代码有时候一个浮动div周围的文字环绕着它（如下图中的左图所示）但是在某些案例中这并不是可取的，我们想要的是外观跟下图中的右图一样的。为了解决这个问题，我们可能使用外边距，但是我们也可以使用一个BFC来解决。
此时我们可以为.box2元素的样式加上overflow:hidden；使其建立一个BFC,让其内容消除对外界浮动元素的影响。
3.4 特性4：使用BFC来实现多栏布局
<div class="container">
<div class="left">
<pre>
.left{
background:pink;
float: left;
width:180px;
}
pre>
div>
<div class="right">
<pre>
.right{
background:lightblue;
width:180px;
float:right;
}
pre>
div>
<div class="center">
<pre>
.center{
background:lightyellow;
overflow:hidden;
height:116px;
}
.center{
background:lightyellow;
overflow:hidden;
height:116px;
}
.center{
background:lightyellow;
overflow:hidden;
height:116px;
}
pre>
div>
div>
复制代码 html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.left{
background:pink;
float: left;
width:180px;
}
.center{
background:lightyellow;
/* overflow: hidden; */
}
.right{
background: lightblue;
width:180px;
float:right;
}
复制代码为center元素设置overflow: hidden;可以触发BFC
四、如何清除浮动
1、浮动怎么来的
float 被设计出来的初衷是用于文字环绕效果，即一个图片一段文字，图片float:left之后，文字会环绕图片。
但是，后来大家发现结合float + div可以实现之前通过table实现的网页布局，因此就被“误用”于网页布局了。
题目：为何 float 会导致父元素塌陷？
破坏性
float 的破坏性 —— float
破坏了父标签的原本结构，使得父标签出现了坍塌现象。
导致这一现象的最根本原因在于：被设置了 float 的元素会脱离文档流。
其根本原因在于 float 的设计初衷是解决文字环绕图片的问题。大家要记住 float 的这个影响。
复制代码包裹性
如上图，普通的 div 如果没有设置宽度，它会撑满整个屏幕，在之前的盒子模型那一节也讲到过。而如果给 div 增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容中的三个字包裹了——这就是包裹性。为 div 设置了 float 之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。
注意，此时 div 虽然体现了包裹性，但是它的 display 样式是没有变化的，还是display: block。
float 为什么要具有包裹性？其实答案还是得从 float 的设计初衷来寻找，float 是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个 div呢？此时 div 不被“包裹”起来的话，就无法实现环绕效果了。
另外，浮动还可以用于清除空格：
面试题： 手写clearfix
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE 低版本 */
}
复制代码/*开启haslayout*/
.clearfix {
*zoom: 1;
}
/*ie6 7 不支持伪元素*/
.clearfix:after {
content: '';
display: block;
clear: both;
height:0;
line-height:0;
visibility:hidden;//允许浏览器渲染它，但是不显示出来
}
复制代码另外我们也需要直到两个经典的布局： 浅谈面试中常考的两种经典布局——圣杯与双飞翼
两种布局的区别
圣杯布局是中间栏为两边腾开位置。
双飞翼布局则是中间栏不变，将内容部分为两边腾开位置五、定位
position 用于网页元素的定位，可设置 static/relative/absolute/fixed 这些值，其中 static 是默认值，不用介绍。
题目：relative 和 absolute 有何区别？
relative
相对定位 relative 可以用一个例子很轻松地演示出来。例如我们写 4 个
，出来的样子大家不用看也能知道。
第一段文字
第二段文字
第三段文字
第四段文字
复制代码上面，加上position:relative并且设置left和top值，看这个
有什么变化。
第一段文字
第二段文字
"position:relative; top: 10px; left: 10px">第三段文字
第四段文字
复制代码- 第三个发生了位置变化，分别向右向下移动了10px；
- 其他的三个位置没有发生变化，这一点也很重要。
可见，relative 会导致自身位置的相对变化，而不会影响其他元素的位置、大小。这是 relative 的要点之一。还有第二个要点，就是 relative 产生一个新的定位上下文。用于absolute。
总之：relative就是相对定位，会根据原来的位置决定新的位置，其他元素的位置不会受到影响。
同时relative还产生一个新的定位上下文。
复制代码absolute
还是先写一个基本的 demo。
第一段文字
第二段文字
"background: yellow">第三段文字
第四段文字
复制代码然后，我们把第三个
改为position:absolute;，看看会发生什么变化。
- absolute 元素脱离了文档结构。和 relative 不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float 元素也会脱离文档结构。）
- absolute 元素具有“包裹性”。之前的宽度是撑满整个屏幕的，而此时
的宽度刚好是内容的宽度。
- absolute 元素具有“跟随性”。虽然 absolute 元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实地呆在它原本的位置，因为我们此时没有设置 top、left 的值。
- absolute 元素会悬浮在页面上方，会遮挡住下方的页面内容。
复制代码
fixed
其实 fixed 和 absolute 是一样的，唯一的区别在于：absolute 元素是根据最近的定位上下文确定位置，而fixed根据 window ``（或者 iframe）确定位置。
题目：relative、absolute 和 fixed 分别依据谁来定位？
-
relative 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
-
fixed 元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。
-
absolute 的定位相对于前两者要复杂许多。如果为 absolute 设置了 top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位.
六、面试题集二
面试题--CSS选择符有哪些？哪些属性可以继承？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
复制代码可继承的样式： font-size font-family color等。
复制代码面试题--CSS选择器解析方式？
浏览器的解析方式是从右往左反着，然后再往前验证,主要出于性能的考虑，更快速的匹配到指定元素(左边范围太广了，比如可能能找到几百个)
所以出于性能考虑，我们最好不要书写嵌套很深的选择器。
复制代码
面试题--CSS优先级如何计算？
- 优先级：浏览器根据优先级来决定采用哪套样式来给元素设置样式，而优先级仅由选择器的匹配规则来决定。
内联 > ID选择器 > 伪类=属性选择器=类选择器 > 元素选择器【p】> 通用选择器(*) > 继承的样式
复制代码
- 优先级的计算：
a、用a表示选择器中ID选择器出现的次数
b、用b表示类选择器，属性选择器和伪类选择器出现的总次数。
c、用c表示标签选择器、伪元素选择器出现的总次数
d、忽略通用选择器
e、然后计算a*100+b*10+c的大小，这就是优先级了。
复制代码
权重：内联样式1000》id选择器100》class选择器10》标签选择器
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
复制代码
只要有id选择器，就是最大，类选择器再多也不会进位，只能在自己位上
为什么没有把!important放在优先级顺序中，因为官方认为!import和优先级没一点关系。
!important会覆盖原来的样式，要盖过内联样式。
不建议使用!import
Never 绝不要在全站使用!important。
Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
Never 永远不要在你的插件中使用 !important
Always 要优先考虑使用样式规则的优先级来解决问题而不是 !important
复制代码
面试题--CSS3新增的伪类?
举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
复制代码
面试题--display有哪些值？说明他们的作用。
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 缺省值。象行内元素类型一样显示。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。
复制代码
面试题--利用CSS实现一个三角形
.a{
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent transparent red;
}
复制代码
面试题--经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一
一般主流浏览器用 opacity:0.6，但是IE不识别这个属性快速解决方法: ie的透明性需要用filter:Alpha(Opacity=60)
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。快速解决方法: 在这个div里面加上display:inline。
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
复制代码
.bb{
background-color:red;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
复制代码
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
visibility又四个属性：
1、visible 默认，元素可见
2、hidden 元素不可见，但是占据位置。
3、collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
4、inherit 规定应该从父元素继承 visibility 属性的值。
复制代码
在不同浏览器下的区别：上面的效果在火狐浏览器、Opera和IE11中有效，但是在谷歌中是无效的，相当于使用了hidden。
attribute和property的区别：
首先在定义上更准确的来说，Attribute和Property分别为特性和属性，作为区别。
我们知道Attribute就是DOM节点自带属性，例如我们在HTML中常用的id,class,src,title,alt等。而Property则是这个DOM元素作为对象，其附加的属性或者内容，例如childNodes，firstChild等。
attribute是‘死’的(属性，写在HTML中)
property是‘活’的(特性，DOM对象中)
常用的Attribute，例如id、class、name等，已经被作为Property附加到DOM对象上，可以和Property一样取值和赋值。但是自定义的Attribute，就不会有这样的特殊优待
复制代码
property使用如下：
//通过'.'号获取property
var id = div1.id;
var className = div1.className; //相当于div1.getAttribute('class')
//通过'='赋予property
div1.className = 'a';
div1.align = 'center';
复制代码
CSS中书写字体要注意？
- 字体族
serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体，例如代码)
cursive(方正静蕾体)
fantasy
复制代码
指定多个字体，如果找不到会按照顺序使用其他字体，或者用同类字体
font-family:"Microsoft Yahei",serif
// 字体族不需要引号，因为不是具体的字体
复制代码
.chinese{
font-family:"PingFang SC","Microsoft Yahei",monospace
}
复制代码
指定在mac系统上用PingFang SC,windows上用Microsoft Yahei，把单个平台独有的字体写到前面
- 自定义字体
@font-face{
font-family:"IF";
src:url("./IndieFlower.ttf");
}
.custom-font{
font-family:IF;
}
复制代码
面试题 -- vertical-align ？
div{
display: inline-block;
width: 100px;
height: 40px;
background: blue;
color: #fff;
text-align: center;
vertical-align: middle;
}
复制代码
本来想实现的效果是字体水平垂直居中，但效果却是上图。
原来vertical-align属性只对行内元素有效，对块内元素无效！而此时就会用到display属性，大家也看到我里面有设置display属性为inline-block属性，确没有效果。
即使你设置了inline-block，但是当前div属性还是块对象呈递，只是允许同一级别的div在同一行内，也可以设置宽度和高度！所以才会呈现如上图二所示的没有效果！
- 解决办法：我们将
display属性设置为table-cell，将块元素转化为单元格，然后加上vertical-align：middle.
面试题 -- 行高的构成
一段文本是由什么构成的呢？你会说是由字母（单个汉字）构成了单词，单词构成了段落的一行，然后多个行构成了一个段落。这就是我们要讲的几个 box 的基础。
"top">我是一段文字呀，我是一段文字呀，我是一段文字呀
复制代码
- inline-box
每个单词（或者段落中的行内元素）就是一个 inline-box，更严格点来讲，没有标签包裹的纯文本元素也被成为匿名 inline-box。
上图的每一个方框都是inline-box;
- line-box
一个 line-box 由一个或者多个 inline-box 构成，如上面的段落可以分为两个 line-box：
段落的每一行都是一个line-box
- containing-box
一个或多个 line-box 构成了一个 containing-box，每段文本都有一个 containing-box：
每个 containing-box 是由一个或多个 line-box 构成的，因此我们可以说 line-box 的总高度决定了 containing-box 的高度，而每个 line-box 是由一个或多个 inline-box 构成的，每个 line-box 的高度是由构成 line-box 的几个 inline-box 中的高度最大的那一个构成的.
复制代码
- 行高由line-box决定
- line-hight会撑起inline-box的高度，并不会影响本身布局的高度，但是会影响外部元素(line-box)
- inline-box组成line-box，line-box高度是由inline-box决定
面试题 —— 经典图片空隙问题
"http://img2.imgtn.bdimg.com/it/u=1307886861,664966277&fm=26&gp=0.jpg" />
div{
width: 600px;
border: 1px solid #000;
}
复制代码
效果如下：
一个div里除了这张图片什么都没有，为什么会有这个空隙呢？
我们上面所说的行高的知识就用上了：
内容区域高度 + 行间距 = 行高。行高决定内联盒子的高度，行间距可大可小（甚至可为负值）；当行间距为负值时，说明行高的高度小于内容区域高度，就会使上下文字发生重叠。
我们再做改进，
"http://img2.imgtn.bdimg.com/it/u=1307886861,664966277&fm=26&gp=0.jpg" />
xxxxy
复制代码
我们看到图片的底部和xxx的下面对其了，
line boxes中的
vertical-align默认基线对齐，而图片作为其中的一个
inline boxes元素，同样也是基线对齐，所以会出现上图的结果。
所以图片下面的空隙是由于图片默认基线对齐造成的。
所以解决办法为：
div{
width: 600px;
border: 1px solid #000;
}
img{
vertical-align:bottom;
}
复制代码
还有两种方法：
1、图片块化，因为（块状元素不存在基线对齐）
img{
display:block;
}
复制代码
2、行高足够小，使基线位置上移：
div{
width: 600px;
border: 1px solid #000;
line-height:0;
}
复制代码
面试—— 文本折行
div{
width:300px;
border: 1px solid #000;
}
复制代码
在一个div设置了宽度为300PX的样式，中文可以自动转行、换行，但是连续英文和数字则会撑破设置的300px宽度
当设置了word-warp: break-word;(允许长单词换行)之后英文也换行了。
div{
width:300px;
border: 1px solid #000;
word-wrap: break-word;
}
复制代码
- 单行文本溢出
div{
width:300px;
border: 1px solid #000;
white-space: nowrap; // 确保文本在一行上显示
text-overflow:ellipsis; // 当文本溢出包含元素时发生的事情，ellipsis表示设置隐藏后的三点
overflow: hidden; // 超出部分隐藏
// 三句都必须有
}
复制代码
- 多行文本溢出
div{
width:300px;
border: 1px solid #000;
display: -webkit-box;
-webkit-box-orient: vertical; // 规定框的子元素应该被垂直排列
-webkit-line-clamp: 3; // 限制在一个块元素显示的文本的行数。一个 不规范的属性，它没有出现在 CSS 规范草案中，必须要配合display: -webkit-box;使用
overflow: hidden; // 超出部分隐藏
}
复制代码
面试—— 设置float之后的一些影响
脱离文档流
不脱离文本流
元素浮动
复制代码
- 对自己的影响
对于inline元素，自身形成了BFC块，inline元素也可以设置宽高了。
尽量向上
尽量向左（右）
复制代码
- 对兄弟的影响
浮动的兄弟元素跟着自己浮动
其他元素会受些影响
复制代码
- 对父的影响
自元素消失
高度塌陷
复制代码
- 解决高度塌陷的问题：
父级设置BFC，来接管自己的高度，当里面的元素超出的时候自动滚动(这是一个不好之处)
overflow:auto/hidden
复制代码
通过伪类元素撑起来
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{
*zoom: 1;
}
复制代码
面试—— 利用float来实现两栏布局和三栏布局
- 两栏布局
<div class="wrap">
<div class="left">
我是左侧 float元素
div>
<div class="right">
我不浮动但是margin-left: 左侧的宽度。
div>
div>
复制代码
.wrap{
width: 60%;
}
.left{
width: 200px;
height: 100px;
background: pink;
float: left;
}
.right{
margin-left: 200px;
height: 200px;
background: lightblue;
}
复制代码
Demo
- 三栏布局
<div class="wrap">
<div class="left">
我是左侧 float元素
div>
<div class="right">
我右侧浮动
div>
<div class="center">
我不浮动但是margin-left: 左侧的宽度。margin-right：右侧的宽度。
div>
div>
复制代码
.wrap{
width: 60%;
}
.left{
width: 200px;
height: 100px;
background: pink;
float: left;
}
.right{
width: 200px;
height: 200px;
float: right;
background: lightblue;
}
.center {
margin-left: 200px;
margin-right: 200px;
background: lightgreen;
height: 300px;
}
复制代码
面试——— 响应式设计和布局
面试 ———— CSS动画
- 动画类型
transition 过渡补间动画(中间的过程浏览器脑补起来)
keyframe 关键帧动画(也是补间动画，但是有很多关键帧)
逐帧动画(特殊的逐帧动画，无法使用补间动画)
复制代码
transition动画实例：
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
/* 指定过渡的css属性 */
-webkit-transition-property: width;
transition-property: width;
/* 完成过渡所需的时间 */
-webkit-transition-duration:.5s;
transition-duration:.5s;
/* 指定过渡函数 */
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
/* 开始出现的延迟时间 */
-webkit-transition-delay: .18s;
transition-delay:.18s;
}
div:hover {
width: 400px;
}
复制代码
keyframes动画实例：
/* // 定义动画 */
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
/* 设置元素 */
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
/* 触发动画 */
div:hover {
animation: changecolor 5s ease-out .2s;
}
复制代码
- 逐帧动画
每帧都是关键帧，中间没有补间过程
依然使用关键帧动画
属于关键帧动画中的一种特殊情况
适用于无法补间计算的动画
资源较大(适合时间短、资源小的动画，一定要控制好大小的时长)
使用steps()
复制代码
- 过渡动画和关键帧动画的区别
过度动画需要有状态变化，关键帧动画不需要有状态变化
关键帧动画能控制更精细
transitions 动画的一个缺点就是，只能指定开始和结束的属性值，然后在这个过程中实现对属性的平滑过渡，不能实现更为复杂的效果。
复制代码
- 如何实现逐帧动画
使用关键帧动画
去掉补间(steps)
复制代码
- 案例
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: -1680px 0;
}
}
#sprite {
width: 140px;
height: 144px;
margin: 0px auto;
background: url("https://idiotwu.me/content/images/2015/01/sprites.png") 0 0 no-repeat;
animation: run 0.6s steps(12) infinite;
/* 使用run动画，duration为0.6，动画函数为steps(12), 次数为无限 */
}
复制代码
steps([, [ start | end ] ]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。
Demo
七、CSS 预处理器
我最常用less，因为less是用js 编写的，较为快一些。下面这篇文章写的很好
less即学即用
less 从入门到精通
预处理器作用
帮助更好地组织CSS代码
提高代码复用率
提升可维护性
编写高质量的css代码
复制代码
预处理器的优缺点
优点：提高代码复用率和可维护性
缺点：需要引入编译过程 有学习成本
复制代码
八、Bootstrap
Bootstrap如何实现响应式布局
原理：通过media query设置不同分辨率的class
使用：为不同分辨率选择不同的网格class
复制代码
如何基于Bootstrap定制自己的样式
使用CSS同名覆盖
修改源码重新构建
引用SCSS源文件，修改变量
复制代码
九、CSS优化
1、选择器避免过多的嵌套
2、尽量少的使用后代选择符
3、尽量避免使用链式选择符
4、避免不必要的重复，有些可以继承
5、最好使用表示语义的名字。
6、避免！important
7、尽可能的精简规则
8、选择器要做到精，不要太长，因为浏览器解析是从右侧开始的，由具体到更大的范围。
复制代码
十、硬件加速
有时候动画可能会导致用户的电脑卡顿，你可以在特定元素中使用硬件加速来避免这个问题：
.block {
transform: translateZ(0);
}
复制代码
你并不会察觉有什么不同，但浏览器会为这个元素进行3D硬件加速，在will-change这个特殊属性未被全面支持之前，这个方法还是很有用的。
十一、一些有趣的 CSS 魔法和布局
懒加载占位图自适应
在商城中展示商品图片时，如果图片较多，一种比较好的体验是：会先有一个占位图，目的是为了让页面无抖动，也就是所谓的图片懒加载效果。但是，当遇到适配时就比较头痛，特别是手机的横竖屏切换。如果是通过 JavaScript 计算的话，就可能会出现抖动现象。 本着能用 CSS，就不用 JS 去实现的原则，就有了下面这种方案：
<div class="wrap">
<div class="img-ratio">
<img src="">
div>
div>
复制代码
.wrap{
width: 400px;
}
.img-ratio {
width: 100%;
position: relative;
padding-top: 75%;
/* 占位图 */
background: url("http://via.placeholder.com/400x300") no-repeat;
/* 占位图为4:3 */
/* 我们要加载的图片也是 4:3 */
}
.img-ratio > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
复制代码
再图片未加载出来之前显示我们的占位图，图片出来后占满整个区域。
根据容器的宽度，按照宽高比例，自动计算出容器的实际大小，并且让容器内的如 img 等子元素自适应宽高。
图片父容器宽度 100%，父容器的高度百分比为：100 * 3 / 4 = 75%。设置padding-top：75%；进行占位
图片 absolute 并且完全铺满父容器。
复制代码
顶部导航不定宽的居中展示
一些官网，有顶部导航栏，导航栏的内容区往往需要居中展示，两旁则留白，导航栏的下方可能还有根线或者阴影，作为区分顶部与主体内容。
.center-float {
float: left;
position: relative;
left: 50%;
}
.center-float > ul {
position: relative;
left: -50%;
}
复制代码
footer 置底
"content">....
"footer">....
复制代码
html, body {
height: 100%;
}
$footer-height: 30px;
#content {
min-height: 100%;
margin-bottom: -$footer-height;
padding-bottom: $footer-height;
}
#footer {
line-height: $footer-height;
text-align: center;
}
复制代码
十二、面试题集三
display、visibility、opacity
display: none;元素彻底消失，渲染树中也不存在了，会触发回流。
visibility: hidden;元素隐藏,原来的位置还是会占着，渲染树中还有，会触发重绘，性能相对较好，不会触发事件。
opacity:0 ;将元素隐藏起来，原来的位置还是会占着，也不会改变页面布局，但是会触发点击事件
复制代码
vertical-align属性适用于inline元素和table-cell元素
link & import 引入CSS区别
import是CSS引入样式表的语法，link则是HTML提供的标签。
link在页面加载时同时加载，import是在页面加载完成之后再加载。
可以使用操作DOM，插入link标签改变样式，import不可以。
复制代码
伪类和伪元素的区别
伪类，当前元素属于某种状态时，为其添加相应的样式，状态会随着用户行为而变化。如:hover,:focus
伪元素，创建一些DOM树种不存在的元素，并添加样式。例如:before会在元素之前添加一些内容。用户看的到，但这些内容不存在于DOM树中。
复制代码