前端学习笔记----Day10_水平布局float

定位方案（Position Schemes）

三种定位方案对比.png

• 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

float 水平布局

• none (default)

• left

• right

• 元素一旦浮动后, 脱离标准流

• 朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止

• 定位元素会层叠在浮动元素上面

float规则

1. 不能与行内级内容层叠，行内级内容将会被浮动元素推出

• 比如行内级元素、inline-block元素、块级元素的文字内容, 都会被推出

• 利用此特性可以实现文字环绕功能

  
  musk.png

2. 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

• 设置line-height或者添加其他元素的时候会出现

  
  demo1.png

3. 浮动元素之间不能层叠

   
   demo2.png

demo3.png

4. 浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

demo4.png 效果及代码实现.png

效果

1. 在浮动流中, 向相同方向浮动的元素, 先浮动的在前面

• 元素浮动之前在第几行, 浮动后就在第几行

div标签里面的内容是行内级的,并且不能被浮动元素覆盖

2. 多个浮动元素效果

• 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）

• 原因, 浮动有顺序

浮动顺序.png

3. 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

向下浮动.png

training 原理部分

• 左浮找左浮,右浮找右浮

常用场景

• 解决行内级元素、inline-block元素的水平间隙问题

页数索引.png

• 实现豆腐块效果

豆腐块效果.png

重置样式 css reset

/* 重置样式 - CSS Reset */
ul, li, h2 {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    color: #000;
    text-decoration: none;
}</pre>

练习二 伪元素实现 使用::after设置下划线

• 小图标, 不具有特别意义的, 用精灵图(背景图)实现,没必要用img

• ::after和::before 的display默认是inline

• content不能省略

• 可以用::before和::after取代子元素, but不能滥用. eg.购物车图标

• 只能用于可有可无的元素, 重要内容不要用. reason: 本质是Css样式, 可能加载失败

清浮动的原因----高度坍塌(脱标的浮动元素的高度被算入父元素)

• 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

• 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

• 清浮动(清理浮动、清除浮动):解决父元素高度坍塌问题的过程

• 目的: 让父元素计算总高度的时候，把浮动子元素的高度算进去

清浮动常见方法

1. (推荐) 终极解决方案.

• 给父元素增加::after伪元素

• 不过伪元素不支持IE浏览器

• 好处: 纯CSS样式解决，结构与样式分离

.container::after {
    content: "";
    display: block;
    clear: both;
    height: 0;/*兼容旧浏览器*/
    visibility: hidden;/*兼容旧浏览器*/
}
.container {
    *zoom: 1;/*兼容IE6~7浏览器*/
}

• 绑定类名方法. 很常用

/*也可以用外联样式表*/
<link rel="stylesheet" href="css/clear-fix.css">
/*在要使用的元素上加上类*/
<ul class="clear-fix">

其他解决方案(不推荐)

1. 给父元素设置固定宽高 扩展性不好

2. 给父元素也设置浮动(很有可能导致所有元素浮动, 因为是一家子^^) ---------- BFC问题导致

3. 让父元素设置为绝对定位元素----- 因为绝对定位元素的高度会汇报...待补充)-------------BFC问题导致

4. 给父元素设置display为inline-block、inline-table、table、table-cell、table-caption

5. 给父元素设置overflow为visible(default)以外的值（比如hidden、auto、scroll）

• 方法3,4,5 改变了盒子特性 (不推荐)

• 方法6 改变了父元素对内容溢出的默认行为 (不推荐)

6. 给父元素设置一个空的块级元素,设置clear:both(结构与样式分离)

7. 设置空行属性

<br clear="all">

实现原则: 1.不要修改元素的类型 2. 要有扩展性 3. 要用纯css实现(不违反结构与样式分离)

clear 常用取值

• left：要求元素的顶部低于之前生成的所有左浮动元素的底部

• right：要求元素的顶部低于之前生成的所有右浮动元素的底部

• both：要求元素的顶部低于之前生成的所有浮动元素的底部

• none：默认值，无特殊要求

• 一般就只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠

清浮动 !!! warning

• 清浮动的时候, 若在整个父元素中需要有不算入高度的脱标元素, 设置其为子绝父相.

图片品质

• 50-80即可

  
  图片格式选择.png
• 每一份单独的图片最好都保留一份PSD格式文件, 方便以后修改

CSS官方文档解读

文档属性值.png

组合 combinators

组合.png

出现次数 multipliers

出现次数.png

类型 types

类型.png

• 带有<>为新的复杂类型不能直接写, 需要点进去查看

• ''为已有的类型