盒模型浮动布局

一、css盒模型

1.常用标签的使用

　　前往本页面中个某个位置：Top =>锚点

　　1.设置锚点

　　2.设置前往锚点的a跳转

　　    设置前往锚点的a跳转：#锚点名

　　　　<div id="t_123">123</div>

　　　　<a href="#page_top"Top</a>

　　　　<a href="#t_123">123</a>

　　　　<a href="00_复习预习.html#md">前往锚点</a>

2.边界圆角

　　边界圆角用百分比控制，border-radius: 50%;

3.背景样式

　　background-image: url('图片地址‘） #导入图片作为背景

　　background-size: 200px 200px;   #规定背景图片显示尺寸

　　background-repeat:no-repeat;#平铺图片大小不够，复制后填充

　　background-position: 10px  40px;#控制图片移动

　　

　　background: url('img/123.png') red no-repeat 50px 50px;

4.精灵图

　　精灵图： 各种小图拼接起来的一张大图。

　　为什么使用精灵图：减少请求次数，降低性能的消耗，二次加载图片资源时极为迅速（不需要发送请求）

　　.box{

　　　　background-image: url('img/bd.png');

　　　　background-position:0 -150px;

　　}

　　.box:hover {

　　　　cursor: pointer;

　　　　background-position:0 -250px;

　　}

5.盒布局细节

　　margin坑：

　　上兄弟margin-bottom与下兄弟margin-top重合，取大值。

　　解决方案：

　　只设置一个，建议设置下兄弟margin-top

　　margin布局： 下盒子的垂直起始位置决定于同结构中上盒子的margin结果位置；水平起始位置就是父级content最左侧。

二、display

 

inline

1.同行显示，详单与纯文本，当一行显示不下，如果就是一个字显示不下，那么显示不下的哪一个字就会自动换行，和纯文本的区别就是有标签整体的概念，标签与标签间有一个空格的隔断。

2.支持部分css样式，不支持宽高|行高（行高会映射到父级block标签）| margin上下

3.centent由文本内容撑开

4.inline标签只嵌套inline标签

inline-block

1.同行显示，当一行显示不下，标签作为一个整体换行显示。

2.支持所有css样式

3.content默认由文本（图片）内容撑开，也可以自定义宽高，当自定义宽高后，一定采用自定义宽高（显示区域不足，内容会在标签内容换行显示，可能超出显示区域）

4.inline-block标签不建议嵌套标签。

block

1.异行显示，不管自身区域多大，都会独占一行。

2.支持所有css样式。

3.width默认继承父级，height由内容（文本，图片，子标签）撑开，当设置自定义宽高后，一定采用自定义宽高。

4.block可以嵌套任意标签。

三、overflow知识

本质

　　overflow:处理内容超出盒子显示区域

　　overflow:auto | scroll | hidden

　　auto:自适应，内容超出，滚动显示超出部分，不超出则正常显示。

　　scroll:一直擦爱用滚动方式显示

四、浮动布局

　　float:浮动布局，改变BFC的参照方位

　　为什么要使用：使用它，块级盒子机会同行显示

　　float: left | right；  左 | 右 浮动

　　left:BFC参照方向从左向右

　　right:BFC参照方向从右向左

　　浮动的区域有父级的width决定

五、清浮动

　　浮动问题：子级浮动了，不再撑开父级的高度，那么父级如果拥有兄弟  标签，可能就

会出现布局重叠的问题

　　清浮动：解决上面的问题，通过使父级获取一个合适的高度，这样子级就不会和父级的

兄弟布局发生重叠 

　　clear:left | right | both

　　1.设置父级的死高度

　　2.通过兄弟设置 clear:both

　　3.设置父级overflow属性

　　.sup{

　　　　overflow:hidden;

　　}

　　4.通过父级：after伪类

　　.sup:after{

　　　　content:"";

　　　　display:block;

　　　　cler:both;

　　}