day-09 CSS 盒子，浮动与定位

1盒子模型

CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。

2盒子模型之边框

语法：border : border-width || border-style || border-color

(1)、边框的风格样式

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线 

dotted：边框为点线

double：边框为双实线

（2）边框写法综合

设置内容	样式属性	常用属性值
上边框	border-top-width:宽度; border-top-style:样式; border-top-color:颜色; border-top:宽度 样式 颜色;
下边框	border-bottom-width:宽度; border-bottom-style:样式; border-bottom-color:颜色; border-bottom:宽度 样式 颜色;
左边框	border-left-width:宽度; border-left-style:样式; border-left-color:颜色; border-left:宽度 样式 颜色;
右边框	border-right-width:宽度; border-right-style:样式; border-right-color:颜色; border-right:宽度 样式 颜色;
样式综合设置	border-style:上边 [右边 下边 左边];	none无（默认） solid单实线 dashed虚线 dotted点线 double双实线
宽度综合设置	border-width:上边 [右边 下边 左边];	像素值
颜色综合设置	border-color:上边 [右边 下边 左边];	颜色值 #十六进制 rgb(r,g,b) rgb(r%,g%,b%)
边框综合设置	border:四边宽度 四边样式 四边颜色;

border-top: 1px solid red; /*上边框*/

border-bottom: 2px solid green; /*下边框*/

border-left: 1px solid blue;

border-right: 5px solid pink;

border: 1px solid red;

(3)、表格的细线边框

table{ border-collapse:collapse; } collapse单词是合并的意思

border-collapse:collapse; 表示相邻边框合并在一起。

2盒子模型之内边距

(1)、内边距

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

值的个数	表达意思
1个值	padding：上下左右边距。 比如：padding: 3px;表示：上下左右都是3像素
2个值	padding: 上下边距 左右边距。 比如：padding: 3px 5px;表示：上下3像素 左右 5像素
3个值	padding：上边距 左右边距 下边距。 比如：padding: 3px 5px 10px;表示：上是3像素 左右是5像素 下是10像素
4个值	padding：上内边距 右内边距 下内边距 左内边距 比如：padding: 3px 5px 10px 15px;表示：上3px 右是5px 下 10px 左15px 顺时针

3盒子模型之外边距

(1)、外边距

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

(2)、外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1、必须是块级元素。

2、盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中

(3)、内容居中和盒子居中区别

文字水平居中是text-align: center

盒子水平居中左右margin改为 auto

(4)、清除元素的默认内外边距

为了方便控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */

浮动与定位

1浮动

1）标准流：字面翻译普通流或者标准流都可以。

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

2）浮动

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

3）浮动分类

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置的过程。

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

 4）浮动的特征

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

浮动首先创建包含块的概念。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

总结：

        

   1、浮动后的元素会漂浮在其他元素上边

    2、浮动后的元素是不占原来的位置

    3、浮动后的元素不能超出父元素的范围

    4、浮动后的元素在同一水平线上显示

    5、浮动后的元素会自动的转化为行内块元素

    6、浮动后的元素不能超出父元素的内边距和边框

2清除浮动

1）清除浮动的本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

2）清除浮动的方法

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

1、额外标签法

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如

<div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加无意义的标签，结构化语义化较差

2、父级添加overflow属性方法

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

3、伪元素清除浮动

在父元素中使用after伪元素清除浮动

::after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after {  

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden; 

}

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 百度、淘宝网、网易等

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

在父元素中使用before和after双伪元素清除浮动

4、双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after {
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

可以通过触发BFC的方式，可以实现清除浮动效果。(BFC后面讲解Block formatting context，块级格式化上下文)

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

 3定位

1）定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等。

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

(3)、静态定位

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

(4)、相对定位

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：

正在上传…重新上传取消

注意：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。

2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

演示示例：相对定位

(5)、绝对定位

[注意]如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

1、父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

2、父级有定位

绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。

子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是子级是绝对定位的话，父级要用相对定位。

首先，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。