1，元素定位样式
文档流就是HTML文档内所有元素按照一定规律排列并显示的形式。 CSS文档流大致可以分为3种：标准流，浮动流，定位流。
1.1，标准流
默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。
块级元素，行内元素，行内块级元素的区别：
- 行内元素：从左往右排列，不占据一行；对其设置宽高及margin的上下距离无效; 除了p之外，所有的文本级标签，都是行内元素span，a，img，strong，br，textarea， input。
- 块级元素：单独占据一行; 所有的容器级标签都是块级元素，以及p标签; div，p，table，form，h1-h6，ul，li 等。
- 行内块级元素：不会自动换行，相比行内可以设置宽高，具有行内块级共同特性。
总结一下就是：标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。
显示模式转换：
display：block|inline|inline-block display：block 以块元素显示； display：none 内容消失，不占空间； display：inline 以行内元素显示，可解决IE6的双倍BUG； display：inline-block 对内块，对外行。
1.2，浮动流
浮动流只有一种排版方式，就是水平排版。 它只能设置某个元素在父元素内左对齐或者右对齐。设置了浮动的元素，将脱离标准流，之后它将无视元素的display属性，并且都被当做块级元素处理。
请注意，浮动float属性没有center取值，并且，如果设置了浮动属性，那么你将不能通过使用margin:0 auto；属性使元素居中。
当某个元素浮动之后，相当于从标准流中删除了该元素，标准流中的元素将会无视浮动元素，并且可能被浮动元素覆盖。
当有多个元素浮动时，他们有以下特点：
- 在相同方向上浮动的元素，先浮动的元素会显示在前面。
- 不同方向的浮动元素，会尽量去寻找并贴靠前面和它浮动方向相同的元素。如果前面没有其他浮动元素，那么它将紧贴其父元素的边界。
- 如果有未浮动的兄弟元素，那么元素在浮动之后，会根据它在标准流中的位置确定该在第几行展示。
浮动元素还有一个特点：浮动元素不会挡住没有浮动元素中的文字，没有浮动的文字会自动给浮动的元素让位置。这才是设计浮动的初衷。 元素浮动后会带来两个问题：
- 第一个是造成父元素的高度塌陷，padding和margin无效。
- 第二个是被其他元素无视，出现元素相互覆盖的现象。
我们通过下面的方式清除浮动带来的影响：
【问题一】为父元素设置固定的高度
【问题一】为父元素设置浮动
【问题二】设置clear属性。clear属性的功能是使浮动元素不去寻找相邻的其他浮动元素，从而消除浮动元素对其他元素的影响
【问题二】为父元素设置overflow:hidden;属性
1.3， 定位流
标准流和浮动流都只能在水平或垂直方向布局元素，但现实是，我们可能需要在上下左右几个方向上同时偏移元素，定位流正是为了解决这一问题而设计的。通过设置元素的position属性，可以让元素处于定为流中，并通过left、right、top、bottom属性设置元素具体的偏移量。
定为流分为四种：static 静态定位、 relative 相对定位、 absolute绝对定位、 fixed固定定位。
position:static|absolute|fixed|relative; static：表示无特殊定位，元素定位的默认值，遵循HTML元素定位规则，不能通过z-index属性进行层次分级。 absolute：表示绝对定位，相对于其父级元素进行定位，元素的位置可以通过top、right、bottom和left等属性进行设置。 fixed：表示悬浮，使元素固定在屏幕的某个位置，其包含块使可视区域本身，它不随滚动条的滚动而滚动。 relative：表示相对定位，对象不可以重叠，可以通过top、right、bottom和left等属性在页面中偏移位置，可以通过z-index属性进行层次分级。 top/left/right/botom 元素向上/左/右/下的偏移量 overflow 设置元素溢出其区域发生的事情 clip 设置元素显示的形状 vertical-align 设置元素显示的对其方式 z-index 设置元素的堆叠顺序/用来设置元素的堆叠顺序，越大越在上方设置position属性只会让元素脱离文档流，需要设置偏移属性使元素移动。包括4个偏移属性，分别为top、bottom、left、right。偏移属性的值可以为负值，负值时向相同方向移动。
【static】静态定位，实际上所有元素默认都是静态定位的，即处于标准流中。
【relative】使元素相对于文档流的位置偏移一段距离，元素遵循默认的文档流，相对于元素的原位置进行移动，周围元素忽略该元素的移动。需要设置top、bottom、left相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位。
【absolute】使元素相对于文档流的位置或最近定位祖先元素的位置偏移一定的距离，而这个祖先类还必须是以postion非static方式定位的。举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素，直到<html>标签为止，这里还需要注意的是，relative和static方式在最外层时是以<body>标签为定位原点的，而absoulte方式在无父级是position非static定位时是以<html>作为原点定位。
【fixed】使元素相对于视口（window）偏移一定的距离，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说固定在屏幕上的某个位置，不因屏幕滚动而消失。
Z-index可用于设置元素之间的层叠顺序。只对于定位元素有效，即只对于position属性的属性值为absolute、relative和fixed有效。静态定位元素按照文档出现顺序从后往前进行堆叠。设定位置元素忽略文档出现顺序，根据z-index值由小到大的顺序从后往前堆叠，即Z-index的值越高表示元素显示的顺序越优先。设置为负值z-index的设定位置元素位于静态定位元素和非设定位置浮动元素之下。z-index值不必为连续值，其默认值为auto。当设置的值相同时，后加载的元素优先显示。
.div2 { background-color: #e0e0e0; position: relative; left: 50px; top: 50px; z-index: -1; }
从图中可以看到，当元素的z-index设置为负值时，设定位置元素是位于静态定位元素之下，即是di第二个div元素的父元素div0的位置之下。
1.4，新增界面设计属性
【resize】通过resize属性可以实现页面中元素的区域缩放操作。
resize:none|both|horizontal|vertical|inherit none：不提供元素尺寸调整机制，用户不能调节元素的尺寸 both：元素尺寸的双向调整机制，用户可以调节元素的宽和高 horizontal：元素尺寸的单向水平方向调整机制 vertical：元素尺寸的单向垂直方向调整机制 inherit：默认继承需要注意的是，resize属性主要用于可以使用 overflow 属性的任何元素。所以，必须为元素定义 overflow 属性，否则，resize属性无效，元素的尺寸不允许改变。
【appearance】通过该属性可以方便地把元素伪装成其他类型的元素。
appearance:normal|icon|window|button|menu|field normal ：表示正常修饰元素 icon：表示把元素修饰得像一个图标 window：表示把元素修饰得像一个视窗 button：表示把元素修饰得像一个按钮 menu：表示把元素修饰得像菜单 field：表示把元素修饰得像一个输入框appearance属性所有主流浏览器都不支持它。到现在为止，只得到 Webkit 和 Gecko 两个内核的支持，但需要加上浏览器的私有前缀。
【content】content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符，其实它还有很多值可供选择。
content:none|normal|string|counter|attr|url|inherit none:如果有指定的添加内容，则设置为空 normal:表示不赋予内容 string：用于赋予指定的文本内容 counter(<counter>):用于指定一个计数器作为添加内容 attr(<attribute>):把选择的元素的属性值作为添加内容 url(<url>):指定一个外部资源作为添加内容 inherit:表示继承父元素#div2 p:before{ content:'第'counter(count)'章：'; } /* 给计数器加器起个名字，它只会累加 li 标签的索引，li元素中间的div并不会理会 */ #div2 p{ counter-increment:count; }
2，多列布局
当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。
2.1，基本语法
不管想让一段文本呈多少列显示，你需要的只是两个属性：column-count 和 column-width（每一列的宽度）。
column-count：<integer> | auto <integer>：用整数值来定义列数。不允许负值 auto：根据column-width自定分配宽度 column-width：<integer> | auto(宽度值) <integer>：用整数值来定义列数。不允许负值 auto：当只有column-width时，auto为其父元素宽度，当使用columns属性时，column-width属性值为auto时，根据column-count划分其每列宽度。
当给列只设置column-count时，浏览器会将文本分为它所设置的列的个数，宽度由浏览器自定义。column-width属性控制列的宽度。如果你没有提供column-count属性值，那么，浏览器就是自主决定将文本分成合适的列数。但是，column-width不可为0和负值；当column-width的值为auto或column-width的值大于元素宽度width一半时，没有分列效果(更准确地，由其他属性来决定) 。
简写方式：columns：[ column-width ] || [ column-count ]，如：columns:12em; 或columns:4; 若同时声明时，可以写为 columns:12 8em; 前后顺序无影响
2.2，列高度的平衡
CSS3规范里描述的是，各列的高度是均衡的，浏览器会自动调整每列里填充多少文本、均分文本，来使各列的高度保持均衡一致。然而，有时候，我们需要设定列的最大高度，这个时候，文本内容会从第一列开始填充，然后第二列，第三列，也许以后的列会填不满，也许会溢出。所以，当对多列布局设定了height或max-height属性值后，列会伸长到指定高度——无论内容有多少，够不够或超不超。
列之间的缝隙间隔宽度：两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em，但如果你使用column-gap属性，就会修改这个缺省的宽度值。
column-gap:<length>|normal <length>：用长度值来定义列与列之间的间隙。不允许负值 normal：与font-size大小相同。假设该对象的font-size为16px，则normal值为16px，类推。
2.3，column-rule 复合属性
设置或检索对象的列与列之间的边框，复合属性：
column-rule：[ column-rule-width ] || [column-rule-style ] || [ column-rule-color ] [ column-rule-width ]：设置或检索对象的列与列之间的边框厚度。 [ column-rule-style ]：设置或检索对象的列与列之间的边框样式。 [ column-rule-color ]：设置或检索对象的列与列之间的边框颜色。设置或检索对象的列与列之间的边框厚度：
column-rule-width：<length> | thin | medium | thick <length>：用长度值来定义边框的厚度。不允许负值 medium：定义默认厚度的边框。 thin：定义比默认厚度细的边框。 thick：定义比默认厚度粗的边框。设置或检索对象的列与列之间的边框样式：
column-rule-style：none | hidden | dotted | dashed | solid |double | groove | ridge | inset | outset none：无轮廓。column-rule-color与column-rule-width将被忽略 hidden：隐藏边框。 dotted：点状轮廓。 dashed：虚线轮廓。 solid：实线轮廓 double：双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值 groove：3D凹槽轮廓。 ridge：3D凸槽轮廓。 inset：3D凹边轮廓。 outset：3D凸边轮廓。设置边框颜色：
2.4，跨列
设置或检索对象元素是否横跨所有列：
column-span:none|all none：不跨列 all：横跨所有列（1）横跨一列或不跨列的例子：(缩得比较小，主要看样子)
（2）横跨多列的例子：
在列布局中，有时由于内容不足，多列中的最后列往往没有足够内容填充，这时要实现所有列都具有相同高度的效果，需要使用列填充属性column-fill设置或检索对象所有列的高度是否统一。规定如何对列进行填充，所有主流浏览器都不支持。
column-fill:auto|balance auto：列高度自适应内容 balance：所有列的高度以其中最高的一列统一
3，CSS的盒模型
3.1，基本概念
在CSS中，所有的页面元素都包含在一个矩形框内，这个矩形框称为盒模型。所有HTML元素可以看作盒子。盒模型是由margin(边界)、border(边框)、padding(填充)和content(内容)组成。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- Margin(外边距)：清除边框外的区域，外边距是透明的。（margin的长度是允许出现负值的）注意：当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的（即便是计算上下外边距也是按照父元素的宽度百分比计算的）。
- Border(边框)：围绕在内边距和内容外的边框。
- Padding(内边距)：清除内容周围的区域，内边距是透明的。（padding的长度是不允许出现负值的）和margin一样，当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的。
- Content(内容)：盒子的内容，显示文本和图像。
元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距。
元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距。
3.2，弹性盒模型
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。 CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。
弹性盒布局：弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。
块级布局：更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。
弹性盒布局的用法：
W3C 2009年第1次草案：[display:box;] W3C 2011年第2次草案：[display:flexbox | inline-flexbox;] W3C 2012年第5次草案及以后的候选推荐标准：[display:flex | inline-flex;] 兼容性代码： display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ display：box； 是老规范，要兼顾古董机子就加上它。flexbox flex 是新规范，老机子不支持的。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
- 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉(侧)轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start(主轴起点)，结束位置叫做main end(主轴终点)；交叉轴的开始位置叫做cross start(侧轴起点)，结束位置叫做cross end(侧轴终点)。
- 项目默认沿主轴排列，其方向为元素的文本流方向。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
【定义一个弹性盒子】
- display: flex：将对象作为弹性伸缩盒显示。
- display: inline-flex：将对象作为内联块级弹性伸缩盒显示。
两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。 Webkit 内核的浏览器，必须加上-webkit前缀。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
【容器的属性】
（1）flex-direction：flex-direction属性决定主轴的方向（即项目的排列方向）。
.box { flex-direction: row | row-reverse | column | column-reverse; } row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。
（2）flex-wrap：默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
（3）flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box { flex-flow: <flex-direction> || <flex-wrap>; }（4）justify-content：justify-content属性定义了项目在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around; } flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
（5）align-items：align-items属性定义项目在交叉轴上如何对齐。
.box { align-items: flex-start | flex-end | center | baseline | stretch; } flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
（6）align-content：align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。
【弹性子元素属性】
属性
描述
order
设置弹性盒子的子元素排列顺序。
flex-grow
设置或检索弹性盒子元素的扩展比率。
flex-shrink
指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis
用于设置或检索弹性盒伸缩基准值。
flex
设置弹性盒子的子元素如何分配空间。
align-self
在弹性子元素上使用。覆盖容器的 align-items 属性。
（1）order：order属性定义项目的排列顺序。数值越小，排列越靠前，可以为负值，默认为0。
.item { order: <integer>; }
（2）flex-grow：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item { flex-grow: <number>; /* default 0 */ }
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
（3）flex-shrink：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item { flex-shrink: <number>; /* default 1 */ }
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
- 负值对该属性无效。
（4）flex-basis：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item { flex-basis: <length> | auto; /* default auto */ }它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
（5）flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。（6）align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
3.3，增强属性
box-shadow属性：用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。
box-shadow:inset offset-x offset-y blur-radius spread-radius color,....; – inset： 有inset 则为内阴影，没有insert 则为外阴影，默认为外阴影。 – offset-x：横向阴影的大小，正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。 – offset-y：纵向阴影的大小，值同offset-x。 – blur-radius：阴影的模糊程度，值越大，阴影越模糊。 – spread-radius：阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和盒子同样大。使用insert的时候offset-x，offset-y的值的意义和外阴影是相反的，正值是左边，上边。负值是右边，下边。
阴影应用：
- 立体按钮：active伪类来实现按下时效果的动画，通过box-shadow的inset的内阴影的转换，形成视界上突出和凹陷的效果。这里值得讲的是height和line-height的使用，height用来定死高度，然后通过line-height的高度变化实现active时文字的下移效果，更逼真3D效果。没有按下时：line-height=height-offsety,按下active时：line-height=height+offsety。
- 四周阴影实现：通过对box-shadow使用的理解，我们想要一个div的四周都有阴影的话，可能首先想到的是通过box-shadow的四周阴影叠加来实现。
很明显，这个四周阴影的效果很不符合预期，缺少了2个角的阴影，这种方式实现四周阴影是不行的。但是box-shadow还有一个属性spread-radius用来扩大阴影，我们可以借助它来实现四周阴影。
.outshadow{ width:120px; height:120px; background:#0C58A7; box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.8); }
- 单边阴影实现：box-shadow的单边阴影效果的实现同样要借助spread-radius参数来实现。实现原理很简单，右边阴影8px，下边阴影2px，我们通过spread-radius把阴影范围缩小了2px，那么下边阴影就隐藏到了div元素的后面，右边的阴影留在外面的就剩下了6px。这样单边阴影的效果就实现了，你可以根据需要选择哪个边有阴影。不过如果你细心的话可以看到下面还是有略微的阴影效果，这个是blur-radius造成的，那么我们的spread-radius要设置为 2px+6px=8px，那么下边就完全没有阴影了。
.outshadow{ width:120px; height:120px; background:#0C58A7; box-shadow: 8px 2px 2px -4px rgba(0,0,0,0.8); }
box-sizing属性：当为一个盒元素同时设置border、padding和width或height属性时，在不同的浏览器下会有不同的尺寸。特别是在IE浏览器中，width和height是包含border和padding的。为此，要写大量的hack，以满足不同浏览器的需要。
CSS3为盒模型进行了改善，新增的box-sizing属性可用于定义width和height的计算方法，可自由定义是否包含border和padding。
- 在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
- 在怪异模式下，一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
#box { width: 400px; height: 400px; margin: 70px; padding: 20px; border: 5px solid black; } #child { width: 100%; height: 100%; }标准模式，我们设置#box的宽高为400px，其对应的content（内容区）宽高为400px，父元素的高度为#box内容区高度+上下border+上下padding，结果为450px子元素的高度为#box内容区高度。
box-sizing: border-box;标准模式，我们设置#box的宽高为400px，其对应的content（内容区）宽高却是 width-上下padding-上下border，结果为350px;父元素的高度为#box内容区高度+上下border+上下padding，结果为400px；子元素的高度为#box内容区高度350px。
标准盒模型中，css设置width为x，对应元素content便为x而在怪异模式中，元素的content宽度是由x减左右padding，再减左右margin得出的。
box-sizing:content-box|padding-box|border-box|inherit – content-box:默认值，计算方法为width/height=content，表示指定的宽度和高度仅限内容区域，边框和内填充的宽度不包含在内 – padding-box:计算方法为width/height=content+padding,表示指定的宽度和高度博阿寒内填充和内容区域，边框宽度不包含在内 – border-box:计算方法为width/height=content+padding+border,表示指定的宽度和高度包含边框、内填充和内容区域 – inherit：表示继承父元素中box-sizing属性的值
box-sizing用在什么场景？
（1）布局时：两个相同的DIV，其中一个给出padding值后则结果大不相同。
（2）box-sizing统一form表单风格：当我们想让这两个表单与一个登录按钮的长度相同时，这时我们试着把它们三个的width的值都设置为100%，这里看到它们三个的width都设置为100%，而它们的长度并不一致，由此可以看出表单和按钮的padding、border值不统一，这时我们给表单的属性中添加一个box-sizing：border-box；此时表单和按钮的长度保持一致。
3.4，弹性盒模型box
开启弹性盒模型：将display属性值设置为box或者inline-box。但是目前没有浏览器支持box属性值，为了能够兼容webkit内核盒gecko内核的浏览器，可以分别使用-webkit-box和-moz-box属性。
【box-orient】控制盒模型内的元素流动布局方向，包括横排和竖排。
box-orient:horizontal|vertical|inline-axis|block-axis|inherit - horizontal:将盒子元素从左到右在一条水平线上显示它的子元素 - vertical:将盒子元素从上到下在一条垂直线上显示它的子元素 - inline-axis:将盒子元素沿着内联轴显示它的子元素 - block-axis:将盒子元素沿着块轴显示它的子元素 - inherit：表示盒子继承父元素的相关属性【box-direction】控制弹性盒模型中子元素的排列顺序。
box-direction:normal|reverse|inherit - normal:正常显示顺序 - reverse:反响显示顺序 - inherit:继承上级元素的显示顺序【box-ordinal-group】元素在盒模型中的具体位置。
box-ordinal-group:<integer> 参数integer代表子元素的位置序号，从1开始根据参数值从小到大排列；当不确定子元素的box-ordinal-group属性值时，其序号全部默认为1，并且相同序号的元素会按照其在文档中加载的顺序进行排列【box-flex】定义盒模型内部子元素是否具有空间弹性；当盒元素缩小或扩大时，被定义有空间弹性的子元素也会缩小或扩大。
box-flex:<value>【box-pack】设置弹性盒模型内部元素的水平对齐方式和垂直对齐方式。
box-pack:start|end|center|justify - start：表示所有子容器都分布在父容器的左侧，右侧留空 - end ：表示所有子容器都分布在父容器的右侧，左侧留空 - center ：表示所有子容器平均分布 - justify ：表示平均分配父容器中的剩余空间【box-align】设置弹性盒模型内部元素的水平对齐方式和垂直对齐方式。
box-align:start|end|center|baseline|stretch - start:表示子容器从父容器的顶部开始排列，剩余空间将显示在盒子的底部 - end:表示子容器从父容器的底部开始排列，剩余空间将显示在盒子的顶部 - center:表示子容器横向居中，剩余空间在子容器的两侧分配，上下各一半 - baseline:表示所有盒子沿着它们的基线排列，剩余空间可以前后显示 - stretch:表示每个子元素的高度被调整到适合盒子的高度显示，即所有子容器和父容器将保持同一高度
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
