网页布局三大核心：盒子模型、浮动、定位

页面布局要学习三大核心：盒子模型、浮动和定位。

传统网页布局的三种方式：标准流、浮动、定位。

标准流就是块级元素独占一行；行内元素会按照顺序从左至右排列，碰到父元素边缘自动换行。

这三种方式就像刘备、关羽、张飞。

网页布局的本质：利用CSS做盒子样式，摆放位置。标题<h>、段落<p>、盒子<h>。

---

盒子有 m b p c

清除内外边距：

不同浏览器带有默认的内外边距，因此我们在布局前，首先要清除下网页元素的内外边距。

方式：

* {

padding：0；/*清除内边距*/

margin:0; /*清除外边距*/

}

---

浮动

1 首先了解把块元素放在一行内？

使用行内块元素会产生 空隙

2 如何实现两个盒子左右对齐？

总结：有很多布局效果，标准流没有办法完成，此时利用浮动完成布局

浮动能改变标签的默认排列方式

网页布局准则：

纵向排列-标准流；横向排列-浮动

语法：

选择器  {  float : 属性值 ; }

浮动会贴着浮动

浮动特性（重难点）

1.浮动的元素不再保留原先位置，（会像我们迎面扑来），原来的位置会被别的占有

2.如果都设置浮动，则会以一行排列，直到位置不够，才落到第二行

3.添加了浮动都会有行内块元素的特点，不管什么元素

实际应用：

浮动元素经常搭配父级标准流，目的是限制浮动元素位置

先用标准流的父元素排列上下，之后内部子元素采取浮动排列左右

清除浮动？

也不是真正意义上的清除，而是限制浮动子元素

原因：

1 父元素不方便给高度（不知道子元素多少）

2 父元素高度设置为0的话，会被其他标准流父元素挤上去

前提：前提是父盒子本身没有高度，如果有高度就不用清除！！！

          清除浮动后，父级会根据浮动的盒子自动检测高度

操作：给父级添加overflow属性，值设置为hidden.

---

CSS定位

1 如果要实现某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子

这种情况下，使用标准流或浮动能实现吗？

2 实现某个盒子固定在屏幕

作用：

让盒子自由在某个盒子内移动或者固定在屏幕某个位置

组成：

定位=定位模式+边偏移

1）定位模式由CSS的position属性来设置，4个值：

static 静态定位,

静态定位就是标准流，很少用

relative 相对定位,（自恋型）

1 相对自己原来的位置; 2 原来在标准流的位置继续占有

例：position:relative;

      top:100px;

最典型应用就是给绝对定位当爹。。。。

absolute 绝对定位,（拼爹型）

是相对它的祖先来说的

语法：

选择器 { position : absolute ;}

注意：

1 没有父元素或父元素没有定位，则以浏览器为准

2 父元素有定位  ，则以父元素为准。爷爷有定位爸爸没定位，就以爷爷为准

3 绝对定位不占有标准流位置，典型轮播图

实际开发中：子绝父相，绝对定位使用，父必须要有定位

fixed 固定定位

语法：

选择器 { position : fixed; }

以浏览器可视窗口做为 参照点，固定定位也不占有标准流位置，是特殊的绝对定位

2）边偏移就是盒子最终位置，4个属性：

top,bottom,left,right

扩展：

绝对定位的盒子垂直居中算法

固定版心算法