练习
1.网易考拉下拉菜单 2.爱奇艺新闻 3.ps滤镜菜单 4.爱奇艺列表
7 布局
7.1 盒子模型
网页设计，首先要做好整体的布局，网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置，因此会经常用到一些内容、填充、边框、边界等属性，html布局元素经过不同的嵌套与位置的摆放，就类似于日常生活中的用盒子装东西，把每一个布局元素看成一个盒子，引出了盒子模型
元素框的最内部分是实际的内容，直接包围内容的是内边距（padding）内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。 在 CSS 中，width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸
7.1.1 margin
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 有四个值的时候：margin:10px 5px 15px 20px;（顺序依次是 上 右 下 左）； 有三个值的时候：margin:10px 5px 15px; （顺序依次是 上 左右 下）； 有两个值的时候：margin:10px 5px; （顺序依次是 上下 左右） 有一个值的时候 margin：10px；（代表四个值都是10px）
#div1{
margin:10px;/*代表四个值都是10px*/
}
#div2{
margin:10px 5px; /*顺序依次是 上下 左右*/
}
#div3{
margin:10px 5px 15px;/*顺序依次是 上 左右 下*/
}
#div4{
margin:10px 5px 15px 20px;/*顺序依次是 上 右 下 左*/
}
7.1.2 padding
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。 padding 简写时值的顺序与margin相同
块级元素：块级元素独占一行，每次都从新行上开始，宽度，行高以及外边距和内边距都是可以设置的，如果宽度省略的话，默认充满整个容器，并且可以容纳其他行内元素，支持所有的css属性 行内元素：在一行内显示，不单独占行，不可以设置宽高，宽高被内容撑开，不支持上下margin，代码换行被解析 块级元素行内元素区别？ 为什么img input 行内标签 但是可以设置宽和高？ 替换元素：根据元素的属性来显示样式 img input select 不可替换元素：根据原来预设好功能来显示 strong b 块级元素和行内元素转换
display:block /*行内元素转换成块级元素 独占一行*/
display:inline /*块级元素转换成行内元素*/
display:inline-block; /*行内元素转换成 行内块可以支持宽高.*/
练习：
1、螺钉课堂导航 2、百度百家导航 3、京东爱逛导航 4、京东电子数据导航 5、爱奇艺导航
7.2 浮动
普通流：指的是在不使用其他的与排列和定位相关的特殊css规则时，各种元素的自然排列规则
浮动：脱离标准文档流并且可以左右移动
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
浮动的作用：可以很方便的布局 例如： 两个div左右布局 在一行内显示
浮动带来的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
border: 4px solid red;
}
.left{
300px;
height: 200px;
float: left;
background-color: #ccc;
}
.right{
500px;
height: 200px;
float: right;
background-color: #FFA500;
margin-left: 5px;
}
.footer{
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="wrap" >
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
解决浮动带来问题的方法：
父盒子设置高度
.wrap{
border: 4px solid red;
height: 200px;
}
添加额外标签 用clear：both
<div class="wrap" >
<div class="left"></div>
<div class="right"></div>
<div style="clear: both;"></div>
</div>
使用br标签和它的属性
<div class="wrap" >
<div class="left"></div>
<div class="right"></div>
<br clear="both" />
</div>
父元素设置overflow:hidden
.wrap{
border: 4px solid red;
overflow: hidden;
zoom: 1;
}
使用:after伪元素
.clearfix{
*zoom: 1;
}
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗的讲，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，外面的元素也不会影响到里面的元素,同时BFC任然属于文档中的普通流。
生成BFC的元素
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
BFC布局规则：
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的
格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之
也如此。
6、计算BFC的高度时，浮动元素也参与计算
haslayout
haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，使用布局概念来控制元素的尺寸和定位。从表现上来说，hasLayout 可以等同于 BFC。 触发hasLayout的条件：
position: absolute
float: left|right
display: inline-block
除 “auto” 外的任意值
height: 除 “auto” 外的任意值 （例如很多人闭合浮动会用到 height: 1% ）
zoom: 除 “normal” 外的任意值
在 IE7 中，overflow 也变成了一个 layout 触发器：
overflow: hidden|scroll|auto (这个属性在IE之前版本中没有触发 layout 的功能。)
overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的属性，尚未得到浏览器的
广泛支持。他们在之前IE版本中同样没有触发 layout 的功能）
兼容方法
1 使元素即生成了 block formatting context，又触发了 hasLayout
1.1 对于触发 hasLayout 的元素，通过 CSS 设置，使它产生 block
formatting context；
1.2 生成 block formatting context 但是没有触发 hasLayout 的元素，
通过设置 'zoom:1'，使其触发 hasLayout。
1 使元素即没有触发 hasLayout，又没有创建 block formatting context。
螺钉课堂视频课程地址：http://edu.nodeing.com