/*有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位(脱离文档流没有撑大父元素)*/

/******************************上下文选择付************************************

Contextual selectors are very selective

This example shows how to target a specific tag.

Contextual selectors are very useful!

p img{}

.specialtext.featured两个类名之间没有空格，因为我们只想选择同时具有这两个类

名的那个元素。如果你加了空格，那就变成了“祖先/后代”关系的上下文选择符了。******/

/*******************************block************************************

一：块级元素(block)特性：1]不设置宽度时，宽度为父元素宽度

                  　　[2]独占一行

 [3]支持宽高

不支持的样式】

                            　　[1]vertical-align

                                总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

            和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的                                                              top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 ,

h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li***************/

/*****************************内联元素主要有：inline**************************************

内联元素主要有：inline

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img ,

input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,

textarea , tt , u , var

　[1]内容撑开宽度

　　[2]非独占一行

    　　[3]不支持宽高

          　　[4]代码换行被解析成空格

              不支持的样式:[1]background-position

                        　　[2]clear

                              　　[3]clip

                                  　　[4]height | max-height | min-height

                                        　　[5]width | max-width | min-width

                                            　　[6]overflow

                                                  　　[7]text-align

                                                      　　[8]text-indent

                                                            　　[9]text-overflow

4.display:inline:转为行内元素；display:block；转为块级元素***************/

/****************************inline-block***************************************

inline-block

【特征】

　　 [1]不设置宽度时，内容撑开宽度  [2]非独占一行    [3]支持宽高        [4]代码换行被解析成空格<img><input><keygen><meter><object><progress><select><textarea><video>

          【不支持的样式】[1]clear

5.CSS类名，id名不区分大小写*******/

/********************************position**************************************

position:

1.relativlayaut:相对定位：相当于自己原始位置开始定位，以前的位置不被占用，空在那里(测试没有变成块级元素

，位置可通过top之类来变化但是，宽高设置没作用)依然是文档流2.position:绝对定位：元素框从文档流完全删除，元素原先在文档流中所占位置完全关闭， 就好像以前不存在

生成一个快级框(测试变成了块级元素)，对该元素最近的那个脱离了文档流的元素的定位，如果没有父元素，则相对于body定位

            而其层叠通过z-index属性定义(只能设置absolute和relativlayout)

3.  固定定位：即完全离开文档流，相关于视区进行偏移。****/

/********************************float清理浮动****************************************

浮动产生的问题1. 背景不能显示2、边框不能撑开3、margin padding设置值不能正确显示4.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

测试发现在不设置父布局高度的情况下 清除浮动，让父布局的高度自适应，将下面的代码放到浮动的父布局里面，就可以清除浮动/**清理浮动.clearfix:after {

content: "";

display: block;

clear: both;

}

.clearfix {

zoom: 1;

}

（如果一个子元素加上清除浮动，整个高度变成哪一行最高的高度）

二。 overflow: hidden;清除浮动为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，

              这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动（不能在下拉菜单的顶级元素上应用overflow:hidden，否则作为其子元素的下拉菜单就不会显示了）**/

/********************************替换元素：*****************************************

  替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

                                                          浏览器将把这段内容直接显示出来*/

/**********************************************BFC****************************************

  BFC的创建方法: 根元素或其它包含它的元素；浮动 (元素的float不为none)； 绝对定位元素 (元素的position为absolute或fixed)；

行内块inline-blocks(元素的 display: inline-block)；表格单元格(元素的display: table-cell，HTML表格单元格默认属性)； overflow的值不为visible的元素； 弹性盒 flex boxes (元素的display: flex或inline-flex)；

但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了

简单归纳一下： 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）； 处于同一个BFC中的元素相互影响，可能会发生margin collapse；

每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；  BFC就是页面上的一个隔离的独立容器，

容器里面的子元素不会影响到外面的元素，反之亦然； 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；

浮动盒区域不叠加到BFC上；*/

/********************************************字符间距****************************************************************************/

/**vertical-align************************************************************

默认情况下支持vertical-align的有图片，按钮，文字，单元格(支持inline，inline-block不支持block

1.table-cell:只有自身设置display:teble-cell;vertival-align:middle才会居中，因为)

2.vertival-align百分比是通过行高计算的比如line-height=30px,vertival-align:10%就是

亲自试验:

    回到拉萨xyzj

1.vertical-align: baseline是基线对齐3px

2.top:图片的行高和“整个框”的行高对齐（bottom一样的道理）3.text-top“文字行内框的顶部”和图片顶部对齐（text-bottom一样的道理）4.middle文字和图片的中线对齐5..test{vertical-align:-2px;}

　元素相对于基线向下偏移两像素，这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题6.父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。vertical-align不可继承，必须对子元素单独设置。。

：7.对于一个inline-block元素，如果内部没有inline内联元素(感觉就是没有内容空的）0，

或者overflow不是visible，则该元素的基线就是它margin的底边缘

，否则就是元素内部最后一行内联元素的基线。简单地就以上这种情况来说，没有内容的demo2会基于它的margin底边缘也就是

它的下边缘对齐，而包含内容的demo1和demo3会基于其内部内联元素的基线对齐，所以会造成这种一上一下的情况8.解决办法

设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置*/

/************line-height**********************************************

　line-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容，

而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。

在应用到块级元素时，line-height定义了元素文本基线之间的最小距离，即最小行高

　　[注意]如果块级元素中的某一个子级内联元素设置的行高比最小行高大，则行框以设置行高来渲染；如果小，

则以最小行高来渲染。因为，每一个子级内联元素的行高都是行内框的高度，只有一行中所有的行内元素(包括代表父级元素的匿名文本)

颠三倒四，最大的行内框高度才能成为整行的行高*/

/*******************发的***大小写转换;text-transform: capitalize;首字母大写（none、uppercase、lowercase）***************************************************************/

/******************************为元素

一个冒号（:）表示伪类，两个冒号（::）表示CSS3 新增的伪元素。尽管浏览器目

前都支持对CSS 1 和CSS 2 的伪元素使用一个冒号，但希望你能习惯于用双冒号代

替单冒号，因为这些单冒号的伪元素最终可能都会被淘汰掉。2.:first-child 和:last-child，:nth-child(n)（n表示第几个）3.::first-letter第一个字母，，，::first-line第一行*******************************************/

/**********************设置盒子宽度和不设置盒子宽度的不同********************为“设定了宽度”的盒子添加边框、内边距和外边距，会导致盒子扩展

得更宽。实际上，盒子的width 属性设定的只是“盒子内容区的宽度”，而非盒子要占

据的水平宽度。*******************************************/

/********************************现行渐变*****************************

默认为从上到下gradient1 {

background:linear-gradient(#e86a43, #fff);

}

例2：从左到右.gradient2 {

background:linear-gradient(left, #64d1dd, #fff);

}

例3：左上到右下.gradient3 {

background:linear-gradient(-45deg, #e86a43, #fff);**************************************/

/***************;box-sizing: border-box

如果不设置的时候，当一个div的宽高是一个定值，我们再去设置padding,margin,border的时候，整个狂会变大，设置;box-sizing: border-box之后

就不会，只是内容会自己调试挤压************************************************************************************/