浮动

# 复习

1.溢出 overflow

2.元素显示

-块级 div h1~h6 p ul ol li

-内联(行内)span a i

 -行内块 img button input

3.隐藏和显示

4.盒子模型

-内容-内边距-边框-外边距

-标准盒子模型和怪异盒子模型

标准和模型宽度就是你设置的宽度,如果加上内边距和边框,元素变大了 怪异盒模型,设置的宽度= 实际宽度(实际宽度会被重新计算)+内边距+外边距

外边距的怪相

  - 外边距合并现象,垂直方向的兄弟元素,外边距取大的

  - 外边距左和上,会让下和右不会

  - 外边距溢出(解决方法)

什么不出问题用什么

# 浮动

- 正常元素会按照内联元素和块级元素的文档流方式排列,一旦排列方式不正常，会有脱离文档流的可能

- 元素浮动:float:left;float:right;元素脱离当前文档流，在父元素的左侧或右侧对对齐,子元素无法离开父元素

# 子元素浮动以后发生的情况

- 父元素相关影响

父元素如果没有高度,则因子元素的浮动，造成父元素没有高度，对父元素产生影响

因为子元素浮动，父元素失去高度，导致父元素的下方兄弟向上移动，且被其子元素覆盖

# 对浮动元素自己的影响

子元素一旦浮动,就不再自占一行

自己不在文档流中

margin:auto;就无法在父元素内水平居中了

当没有设置宽高的子元素浮动后,元素的宽高和高度取决于内部分

当内联元素设置浮动属性,则立即变成块级元素无需display:block;

# 元素浮动和兄弟元素的影响

当父元素中的所有子元素都浮动,就会形成横向排列效果(需要的)

# 前面的元素未浮动

子元算浮动,没有影响前面的未浮动元素

是重点容易忘记或者混淆

# 后面的元素未浮动

子元素浮动，影响后面的未浮动元素,会发生遮盖

# 文字和内联元素

不会被前方浮动元素遮盖，会形成环绕显示，围绕着上方浮动元素四周显示

如果被遮盖的下方兄弟元素中有文字或内联元素,浮动元素会遮盖块级元素,但文字和其内联元素会依然形成环绕显示,不被遮盖

# 所有子元素都浮动

当父级的宽度小于浮动所有子元素相加的总宽度时,子元素会从最后一个开始依次换行显示

# 尽量避免以下情况

浮动元素高度不一致,换行后会因为元素的向前占位,无法保持美观效果

# 清除浮动的负面效果(父元素的高度坍塌)

- 方案一：给浮动元素加合适的高度

优势：简单好写,容易理解

劣势：当子元素高度不一致时或者高度未知时，无法确定高度

常用场景:已知高度,子元素高度相同.导航,小页头 一行文字的横向列表

- 方案二

利用BFC(overflow)使父元素寻找子元素的高度，将浮动元素的高度计算入父级元素的高度

父元素使用overflow:hidden/auto 将子元素高都计算到父元素高度

优势：不用自己计算,即使高度不一致也能保证撑开

劣势：如果父元素中有溢出元素,会被裁掉或者出现拖拽条

常用场景：位置高度的子元素且没有溢出部分.如：卡片、横向列表

- 方案三

父级元素同样浮动也可以解决自身高度坍塌

前提是父元素本身确实需要浮动,但自身的浮动还要解决再上一层的父元素高度坍塌

优势:借助布局效果,父元素同时浮动解决自身高度

劣势:还要解决父元素的父元素高度坍塌

- 方案四

利用清除浮动的类,帮助父级解决高度坍塌

前提:单独是单独创建一个"class"类用于清除父级的高度坍塌

.clearfix::after{

  content: "";

/* 块级元素,清楚自己兄弟左右兄弟因为浮动产生的负面效果*/

  display: block;

  clear: both;

    }

 /* 低版本IE(了解) */

.clearfix{zoom: 1;}

优势:什么情况都可以用,只要把这个类加到父级的class里就可以解决子元素浮动导致父元素自身高度坍塌

劣势:需要背下来,经常忘记写类名后的::after

# 布局

- pc端布局

特点:有一个固定的宽度包裹着所有需要用户看到的部分在整个浏览器中水平居中

必须要设置的属性

居中区域的宽度

(1)由产品决定,考虑目标受众

(2)最小960px、1200、或以上

margin：auto

pc端:因为很多元素有自己的样式,但不居中，所以要去掉

每个页面都设计样式重置，因此可以把自己需要的样式重置单独写一个css,那个页面使用就那个页面引用这个css文件即可

- 响应式布局

- 移动端布局

框架

手写

- 相关练习素材

百度搜pc端高保真原型

站长素材->网页模板

- 练习移动端布局

我图网,千图网,昵图网

站酷

下图标素材

阿里巴巴矢量图标库(新浪微博进入,git账号进行)

easyicon(以前免费)