各种样式属性
- 注意：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是行内元素**/
}
