CSS 提升

一.盒子模型(Box Model)

1.简介

概念：

HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2.边框样式 border

边框的样式：solid（实线）,dashed(虚线) dotted（点线） double(双实线)

border: 宽度 样式 颜色
border: 1px double green;

border-width:3px 5px 10px 15px;

border-style:solid dotted;

border-coler:red green blue;

/*单个去书写上、右、下、左（顺时针）的边框*/
border-top:5px solid red ;
border-right:3px dashed green ;
border-bottom:2px dotted blue ;
border-left:3px double pink ;

一个值的时候：代表四个方向值一样，上右下左（顺时针）
二个值的时候：上下 左右
三个值的时候：上 右下 左
四个值的时候：上 右 下 左

3.边框弧度 border-radius

border-radius: 35px 15px 5px 50px;
border-radius: 50%;

4.内边距样式 padding

padding:50px 40px 30px 20px ;

padding-top:50px;  /*上内边距*/
padding-right:50px;  /*右内边距*/
padding-bottom:50px;  /*下内边距*/
padding-left:50px;  /*左内边距*/

内边距不能够设置负值

内边距的特性：会影响块的大小，会使得块发生变形，块会在原来的基础上加上内边距的大小。

5.外边距样式 margin

margin:50px 40px 30px 20px ;

margin:auto;    /*左右居中，没有上下居中*/
margin-right: auto;   /*右外边距居中*/
margin-left: auto;   /*左外边距居中*/

margin-top: 50px;   /* 上外边距*/
margin-right: 50px;  /* 右外边距*/
margin-bottom: 50px;    /* 下外边距*/
margin-left: 50px;  /* 左外边距*/

垂直方向：取两者之间的较大值
水平方向：取两者之和

外边距能够设置负值

6.行内块元素display

display: inline-block;

行内块元素：
1、inline-block 能够使块或内联变成行内块元素（支持宽高）
2、拥有内联的特性（内容显示在一行，没有宽度，内容撑开宽度）
3、保留块的特性（支持宽高）
4、代码换行被解析成空格

display:inline;  变成内联
display: block; 变成块

二.CSS浮动

1.概念

浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流。

是inline-block的进化版
float浮动的使用保留inline-block特性
能够让块或内联变成行内块元素。
它有一点与inline-block不同，不会解析换行成空格

文档流(正常文档流)：是文档中可显示对象在排列时所占用的位置
脱离文档流：块不会像正常情况一样进行排布，而是可以按照指定方向进行排布

注意：

浮动是提升层级半级，只够一个块进入，文字（y有自己的宽高）进去不了。

2.浮动样式 float

float:left;  #左浮动  第一个标签开始向左排列
float:right;  #右浮动  第一个标签开始向右排列
float:none;  #不浮动  默认值

3.浮动的特点

脱离文档流。
向左/向右浮动直到遇到父元素或者别的浮动元素
浮动元素不占空间
浮动会导致父元素高度坍塌。

4.解决高度崩塌办法

1.给父级增加高度（不推荐使用）
2.给父级加 overflow：hidden
3.添加一个空的div
4.使用伪元素：
	body:after{
            content: "";   /*伪元素的内容*/
            display: block;  /*伪元素为内联元素，把他转换成块状元素*/
            /* 清浮动clear：left、right、both、none */
            clear: both;   /*左右两边不能有浮动*/

三.CSS定位

1.概念：

​ 就是将元素定在网页中的任意位置。

定位偏移量：top、left、bottom、right 是可以设置负值的

2.相对定位

position: relative;

是按自身的块作为参照物进行块的移动
不会脱离文档流，不会浮起来。

3.绝对定位

position: absolute;

不是按自身的块作为参照物进行块的移动,
参照整个html文档进行移动、偏移。
会脱离文档流，会浮起来。类似于浮动，会拥有行内块元素的特性：
	1、inline-block 能够使块或内联变成行内块元素
    2、拥有内联的特性（内容显示在一行，没有宽度，内容撑开宽度）
    3、保留块的特性（支持宽高）

4.固定定位

position: fixed

不是按自身的块作为参照物进行块的移动,
始终参照整个html文档进行移动、偏移。
会脱离文档流，会浮起来。类似于浮动，会拥有行内块元素的特性。
	1、inline-block 能够使块或内联变成行内块元素
    2、拥有内联的特性（内容显示在一行，没有宽度，内容撑开宽度）
    3、保留块的特性（支持宽高）

5.定位层级

定位层级关系：默认后者的定位大于前者的定位

z-index: 1;		默认为0

除非定位元素之上有定位（相对、绝对、固定）父级元素，他都会参照定位父级进行偏移，不管是哪一个定位父级。

假如定位元素的父级都加了定位，就参照最近的那个定位父级进行偏移。

四.重置样式

重置原因：

浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致

公司里会根据每个公司的业务不同，会自己写一套属于自己公司的RESETCSS

参考ResetCSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}