/*有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位(脱离文档流没有撑大父元素)*/
/******************************上下文选择付************************************
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之后
就不会，只是内容会自己调试挤压************************************************************************************/
