1、网页布局的三种机制

普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；

行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em；

浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；

定位：将盒子在浏览器的某一个位置，后期会经常用到；

2、浮动相关1、为什么要使用浮动

我们需要使用浮动来实现网页的布局效果，比如左右布局；

实际工作中我们一般都是用浮动来进行页面布局的；

2、浮动的作用及特点浮动布局的原理应用

让元素脱离文档流，进行页面效果的布局；

作用：

让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；

属性：float取值：left  right  none（不浮动默认就是）  浮动的特点浮：

浮动之后的元素脱离了标准流；

漏：

盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特

1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

3、常见布局

实际工作中我们最常见的布局就是左右布局和左中右布局

（1）左右布局

方法1：一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子右浮动float:right;

方法2：:一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子左浮动float:left;，如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可；

（2）左中右布局

一个固定宽高的父级盒子（高度不一定固定）嵌套了左中右三个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子坐浮动float:left;，第三个盒子右浮动float:right;

然后给中间的盒子设置margin-left实现三个盒子之间的外边距相同；

（3）浮动布局的注意事项

01、利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；

02、如果要用浮动布局做修改，所有的父级盒子都必须浮动，不然不符合规范

4、实际的导航布局Html结构

• 实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；

这么做的好处

01 li嵌套a语义清晰；

02 如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；

03  友情链接类似的小导航可以直接用a链接完成；

导航布局思路

• 实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；

• 给li设置固定的宽高（如果文字不一样多我们可以不设置宽度，用padding撑开）

• 然后给li设置float:left;让li在一行显示

如果想要鼠标经过a有一些样式，将a用display:block;转化为块元素，设置宽高和li一致；

5、浮动元素与父盒子的关系

• 浮动之后的子元素是以父级盒子为参照对齐的，不会与父级的边框重叠，也不会超出父级盒子的内边距；

6、浮动元素与兄弟盒子的关系

• 1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示；

• 2、做布局的时候所有的盒子必须都浮动，才能完成效果；

• 3、浮动的元素顶端对齐，两个元素之间没有缝隙

7、列表布局父级盒子装不下最后一个掉下来问题

布局的时候我们的版心是固定的，如果给子级盒子添加了margin-left或者margin-right，最后一个子级盒子会掉下来，

解决方案：直接给父级盒子的宽度大于版心盒子即可；

8.通栏效果布局

根据屏幕的宽度自适应最外面盒子的宽度，里面有个版心居中；

布局思路：一个100%宽度的父级盒子，设置高度，然后里面嵌套一个版心盒子居中显示；

3、定位1、定位布局：

定位模式+边偏移（方向英文更改）

边偏移：

top、bottom、left、right属性；

定位的精髓：

利用更改方向英文来进行位置设置；

2、定位模式

常见的定位模式分为：相对定位、绝对定位、固定定位

定位属性

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

相对定位：position:relative;

参照物：自己本身原来的位置，进行位置的偏移；

位置偏移：通过改变方位名词（top/bottom/left/right）的值来设置；

特点：相对于自己原来的位置为参照物进行位移，属于占位定位，盒子仍然在标准流里面；

绝对定位：position:absolute;

注意:绝对定位完全脱离了文档流；

参照物：默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位；

情况1：父级没有定位的时候以浏览器为参照物

情况2：父级盒子有定位的时候，参照物就是父级元素；

绝对定位的参照物选定

绝对定位的参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照物；

绝对定位的特点

绝对定位是完全脱离了标准流不占位的，参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照定位；

子绝父相的应用

子绝父相：子级绝对，父级相对，父级盒子做了相对定位定位了，但是依然占位，不会影响其他盒子的布局；

注意：其实实际工作中不一定是子绝父相，其实只要父级有了定位属性，子级就会以父级为参照，但是一般用的最多的还是子绝父相；

固定定位： position:fixed;

• 参照物：电脑屏幕（可视窗口）；

• 注意：固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没任何关系，IE6不支持固定定位，但是我们现在不用管它，直接使用就可以；

3、定位的盒子居中对齐问题描述

如果盒子的显示模式为块元素，而且有固定的宽度我们可以直接用margin：auto;让盒子水平居中；

如果盒子定位了margin:auto;不会生效，那我们如何让定位的盒子居中显示？

情况1：如果用了相对定位position: relative;盒子还是可以同margin: auto;居中；

情况2：那么如果用了绝对定位position: absolute;和固定定位position: fixed;盒子就不能使用margin:auto；居中显示：

解决方案：

• 设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半，让盒子水平居中；

• 设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半，让盒子垂直居中；

4、banner 滚动图片的布局思路（重要）

一个父级盒子作为总体的大盒子，然后里面的滚动图片用ul>li>a实现，两侧的小箭头一般我们用单独的span或者div实现（css里面用子绝父相进行定位实现），切换的小圆点用ol>li实现（css里面用子绝父相将ol进行定位，然后将里面的li浮动控制外边距即可）；

Current是默认选中的样式

5、实现固定定位的盒子跟随版心定位

设置left：50%；然后设置margin-left:版心宽度的一般 + 盒子自己的宽度 +随意的值；

6、logo的优化做法

*logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要

h1里面在放一个连接，可以返回首页的， 给连接一个 大小 和 logo 的背景图片

连接 里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来

要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法

直接给font-size: 0; 就看不到文字了， 京东的做法。

最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了

7、tab选项卡布局思路

一个父级盒子固定宽高，里面嵌套上下两个盒子，上面的盒子我们放tab的导航，下面的盒子放tab的内容盒子，注意：我们有几个导航内容就有几个内容盒子，然后让内容盒子全部隐藏，但是注意让其中的一个显示（给它添加一个行内样式style="display: block;"）

1、网页布局的三种机制

普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；

行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em；

浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；

定位：将盒子在浏览器的某一个位置，后期会经常用到；

2、浮动相关1、为什么要使用浮动

我们需要使用浮动来实现网页的布局效果，比如左右布局；

实际工作中我们一般都是用浮动来进行页面布局的；

2、浮动的作用及特点浮动布局的原理应用

让元素脱离文档流，进行页面效果的布局；

作用：

让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；

属性：float取值：left  right  none（不浮动默认就是）  浮动的特点浮：

浮动之后的元素脱离了标准流；

漏：

盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特

1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

3、常见布局

实际工作中我们最常见的布局就是左右布局和左中右布局

（1）左右布局

方法1：一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子右浮动float:right;

方法2：:一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子左浮动float:left;，如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可；

（2）左中右布局

一个固定宽高的父级盒子（高度不一定固定）嵌套了左中右三个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子坐浮动float:left;，第三个盒子右浮动float:right;

然后给中间的盒子设置margin-left实现三个盒子之间的外边距相同；

（3）浮动布局的注意事项

01、利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；

02、如果要用浮动布局做修改，所有的父级盒子都必须浮动，不然不符合规范

4、实际的导航布局Html结构

• 实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；

这么做的好处

01 li嵌套a语义清晰；

02 如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；

03  友情链接类似的小导航可以直接用a链接完成；

导航布局思路

• 实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；

• 给li设置固定的宽高（如果文字不一样多我们可以不设置宽度，用padding撑开）

• 然后给li设置float:left;让li在一行显示

如果想要鼠标经过a有一些样式，将a用display:block;转化为块元素，设置宽高和li一致；

5、浮动元素与父盒子的关系

• 浮动之后的子元素是以父级盒子为参照对齐的，不会与父级的边框重叠，也不会超出父级盒子的内边距；

6、浮动元素与兄弟盒子的关系

• 1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示；

• 2、做布局的时候所有的盒子必须都浮动，才能完成效果；

• 3、浮动的元素顶端对齐，两个元素之间没有缝隙

7、列表布局父级盒子装不下最后一个掉下来问题

布局的时候我们的版心是固定的，如果给子级盒子添加了margin-left或者margin-right，最后一个子级盒子会掉下来，

解决方案：直接给父级盒子的宽度大于版心盒子即可；

8.通栏效果布局

根据屏幕的宽度自适应最外面盒子的宽度，里面有个版心居中；

布局思路：一个100%宽度的父级盒子，设置高度，然后里面嵌套一个版心盒子居中显示；

3、定位1、定位布局：

定位模式+边偏移（方向英文更改）

边偏移：

top、bottom、left、right属性；

定位的精髓：

利用更改方向英文来进行位置设置；

2、定位模式

常见的定位模式分为：相对定位、绝对定位、固定定位

定位属性

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

相对定位：position:relative;

参照物：自己本身原来的位置，进行位置的偏移；

位置偏移：通过改变方位名词（top/bottom/left/right）的值来设置；

特点：相对于自己原来的位置为参照物进行位移，属于占位定位，盒子仍然在标准流里面；

绝对定位：position:absolute;

注意:绝对定位完全脱离了文档流；

参照物：默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位；

情况1：父级没有定位的时候以浏览器为参照物

情况2：父级盒子有定位的时候，参照物就是父级元素；

绝对定位的参照物选定

绝对定位的参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照物；

绝对定位的特点

绝对定位是完全脱离了标准流不占位的，参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照定位；

子绝父相的应用

子绝父相：子级绝对，父级相对，父级盒子做了相对定位定位了，但是依然占位，不会影响其他盒子的布局；

注意：其实实际工作中不一定是子绝父相，其实只要父级有了定位属性，子级就会以父级为参照，但是一般用的最多的还是子绝父相；

固定定位： position:fixed;

• 参照物：电脑屏幕（可视窗口）；

• 注意：固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没任何关系，IE6不支持固定定位，但是我们现在不用管它，直接使用就可以；

3、定位的盒子居中对齐问题描述

如果盒子的显示模式为块元素，而且有固定的宽度我们可以直接用margin：auto;让盒子水平居中；

如果盒子定位了margin:auto;不会生效，那我们如何让定位的盒子居中显示？

情况1：如果用了相对定位position: relative;盒子还是可以同margin: auto;居中；

情况2：那么如果用了绝对定位position: absolute;和固定定位position: fixed;盒子就不能使用margin:auto；居中显示：

解决方案：

• 设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半，让盒子水平居中；

• 设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半，让盒子垂直居中；

4、banner 滚动图片的布局思路（重要）

一个父级盒子作为总体的大盒子，然后里面的滚动图片用ul>li>a实现，两侧的小箭头一般我们用单独的span或者div实现（css里面用子绝父相进行定位实现），切换的小圆点用ol>li实现（css里面用子绝父相将ol进行定位，然后将里面的li浮动控制外边距即可）；

Current是默认选中的样式

5、实现固定定位的盒子跟随版心定位

设置left：50%；然后设置margin-left:版心宽度的一般 + 盒子自己的宽度 +随意的值；

6、logo的优化做法

*logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要

h1里面在放一个连接，可以返回首页的， 给连接一个 大小 和 logo 的背景图片

连接 里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来

要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法

直接给font-size: 0; 就看不到文字了， 京东的做法。

最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了

7、tab选项卡布局思路

一个父级盒子固定宽高，里面嵌套上下两个盒子，上面的盒子我们放tab的导航，下面的盒子放tab的内容盒子，注意：我们有几个导航内容就有几个内容盒子，然后让内容盒子全部隐藏，但是注意让其中的一个显示（给它添加一个行内样式style="display: block;"）