css（day2）

盒子模型

核心：盒子模型，浮动和定位

（１）盒子模型

盒子模型组成：边框border，内容content，内边距padding，外边距margin

・边框

border : border-width || border-style || border-color
//复合写法，没有顺序

border-style : solid || dotted || dashed

border-top: 5px solid pink;
//边框分开写法

border-collapse: collapse;
//合并相邻的边框

设置边框会使盒子大小改变，这时可以：
①测量盒子大小时不加边框
②测量时包含边框的情况下，用width/height减去border-width*2

・内边距
设置内边距会使盒子大小改变，这时可以：
测量时包含边框的情况下，用width/height减去border-width*2
注意：如果盒子本身没有制定width/height属性，则padding不会撑开盒子大小

・外边距（控制盒子之间的距离）
块级盒子水平居中条件：
①盒子必须制定了宽度
②盒子左右的外边距都设置为auto

.header {
    width: 960px;
    margin: 0 auto;
}

行内元素或行内块元素水平居中给其父元素添加text-align：center即可
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
a.相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。解决方案：尽量只给一个盒子添加 margin 值。
b.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
1 可以为父元素定义上边框。
2 可以为父元素定义上内边距。
3 可以为父元素添加 overflow:hidden。
*3不会把盒子撑大

清除内外边距

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

・圆角边框

border-radius:length;

要点：
参数值可以为数值或百分比的形式。数值代表画一个半径为length的圆，从重叠处切掉原来图形的边线。
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

・盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;
//h-shadow v-shadow必须
//spread阴影的尺寸
//color一般用rgba

默认outset，不能写

・文字阴影

text-shadow: h-shadow v-shadow blur color;

（２）浮动

三种传统布局方式：

・普通流(标准流)：按照规定好默认方式排列 

・浮动：

①为什么用浮动？
有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

②浮动最典型的应用:可以让多个块级元素一行内排列显示。

③网页布局第一准则:多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

④浮动特性：

a.浮动元素会脱离标准流(脱标)，不再保留原先的位置

b.浮动的元素会一行内显示并且元素顶部对齐

注意: 浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子， 多出的盒子 会另起一行对齐。

c.浮动的元素会具有行内块元素的特性，任何元素都可以浮动。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定浮动的盒子中间是没有缝隙的， 是紧挨着一起的

⑤清除浮动：

原因：父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，会影响下面的标准流盒子。

选择器{clear:属性值;}
//属性值left，right，both

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

策略：闭合浮动

方法：

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法。
   在浮动元素末尾添加一个空的标签（块级元素） 。例如 <div style=”clear:both”></div>，或者其他标签(如<br />等)。

2. 父级添加 overflow 属性
   可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

3. 父级添加after伪元素

   .clearfix:after { 
   content: ""; 
   display: block; 
   height: 0;
   clear: both; 
   visibility: hidden;
   }
   
   .clearfix { /* IE6、7 专有 */
   *zoom: 1; }

4. 父级添加双伪元素

   .clearfix:before,
   .clearfix:after { 
   content:"";
   display:table;
   //display:table→转换成块级元素并在一行显示
   }
   
   .clearfix:after {
   clear:both; 
   }
   
   .clearfix {
      *zoom:1;
   }

（３）定位：

①功能：

• 让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
• 固定在屏幕内的显示位置

②组成：

定位=定位模式+边偏移（元素最终位置）

{ position: static||relative||absolute||fixed; }
//定位模式

top||bottom||left||right: xxpx;
//边偏移

static静态定位
特点:
按标准流摆放，没有边偏移，很少用
relative相对定位
特点:
1. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。 
absolute绝对定位 
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
特点:
1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document 文档)。
2. 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
3. 绝对定位不再占有原先的位置。(脱标)
子绝父相
子级用绝对定位，父级用相对定位
1 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。 
2 父盒子需要加定位限制子盒子在父盒子内显示。
3 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
fixed固定定位 
固定定位是元素固定于浏览器可视区的位置。
主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。
固定定位的特点:
1. 以浏览器的可视窗口为参照点移动元素。
・跟父元素没有任何关系
・不随滚动条滚动。
2. 固定定位不在占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
固定定位小技巧: 固定在版心右侧位置。
sticky粘性定位
相对定位和固定定位的混合
特点:
1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
2. 粘性定位占有原先的位置(相对定位特点)
3. 必须添加 top 、left、right、bottom 其中一个才有效 跟页面滚动搭配使用。
兼容性较差，IE 不支持。

定位叠放次序 z-index
使用 z-index 来控制盒子的前后次序 (z轴)

选择器 { z-index: 1;　}

・数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
・如果属性值相同，则按照书写顺序，后来居上
・数字后面不能加单位
・只有定位的盒子才有 z-index 属性

拓展
1. 绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
水平居中

①left: 50%;
让盒子的左侧移动到父级元素的水平中心位置。
②margin-left: -100px;
让盒子向左移动自身宽度的一半。

垂直居中

①top: 50%;
让盒子的左侧移动到父级元素的垂直中心位置。
②margin-top: -100px;
让盒子向上移动自身宽度的一半。

2. 定位特殊特性
绝对定位和固定定位也和浮动类似。
①行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
②块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3. 脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
4. 绝对定位(固定定位)会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字
但是绝对定位(固定定位) 会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素