CSS 样式介绍（三）

各种样式属性

• 注意：body标签在浏览器中 padding有默认的值 ，ul 和 li 也有默认边距，所以可以通过下面来设置默认的，清除元素默认内外边距样式

body, ul, li {
    margin: 0;
    padding: 0;
}  

* {
    margin: 0;
    padding: 0;
}   

ul {
    list-style: none; /**取消列表自带的小点**/
}

1.边框、内边距、外边距
border 属性: border: border-width || border-style || border-color
border-style 边框样式属性(边框风格)：none 没有边框，默认值, solid 边框为单实线（最为常用的），dashed 边框为虚线，dotted 边框为点线,double为双实线

div { 
    border-width: 3px;
    border-color: red;
    border-style: double;
    border-top-color: red;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: red;
    border-bottom-style: solid;
    border-top: 1px solid red; /**上边框宽度为1 单实线 红色**/
    border-bottom: 1px solid red;
}

table {
    border: 1px solid red;
    border-collapse: collapse; /**表示边框合并在一起，合并相邻边框**/
}

 /**cellpadding 单元格的padding为0 ，单元格的间隔为0**/
<table cellpadding="0" cellspacing="0"></table>

p {
    
    border-radius: 10px; /**圆角度*/
    border-radius: 50%; /**百分比圆角度*/
    border-radius: 10px 40px; /**对角线设置圆角度：左上角 和 右下角 是10px, 右上角和左下角是40px, */
    border-radius: 10px 40px 80px; /**左上角 10px, 右上角和左下角是40px,  右下角 是 80px*/
    border-radius: 10px 40px 80px 100px; /**左上角 10px, 右上角是40px, ， 右下角是80px 左下角是100；顺时针*/

    padding: 10px; /**内边距,表示上下左右内边距*/
    padding-left: 10px; /**左内边距，还有padding-right padding-top padding-bottom*/
    padding: 20px 30px; /**上下10px 左右30px*/
    padding: 10px 30px 50px; /**上下10px 左右30px 下50px*/
    padding: 10px 30px 50px 70; /**上 右 下 左*/

    margin-top: 100px; /**上外边距*/ 
    margin: 10px 20px 30px 40px; /**外边距：上 右 下 左*/
    margin: 30px; /**上右下左*/

    margin: 30px auto; /** 盒子水平居中，上下30px 左右auto(自动)  这样可以让块级带有宽度的盒子水平居中对齐*/
}

/* 注意！：我们尽量不要给行内元素指定上下的内外边距，左右可以指定*/
/* 注意！：外边距合并：垂直的块级盒子，以最大的为准*/

/*解除嵌套块元素垂直外边距的合并 塌陷的问题
    1.给border
    2.给padding
    3.overflow: hidden;
*/
.father {
    margin-top: 30px;
    margin-bottom: 200px;
    width: 300px;
    height: 300px;
    padding: 20px;
    /*border: 1px solid red; */
    /*padding: 1px;*/
    overflow: hidden;

    /*css3新增的box-sizing属性*/
    /*box-sizing: content-box;*/ /**盒子大小的width+padding+border**/
    box-sizing: border-box; /** padding不会撑开盒子宽度, 盒子大小就是width**/

    /*盒子阴影*/
    box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, 0.4);
    /*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影(默认外阴影，内阴影是inset)*/
}

.son {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-top: 40px;
}

2.计算盒子尺寸

• 外盒尺寸计算：content width + padding + border + margin
• 内盒尺寸计算：content width + padding + border
• 如果一个盒子没有给定宽度/高度或者继承了父亲的宽度/高度，则padding不会影响盒子的大小
• box-sizing: content-box; 代表盒子大小的为width+padding+border
• box-sizing: border-box; 代表 padding不会撑开盒子宽度, 盒子大小就是width

3.浮动 (重点)
为什么不用display:inline-block？
display: inline-block; 转换行内块元素，就可以放一行上 但是元素之间有空隙，不方便处理，所以用浮动则之间没有间隙。

float浮动脱离标准流，标准流在地方，浮动在标准流的上方，会压着标准流。所以浮动首先创建包含块的概念，就是说浮动的元素总是找离它最近的父级元素对齐，但是不会超出内边距的范围。
浮动：如果一个盒子里面其中第一个子元素有浮动，则其他子元素都需要浮动，这样才能一行对齐显示。
浮动：元素添加浮动后，元素会具有行内块元素的特性。目的就是让多个块级元素在同一行显示。

• 1.加了浮动的元素盒子是浮起来，漂浮在其他标准流盒子的上面
• 2.加了浮动的盒子，不占位置的，它浮起来了，它原来的位置给了标准流的盒子

特别注意：浮动的盒子需要和标准流的父级搭配使用

特别注意：如果盒子的子元素都是浮动，并且盒子没有高度，则父亲高度为0。所以当不方便为固定高度时，为了让该盒子自动撑开则用清除浮动来完成。

/clear 是清除属性，包括 left(清除左浮动影响)、 right(清除右浮动影响) 、both(左右都清除浮动影响) 值/

• 1.额外标签法：在浮动盒子的后面添加一个空盒子 <div style="clear: both;"></div>, 缺点：增加很多无意义标签，所以很少用
• 2.父级添加overflow属性方法 overflow: hidden|auto|scroll都可以实现,会触发BFC BFC会触发清除浮动
• 3.使用after伪元素清除浮动
• 4.使用before和after双伪元素清除浮动，强烈推荐

/*3.使用after伪元素清除浮动*/
.clearfix:after {
    content: "."; /**内容是小点 ，尽量加,不要空，防止旧版本浏览器有空隙**/
    display: block;
    height: 0; /*高度为0*/
    visibility: hidden; /*隐藏小点*/
    clear: both; /**清除浮动both**/

}

.clearfix { /**ie6.7浏览器清除浮动的方式**/
    *zoom: 1; /**  *代表ie6、7能识别的特殊符号，zoom就是ie6、7 清除浮动的方法，zoom会触发 hasLayout去清除浮动*/
}

 /*4.双伪元素清除浮动，强烈推荐*/
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.clearfix { 
    *zoom: 1;
}

span {
    background-color: purple;
    height: 100px;
    float: left; /**块级元素和行内元素添加浮动后具有行内块特性，span是行内元素**/
}