盒模型 浮动 定位

盒模型相关

border:

border-width border-style border-color

表格边框合并

table {
    border-collapse: collapse;
}

圆角边框

border-radius: 10px;

一个值设四个角，两个值设对角，三个值=左上，对角，右下

若取宽度和高度的50%，则变成一个圆形

内边距

外边距

盒子水平居中：

必须是块级元素且指定了宽度

margin：0，auto；

行内元素没有上下margin。老浏览器上下padding可能也有问题。

外边距合并问题

1. 垂直的两个盒子，中间的距离以大的外边距为准、

2. 嵌套的块元素，若父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素上外边距为0，也会发生合并

   .father {
           width: 100px;
           height: 100px;
           background-color: black;
   }
   .son {
           width: 30px;
           height: 30px;
           margin-top: 30px;background-color: blue;
   }

解决办法：

外层加边框

.father {
    width: 100px;
    height: 100px;
    background-color: black;
    border:1px solid red;
}

外层加内边距

.father {
        width: 100px;
        height: 100px;
        background-color: black;
        padding: 1px;
}

加 overflow：hidden；

盒子尺寸

空间尺寸：width+border+padding+margin

元素大小：width+padding+border

加padding会影响盒子大小，但

如果盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响盒子大小

CSS3 指定盒模型

box-sizing: content-box;

标准盒模型

大小为width+padding+border 加padding盒子会变大

box-sizing: border-box;

怪异盒模型

大小等于width，已经包括了padding和border，不会撑开盒子，content值自动调整

盒子阴影

box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

内：

.shad {
        width: 200px;
        height: 200px;
        border: 5px solid;
        box-shadow: 10px 10px 3px 4px rgba(0,0,0,.5) inset;
}

外就是正常的，不写inset就行。

浮动

使用浮动前用个父盒子包裹住，不然脱离了文档流后下面的块会上来占据位置

浮动元素对齐时不会超过父元素内边距的范围

块/行级元素添加浮动，有了行内块特性，没给width会根据文本内容长度调整width

清除浮动

父盒子如果不设置高度（实际也不方便定死高度），子盒子浮动的时候父盒子高度就变成0了，下面的盒子就会升上来。

为了解决这个问题，正常显示，需要清除浮动。

1. 在浮动盒子后面增加一个空盒子

   <div class="clear"></div>
   <style>
       .clear {
       clear: both;
       }
   </style>
   

2. 父盒子加 overflow：hidden；

3. after伪元素

   .clearfix:after {
           content: ".";  /*尽量不要空，以免Firefox7前的版本会有空格*/
           display: block;
           height: 0;
           visibility: hidden;
           clear:both;
   }
   .clearfix {
           *zoom: 1; /*ie6/7不支持after，用这个*/
   }

   和1思想差不多，其实也是加了个盒子进去，不用手动加了

4. before、after双伪元素清除浮动

   .clearfix:before, .clearfix:after {
       content: "";
       display: table;
   }
   .clearfix:after {
   
       clear:both;
   }
   .clearfix {
       *zoom: 1; /*ie6/7*/
   }

相对定位

相对定位相对于自己移动，不脱标，还占据了原来的位置

绝对定位

绝对定位脱标，不占位置，下面的盒子会顶上来

若父元素没有定位，则定位标准是document

若有，则定位标准是最近的父元素

绝对定位居中不能用margin auto了，用left：50% margin-left：-50%自己

垂直同理：top 50% margin-top：-50%自己

固定定位

固定定位的盒子一定要写宽和高，除非有内容撑开才不用写。

z-index: 用于改变层叠关系

z-index只有有定位属性的才能用。

与浮动类似，添加绝对或固定定位属性，如果之前没有设置width，则会等于内容的宽度

因此，如果给行内元素添加这两种定位，可以不用转换display模式，直接给高度宽度就行

显示模式

1. display：none；隐藏元素，不保留位置

2. visibility：hidden；隐藏元素，仍保留位置（只是看不见）

3. overflow：管理溢出内容

   visible 默认显示 ，可能会溢出

   auto 超出显示滚动条，没有则不显示

   scroll 一直显示滚动条

   hidden 超出部分隐藏