CSS碎片

1.外边距不会应用到行内非替换元素的顶端和底端，因为不会改变它的行高，所有没有视觉效果。

　而行内非替换元素上下内边距虽然也不改变行高，但却能延伸背景，所有背景可见，可能会重叠其他行。

 span{margin-top:10px;}//无效
2 span{margin-bottom:10px;}//无效

2.垂直对齐vertical-align（可应用于所有元素）的百分数值相对于元素的line-height计算

 p{line-height:18px;}
 img{vertical-align:50%;}
 <p><img></p>//这使得图像上升18*50% = 9个像素。而不是相对于图像本身的高度

3.行内非替换元素没有width，height属性。可以设置其dispaly：为block显示为块级元素或inline-block显示为行内块级元素（作为行内替换元素）使其拥有width，height属性。

4.水平对齐text-align属性只应用与块级元素

5.百分数的外边距margin，内边距padding都是相对于父元素的width计算的，例子中的外边距和内边距值：300px*10% = 30px

    <div style="width:300px;border:1px dotted black;">
        <p style="margin:10%;">Lorem ipsuos cupiditate unde delectus!</lore></p>
    </div>

    <div style="width:300px;border:1px dotted black;">
        <p style="padding:10%;">Lorem ipsuos cupiditate unde delectus!</lore></p>
    </div>

6.正常流中，垂直相邻外边距会合并，两正取最大，两负取最小，一正一负相加。浮动元素周围的外边距不会合并。

7.浮动元素的左右外边界（除非设置负外边距，以及大于其包含块宽度）不能超出起包含块的左右内边界。

下边可能会超出，但如果设置其包含块也为浮动，就可以把浮动元素超出部分也包含在父元素中，父元素扩大以包含所有内容。

8.浮动元素与其他元素发生重叠时，行内元素会完全覆盖浮动元素（背景，边框，内容)。块级元素只将内容显示在浮动元素之上，背景和边框都在浮动元素之下显示。

8.清除浮动，clear：left/right/both/none。确保清除元素的同一行上有没有浮动元素。其实就是增加清除元素的上外边距，所以显示设置的上边距可能会被忽略。

如果需要在浮动元素和清除元素之间增加一些空白，可以设置浮动元素的下边距达到效果。

9.float:left/right浮动元素和position : absolute绝对定位，会将元素的display显示类型就会自动变为以 display:inline-block，行内块级。

10.鼠标样式css

.hoverStyle:hover{
  cursor:pointer;
}

11.包裹性：

按钮就是CSS世界中极具代表性的inline-block元素，可谓展示“包裹性”最好的例子，具体表现为：按钮文字越多宽度越宽（内部尺寸特性），但如果文字足够多，则会在容器的宽度处自动换行（自适应特性）。除了inline-block元素，浮动元素以及绝对定位元素都具有包裹性。

请看这个需求：页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？

.box {
　 text-align: center;
}
.content {
　 display: inline-block;
　 text-align: left;
}

12.CSS居中:

//水平居中--行内元素:

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center

//水平居中--定宽块级元素

.centerDiv{
    width: 200px;
    background:red;
    margin:  auto;
}

//水平居中--不定宽块级元素,不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）

1.加入 table 标签或者设置display:table；
     display:table;
     margin:0 auto;

2.设置 display: inline 方法：与第一种类似，改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center

3.设置 浮动 和 相对定位 来实现。通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
　父元素整个框向右移动50%，父元素的左外边界刚好在屏幕的中点；
  子元素又在父元素的基础上向左移动父元素宽度的50%，这就使得子元素的右外边界刚好在定位后父元素的中点，这时子元素的中点就刚好在屏幕的中点了，实现居中效果。　　
    <div class="wrap">
        <div class="wrap-center">我们来学习一下这种方法。</div>
    </div>
    .wrap{
        float:left;
        position:relative;
        left:50%;
    }
    .wrap-center{
        background:#ccc;
        position:relative;
        left:-50%;
    }

　　//垂直居中--父元素高度确定的单行文本,设置父元素的 height 和line-height高度一致来实现的。

<div class="container">
    hello World
</div>
.container{
    height:100px;
    line-height:100px;
}

　　//垂直居中--父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

1.使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了

2.在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}

3.

*{margin:0;padding:0;}

.box{
height:200px;
width:300px;
background:pink;
margin:30px auto;
line-height: 200px;
}

.text{
display: inline-block;
height: auto;
font-size:16px;
line-height: normal;
vertical-align: middle;/* 保证文字垂直居中 */
}

<div class="box">
    <p class="text">
        多行 文本 未知高度垂直居中-by

一丝多行文本未知高度垂直居中-by

一丝多行文本未知高度垂直居中-by 一丝
    </p>
</div>

4.

.box{
height:200px;
width:300px;
background:pink;
margin:30px auto;
font-size:0;//看不见备胎
}
.box:before{
content: '我是那个备胎元素';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
.text{
display: inline-block;
font-size:16px;
vertical-align: middle;/* 保证文字垂直居中 */
}

　　

/*浮动元素居中*/

.floatCenter{
    width:500px;height: 300px;
    float: left;
    background:pink;

    margin-left:-250px;
    position:relative;
    left:50%;
 }

/*绝对定位元素居中*/

.absoluteCenter{
    position: absolute;
    background:pink;
    width: 200px;
    left:50%;
    margin-left: -100px;
}

/*垂直居中*/