软件开发求职招聘交流微信群 http://liangssw.com/bozhu/12543.html
主要内容
盒模型的概念标准盒模型怪异盒模型弹性盒模型学习目标
一、CSS盒子模型(BoxModel)
1、概念
所有HTML元素可以看作盒子，在CSS中，boxmodel这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(BoxModel)：
不同部分的说明：
1）Margin(外边距)-清除边框外的区域，外边距是透明的。
2）Border(边框)-围绕在内边距和内容外的边框。
3）Padding(内边距)-清除内容周围的区域，内边距是透明的。
4）Content(内容)-盒子的内容，显示文本和图像。
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。
下面看一个例子：
HTML代码如下：
Css代码如下：
效果图如下：
控制台中的盒模型如下：
通过代码和图给大家简单讲解一下，最中间蓝色区域就是我们定义的宽度和高度，也就是content的宽度和高度，当我们给padding加一个宽度的时候整个整体也变宽了，padding的距离就是绿色部分，在padding外面就是border，浅黄色部分，由图也很明显的看出也增加了整个整体的宽度，border外面是margin部分，深黄色区域。
二、标准盒模型
概念W3C盒子模型(标准盒模型)
根据W3C的规范，元素内容占据的空间是由width属性设置的，而内容周围的padding和border值是另外计算的；即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。
2、内容区域（content）
Content内容区域包含宽度（width）和高度（height）两个属性。
块级元素默认宽度为%，行内元素默认宽度是由内容撑开，不管块级元素还是行内元素，默认高度都是由内容撑开。
块级元素可以设置宽高属性，行内元素设置宽高属性不生效。
宽度（width）和高度（height）可以取值为像素（px）和百分比（%）。
3、内边距（Padding）
3.1定义
CSSpadding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
3.2可能的值
1）定义一个固定的填充(像素,pt,em,等)
2）使用百分比值定义一个填充
3.3单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
分别代表：
（1）上内边距是25px
（2）右内边距是50px
（3）下内边距是25px
（4）左内边距是50px
3.4简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。
这就是所谓的简写属性。所有的填充属性的简写属性是padding:
Padding属性，可以有一到四个值。
（1）padding:25px50px75pxpx;
上填充为25px
右填充为50px
下填充为75px
左填充为px
（2）padding:25px50px75px;
上填充为25px
左右填充为50px
下填充为75px
（3）padding:25px50px;
上下填充为25px
左右填充为50px
（4）padding:25px;
所有的填充都是25px
3.5padding需要注意的问题
padding会撑大容器
3.6padding实现导航条
4、边框（Border）
4.1定义
CSS边框属性允许你指定一个元素边框的样式和颜色。
4.2边框样式
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
border-style值:
none:默认无边框
dotted:定义一个点线边框
dashed:定义一个虚线边框
solid:定义实线边框
double:定义两个边框。两个边框的宽度和border-width的值相同
4.3边框宽度
您可以通过border-width属性为边框指定宽度
4.4边框颜色
border-color属性用于设置边框的颜色
您还可以设置边框的颜色为transparent。
注意：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
4.5边框单独设置各边
在CSS中，可以指定不同的侧面不同的边框：
上面的例子也可以设置一个单一属性：
border-style属性可以有1-4个值：
（1）border-style:dottedsoliddoubledashed;
上边框是dotted
右边框是solid
底边框是double
左边框是dashed
（2）border-style:dottedsoliddouble;
上边框是dotted
左、右边框是solid
底边框是double
（3）border-style:dottedsolid;
上、底边框是dotted
右、左边框是solid
（4）border-style:dotted;
四面边框是dotted
上面的例子用了border-style。然而，它也可以和border-width、border-color一起使用。
4.6边框简写属性
上面的例子用了很多属性来设置边框。
你也可以在一个属性中设置边框。
你可以在border属性中设置：
border-widthborder-style(required)border-color
5、外边距（Margin）
5.1定义
CSSmargin(外边距)属性定义元素周围的空间。
5.2取值
（1）Auto
（2）定义一个固定的margin
（3）定义一个使用百分比的边距
5.3单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
5.4简写属性
为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。
所有边距属性的简写属性是margin:
margin属性可以有一到四个值。
（1）margin:25px50px75pxpx;
上边距为25px右边距为50px下边距为75px左边距为px（2）margin:25px50px75px;
上边距为25px左右边距为50px下边距为75px（3）margin:25px50px;
上下边距为25px左右边距为50px（4）margin:25px;所有的4个边距都是25px5.5margin需要注意的问题
（1）外边距合并问题
垂直方向上外边距相撞时，取较大值 注意：浮动元素的外边距不合并
效果图如下：
（2）margin-top问题
当给子元素设置margin-top时，父元素会跟着子元素一起下来：
解决方法：
①父元素设置overflow:hidden;②父元素或者子元素设置float③父元素设置border:1pxsolidtransparent;④父元素设置padding-top:1px;
效果如下：
5.6margin练习
三、怪异盒模型
1.概念
IE盒子模型(怪异盒模型)
在该模式下，浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height+margin。
2.Box-sizing
CSS3指定盒子模型种类
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing:content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
box-sizing:border-box;//为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
四、弹性盒模型（flexbox）
1.定义
弹性盒子是CSS3的一种新的布局模式。
CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
2.CSS3弹性盒内容
弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成。
弹性容器通过设置display属性的值为flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
3、父元素上的属性
3.1display属性
display:flex;开启弹性盒
display:flex;属性设置后子元素默认水平排列
3.2flex-direction属性
（1）定义
flex-direction属性指定了弹性子元素在父容器中的位置。
（2）语法
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
（3）实例
3.3justify-content属性
（1）定义
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（mainaxis）对齐
（2）语法
各个值解析:
①flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
②flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
③center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
④space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
⑤space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
效果图展示：
（3）实例
3.4align-items属性
（1）定义
align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
（2）语法
各个值解析:
①flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
②flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
③center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
（3）实例
四、子元素上的属性
4.1flex-grow
flex-grow根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
默认为0，即如果存在剩余空间，也不放大。如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即%，超出按%
五、浏览器内核
浏览器最重要或者说核心的部分是“RenderingEngine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
六、厂商前缀
css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程，css中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险，同时也会出现有的浏览器厂商支持的好，有的支持的不好，所以就用厂商前缀加以区分。
CSS3中一些新功能也是目前导致各大浏览器不兼容的一个原因，这些新功能的出现，浏览器厂商们变便开始尝试融合、试验，所以就在这些功能前加上自己的特定前缀来执行自己的特定解决方法，为了让这些功能能在完全确认下来前使用；
下面就是我们经常用到的前缀及其兼容浏览器：
-webkit-
AppleWebkit团队，兼容Android,Safari,Chrome等；
-moz-
Mozilla，兼容Firefox等;
-ms-
Microsoft基金会，兼容IE;
-o-
兼容Opera
因此对于一些较新的css3特性，需要添加以上前缀兼容每个浏览器，例如实现线性渐变，标准写法是linear-gradient()，但是一下浏览器还未完全确定这一特性，就在前面添加一个前缀来进行试验执行，如-webkit-linear-gradient；
下面是开发中常用的兼容写法：
七、CssHack
由于不同厂商的浏览器，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不一样，因此会导致生成的页面效果不同，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
csshack并不是什么技术，只是针对于在不同浏览器上的bug的解决方案。一般都是利用各浏览器的支持CSS的能力和BUG来进行的。
hack这个词，看翻译也知道它属于是一种“暴力”的作法，尽量找到通用方法而减少对CSSHack的使用，大规模使用CSSHack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题。（对当前浏览器版本起作用的hack，也许升级一下，界面就又乱了）
下面我们学习常用的几个hack，主要仅针对IE浏览器，IE6以下不再考虑。
1.条件hack
通过上面三个例子我们可以发现：
条件注释它的格式为
大于gt
大于或等于gte
小于lt
小于或等于lte
非指定版本！
这些条件帮我们更精确的筛选浏览器版本
2、属性级Hack
同一段文字在IE6,7,8显示为不同颜色
八、作业
转载请注明地址:http://www.1xbbk.net/jwbrc/1930.html
