首页 > 代码库 > CSS篇
CSS篇
一、盒子模型：
标准模式和混杂模式（IE）。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
CSS盒子模型具有内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。我们所说的width,height指的是内容(content)的宽高，一个盒子模型的宽度=:width+ pdding(宽) + border(宽)，高度=height + padding(高) + border(高)。
二、绝对定位和相对定位：
1、relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
2、absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
三、 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 ？
1.什么时候需要清除浮动？
我们对元素进行了浮动(float)时，我们的元素就会脱离文档流，像一只小船一样漂流在文档之上。
在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
float主要流行与页面布局，然后没有使用后没有清除浮动，就会后患无穷。
父盒子的margin受到影响，无法实现左右居中，
我没有给父盒子设置高度，浮动后父盒子的高度无法被撑开。
2.清除浮动都有哪些方法 ?
清除(clear)也有4个可能值。最常用的是 both，清楚左右两边的浮动。left 和 right 只能清楚一个方向的浮动。none 是默认值。
方法一：添加新的元素 应用 clear：both；
【补充】：
使用空标签清除浮动.
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<br style="clear:both">
</ul>
方法二：父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）
<div class="outer over-flow"> //这里添加了一个class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
.over-flow{
overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}
原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以。
【补充】:
使用overflow属性
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可。 overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，注意，zoom不符合W3C标准。overflow:hidden也可以实现。overflow:hidden也可以实现。
<ul style="overflow:auto;zoom:1">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法三： 据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲）
先说原理：它就是利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：
.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/
.outer:after {clear:both;content:‘.‘;display:block;width: 0;height: 0;visibility:hidden;} /*==for FF/chrome/opera/IE8==*/
其中clear:both;指清除所有浮动；content: ‘.’; display:block;对于FF/chrome/opera/IE8不能缺少，
其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.clearfix:after {content:‘‘;display:block;clear:both;visibility:hidden;zoom:1;}
<div class="outer clearfix">
【补充】：
使用after伪对象清除浮动
after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。
a、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
b、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”
再次again：当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！
浮动的特点:
1.浮动的元素，讲向左或者向右浮动，浮动到包围元素的边上，或者上一个浮动元素的边上为止。
2.浮动的元素，不再占用空间，且浮动元素的层级要高于普通元素。
3.浮动的元素，一定是块元素，不管之前是什么元素。
4.如果浮动的元素没有指定宽度的话，浮动后会尽可能变窄，因此浮动元素要指定宽和高。
5.一行的多个元素，要浮动大家一起浮动。
四、如何保持浮层水平垂直居中
1、通过使用百分比绝对定位,与外补丁负值的方法，负值的大小为其自身宽度高度的一半”达到让层垂直居中的效果。
div.innerbox {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red
}
这样写必须固定浮动层的大小，才能用margin负值一半达到居中的效果，如果在让innerBox相对于一个父级层实现水平垂直居中，只需设置父级层的position:relative定位即可。
如果浮动层的宽，高不固定，会动态的添加一些内容上去，这时候innerBox的margin与width、height之间的制约关系，使得动态变化innerBox的内容引起的高度变化没办法反应到margin上，除非使用JS动态控制，抛开JS不说，如果要实现innerBox的内容动态变化也能保持垂直居中，则要用下面的方法：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动层水平垂直居中</title>
<style>
.outBox2{
display: table;
height: 400px;
width:600px;
position: relative;
overflow: hidden;
background:#FFCCCC;
border: 1px solid #d00;
}
.midBox2{
position: absolute;
top: 50%;
left:50%;
display: table-cell;
vertical-align: middle;
}
.innBox2{
position: relative;
top: -50%;
left:-50%;
width:300px;
margin:0 auto;
border:1px solid #c00;
}
</style>
</head>
<body>
<div class="outBox2">
<div class="midBox2">
<div class="innBox2">
垂直居中<br/>
动态垂直居中<br/>
动态水平居中
</div>
</div>
</div>
</body>
</html>
此方法似乎只能用在固定的区域，如果是层浮动于整个网页该如何实现居中，用JS吗?
2、利用绝对定位与transform
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动层水平垂直居中</title>
<style>
.parent{
position: absolute;
background-color: #eee;
width: 100%;
height: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
3、利用flexbox
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动层水平垂直居中</title>
<style>
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
display: flex;
justify-content:center; /* 水平居中 */
align-items:center; /* 垂直居中 */
/* flex-direction:column; */ /* 一列显示 */
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
border: 1px dashed #000;
margin: 5px;
/*如果children下面还有子元素的话，可以嵌套使用*/
/* display: flex;
justify-content: center;
align-items:center; */
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
4、利用定位与margin：auto
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
position: relative;
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
五、 position 和 display 的取值和各自的意思和用法
position
1、position属性取值：static(默认)、relative、absolute、fixed、inherit。
2、postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top，right，bottom，left的值失效。在切换的时候可以尝试这个方法。
3、除了static值，在其他三个值的设置下，z-index才会起作用。（确切地说z-index只在定位元素上有效）
4、position：relative和absolute都可以用于定位，区别在于前者的div还属于正常的文档流，后者已经是脱离了正常文档流，不占据空间位置，不会将父类撑开。定位原点relative是相对于它在正常流中的默认位置偏移，它原本占据的空间任然保留；absolute相对于第一个position属性值不为static的父类。所以设置了position：absolute，其父类的该属性值要注意，而且overflow：hidden也不能乱设置，因为不属于正常文档流，不会占据父类的高度，也就不会有滚动条。
5、position：fixed 旧版本IE不支持，定位原点相对于浏览器窗口，而且不能变。常用于header，footer，或者一些固定的悬浮div，随滚动条滚动又稳定又流畅，比JS好多了。fixed可以有很多创造性的布局和作用，兼容性是问题。
6、position：inherit。规定从父类继承position属性的值。但是任何版本的IE都不支持该属性值。
display
1、display属性取值：none、inline、inline-block、block、flex、inherit。
2、display属性规定元素应该生成的框的类型。文档内任何元素都是框，块框或行内框。
3、display：none和visiability：hidden都可以隐藏div，区别有点像absolute和relative，前者不占据文档的空间，后者还是占据文档的位置。
4、display：inline和block，又叫行内元素和块级元素。表现出来的区别就是block独占一行，在浏览器中通常垂直布局，可以用margin来控制块级元素之间的间距；而inline以水平方式布局，垂直方向的margin和padding都是无效的，大小跟内容一样，且无法设置宽高。inline就像塑料袋，内容怎么样，就长得怎么样；block就像盒子，有固定的宽和高。
5、inline-block就介于两者之间。
6、display: flex 意为"弹性盒布局模型"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，称为flex项目（flex item）。
容器的属性：以下6个属性设置在容器上。
flex-direction 决定主轴的方向（项目的排列方向）。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
flex-wrap 默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content 定义了项目在主轴上的对齐方式。假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items 定义项目在交叉轴上如何对齐。假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content 义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目的属性：以下6个属性设置在项目上。
order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性
align-self align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
六、样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验
1、CSS优先级
最高优先级
内联样式 <p style="...;...;"> ...... </p>
内部样式表 <style type="text/css"> ...... </style>
外部样式表 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/"/>
浏览器默认
最低优先级
2、CSS Selectors
元素选择器 p{ ...... } 指定元素
类选择器 .class_name{ ...... } 类属性值等于selector中指定值的元素
ID选择器 #id_name{ ...... } id属性值等于selector中指定值的元素
通用选择器 *{ ...... } 当前页面的所有元素
属性选择器 img[alt]{ ...... }
img[src="http://www.mamicode.com/image.png"]{ ...... } 带有括号内指定属性/带有特定值的属性的任何元素
子选择器 li>p{ ...... } 右边元素是左边的直接子节点时(IE6及更早版本不支持)
后代选择器 li p { ...... } <li>元素包含的所有的<p>元素
相邻兄弟选择器 h1 + p { ...... } 在同一DOM层级中的元素(IE6及更早版本不支持)
伪类 a:link,a:focus { ...... } 根据链接的状态样式化元素
伪元素
p:first-letter { ...... }
p:before { ...... }
样式化元素的特定部分(第一行或者第一个字母)，或在其前后插入内容
组合选择器 h1,p{ ...... }
p.warning{ ...... }
div#foot{ ...... }
p.info, div#foot{......}
3、解决冲突：继承与层叠
继承：某个属性从父元素传递到子元素的机制
继承的意义：不用为每个元素指定的属性，简化了代码，若不需继承属性，覆盖即可
什么元素可以继承属性？ 除了<html>（根元素）都有，因为只要它无父元素。
哪些属性可以继承？ 思考一下就知道，比如backgroun-color属性
层叠：当多个冲突和层叠的CSS声明应用在同一元素时，用来控制应用CSS声明的顺序
1重要性，若声明具有一样的重要性，则计算特殊性
重要性
浏览器内建样式表 优先级最低
作者样式表中的常规声明
用户样式表中的常规声明
作者样式表中的重要声明 重要声明：
｛ ... ; ... !important;｝
用户样式表中的重要声明 优先级最高
2特殊性，若声明具有一样的特殊性，则考虑源顺序
计算特殊性
有4个成分——abcd,a最特殊,d特殊性最少
成分a 若style属性中有一个声明，则为1,否则为0 h1——0,0,0,1
成分b 选择器中id选择器数目 .info——0,0,1,0
成分c 属性选择器、类选择器、伪元素数目 #bar——0,1,0,0
成分d 元素选择器、伪元素的数目 ul#nav a:link——0,1,1,2
***组合符、通用符对特殊性无影响
3源顺序
源顺序
后面的声明覆盖前面的
!important 必须写在样式与分号之间，每个样式必须单独声明。这个也可以用来调整兼容性问题，IE6不识别!important;话说回来，兼容问题最好还是用hack方法解决比较好！
七、CSS3动画效果属性
1.Keyframes介绍：
Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
示例：创建一个动画名叫“changecolor”，在“0%”时背景色为red,在20%时背景色为blue，在40%背景色为orange，在60%背景色为green，在80%时背景色yellow，在100%处时背景色为red。
<html>
<head>
<meta charset="utf-8">
<title>css3动画</title>
<style>
@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;
}
</style>
</head>
<body>
<div>hover颜色改变</div>
</body>
</html>
2.设置动画播放方式
语法规则：
animation-timing-function:ease(由快到慢，逐渐变慢) | linear (恒速)| ease-in (速度越来越快)| ease-out (速度越来越慢)| ease-in-out (先加速在减速)|
cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
3.设置动画播放方向
animation-direction属性主要用来设置动画播放方向，其语法规则如下：
animation-direction:normal | alternate [, normal | alternate]*
其主要有两个值：normal、alternate
1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
4.设置动画的播放状态
animation-play-state属性主要用来控制元素动画的播放状态。
参数：
其主要有两个值：running和paused。
其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
例如，页面加载时，动画不播放。代码如下：
animation-play-state:paused;
五.设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：
none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards 表示动画在结束后继续应用最后的关键帧的位置
backwards 会在向元素应用动画样式时迅速应用动画的初始帧
both 元素动画同时具有forwards和backwards效果
在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
例如：让动画停在最一帧处。代码如下：
animation-fill-mode:forwards;
canvas、svg的区别
1) svg绘制出来的每一个图形元素都是独立的DOM节点，可方便后期绑定事件或修改，而canvas输出的是一整幅画布；
2) svg输出的图形是矢量的，后期可以修改参数来自由放大缩小，无失真，canvas输出标量画布，就像一张图片一样。
八、px和em的区别
px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位 ，不会因为其他元素的尺寸变化而变化。
em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。
CSS篇