定位
1.position
static:positon定位的默许值，没有定位
设置top跟left无效
relative:生成相对定位的元素，相对于其正常方位进行定位，一般在子元素设置absoute定位时，给父元素设置relative元素的方位经过top、right、bottom、left操控，其值的定位起点都是是父元素左上角(这点和absoute、fixed不相同)
relative.jpg
上图中咱们给father块元素加了一个向左向上各100px的相对定位，father的父元素便是body，所以father相对于body进行偏移，son块元素在加上相对定位后，由于他是在father下的子元素，假如father没有加定位，那么son是相对于body进行偏移的，实际上上图中father有加上定位，所以son是相对于father进行偏移，不是相对bady进行偏移。总结：相对定位都是相对于父元素左上角进行偏移，假如没父元素就一层一层往上找
absolute生成肯定定位的元素，相对于static定位以外的第一个父元素进行定位，元素的方位经过top、right、bottom、left操控
absolute.jpg
首要absolute是相对于static定位以外的第一个父元素进行定位，浅显说便是相对于有设定位特色，但不包含定位特色为static的父元素进行定位，只需父元素有设定位为relative或absolute等等都能够相对其进行定位。其次top跟left是相对于父元素左上角进行定位，right跟bottom是相对于父元素右下角进行定位
fixed生成肯定定位的元素，相对于阅读器窗口进行定位，和absoute的区别是fixed不会跟从屏幕翻滚(常见的各种贴屏广告)元素的方位经过top、right、bottom、left操控
fixed.jpg
经过上图咱们给son的父元素加了相对定位，但在给子元素加fixed时咱们发现son元素是相对于阅读器窗口进行定位的，父元素对其毫无约束作用
sticky：它的表现就像position:relative和position:fixed的合体:
浅显说便是在页面不进行翻滚时他表现出来的特性便是relative，但当页面进行翻滚时他表现出来便是fixed的特性
2.z-index
界说一个元素在文档中的层叠次序，适用于界说position的元素
当运用定位有多层叠在一起能够经过z-index特色界说来界说什么元素排在最上面,比方有些弹窗显现需求有个蒙层在加弹窗内容，这时需求用定位把蒙层先定位在内容上面进行隐瞒，在把弹窗内容定位在蒙层上，这时就需求z-index进行定位什么元素显现在上面，经过设置弹窗的z-inde值大于蒙层的z-index值就能够完成弹窗在蒙层之上
3.clip：界说了元素的哪一部分是可见的。区域外的部分是通明的，适用于肯定定位元素
值为auto时表明目标无剪切，比方一个宽高为100px的元素，clip:rect(autoautoautoauto)跟clip:rect(0px100px100px0px)都表明不会对元素进行取舍，第一个值表明从上往下取舍到设定值，为0便是从上面取舍到0px也便是不取舍，第二个值表明从右边取舍到设定值，100就表明从右边取舍到宽度100px的方位，也就没有取舍作用
布局
1.display
在讲display的inline跟block特色时咱们先了解一下什么是块元素什么是行内元素
块级元素特色：
总是以一个块的办法表现出来，占有一整行。若干同级块元素会从上之下顺次摆放（运用float特色除外）
能够设置高度、宽度、各个方向外边距（margin）以及各个方向的内边距（padding）
当宽度（width）缺省时，它的宽度时其容器的100%，除非咱们给它设定了固定的宽度
块级元素中能够包容其他块级元素或行内元素
常见的块级元素由
等等
块级元素的display特色值默认为block
行内元素特色：
它不会独自占有一整行，而是只占有本身的宽度和高度地点的空间。若干同级行内元素会从左到右（即某个行内元素能够和其他行内元素共处一行），从上到下顺次摆放
行内元素不能够设置高度、宽度，其高度一般由其字体的巨细来决议，其宽度由内容的长度操控
行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此咱们能够经过设置左右的padding值来改动行内元素的宽度
常见的行内元素由等等
行内元素一般不能够包含块级元素
块级元素的display特色值默认为inline
none:躲藏目标。
与display:none有类似作用有visibility:hidden
display:none能够看做不存在且不加载，即不为要躲藏的目标保留其物理空间，即该目标在页面上彻底消失，被运用的目标的宽度高度等特色都消失不见。
visibility:hidden躲藏，但在阅读时保留方位，即，使目标在网页上不行见，但该目标在网页上所占的空间没有改动。运用visibility:hidden特色后，HTML元素（目标）仅仅是在视觉上看不见（彻底通明），而它所占有的空间方位仍然存在。也便是说它仍具有高度、宽度等特色值。
inline：指定目标为内联元素。
使元素变成行内元素，具有行内元素的特性，即能够与其他行内元素共享一行，不会独占一行.
不能更改元素的height，width的值，巨细由内容撑开.
能够运用padding上下左右都有效，margin只要left和right发生边距作用，可是top和bottom就不行.
block：指定目标为块元素。
[图片上传中…(image-84a342-1612111025743)]
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默许填满父级元素的宽度.
能够改动元素的height，width的值.
能够设置padding，margin的各个特色值，top，left，bottom，right都能够发生边距作用.
inline-block：指定目标为内联块元素。
依据姓名，实际上咱们就能够才出来它是结合了inline和block的特性于一身。即设置了inline-block特色的元素既具有block元素能够设置width和height特色的特性，又坚持了inline元素不换行的特性。
举例说明，咱们之前在做横向导航菜单的时分，一般是用ullia组合，然后将li设置为float，这样就能够得到横向的导航标签了。而现在咱们能够经过li和display:inline-block;来完成。
inline-block.jpg
用inline-block确实完成了横向的摆放，实际上，也能够设置宽和高，大家能够自己测验。可是，很明显有一个问题—我将padding和margin的值都设置为0，他们之间还会有距离，实际上，这是inline元素本身呈现的问题，而inline-block结合了inline和block特色，当然也就存在这个问题了。这些空隙是空白符，在阅读器中，空白符是不会被阅读器疏忽的，多个接连的空白符阅读器会主动将其合并成一个。咱们编写代码时写的空格，换行都会发生空白符。所以自然而然的两个元素之间会有空白符，假如将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。
解决办法：咱们要明白空白符归根到底是一个字符，只需咱们将ｕｌ中的字符的巨细设置位０，那么空白符也就不会存在了，可是这是a的字体巨细也会承继ul的字体巨细，那么就不见了，该怎么办，只需求将a中再设置一个字体不为0的巨细覆盖即可。
list-item：指定目标为列表项目。
这个特色就像ullist-style相同为块级元素前面增加一个空间来寄存小黑点
list-item.jpg
table：指定目标作为块元素级的表格。类同于html标签
display:table系列几乎是和table系的元素相对应的，请看下表：
table.jpg
div模仿表格
模仿表格
让块级标签完成行内作用，即起浮至同一横轴，并完成等高作用
table表格中的单元格最大的特色之一便是同一行列表元素都等高。所以，许多时分，咱们需求等高布局的时分，就能够借助display:table-cell特色，结合vetical-align完成块级元素笔直居中。
run-in：依据上下文决议目标是内联目标仍是块级目标。（CSS3）
这个声明完成作用是需求条件的：假如display:run-in的box后边跟着一个display为block水平的box，那么这个应用了display:run-in的box将会变成display:inline特色，同时内容嵌入到后边的display为block的box中；否则这个display:run-in的box维持其本身的block特色。浅显说当前元素跑-进(run-in)后边的元素。
这个办法完成这里的作用可谓适当合适。不过，兼容性糟糕这个硬伤影响了其普及。
flex:将目标作为弹性弹性盒显现。
Flexbox是flexiblebox的简称（注：意思是“灵敏的盒子容器”），是CSS3引进的新的布局形式。它决议了元素如何在页面上摆放，使它们能在不同的屏幕尺度和设备下可预测地展现出来。
**1.容器特色**
flex.jpg
1.1flex-direction:
row（默许值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为笔直方向，起点在上沿。
column-reverse：主轴为笔直方向，起点在下沿。
flex-direction.jpg
1.2flex-wrap:
nowrap（默许）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-wrap.jpg
1.3flex-flow:
flex-flow特色是flex-direction特色和flex-wrap特色的简写办法，默许值为rownowrap。
1.4justify-content:
flex-start（默许值）：左对齐
flex-end：右对齐
center：居中
space-between：两头对齐，项目之间的距离都持平。
space-around：每个项目两头的距离持平。所以，项目之间的距离比项目与边框的距离大一倍。
justify-content.gif
1.5align-items特色：界说在穿插轴上的对齐办法
flex-start：穿插轴的起点对齐。
flex-end：穿插轴的终点对齐。
center：穿插轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch（默许值）：假如项目未设置高度或设为auto，将占满整个容器的高度。
align-items.gif
baseline.jpg
1.6align-content:
界说了多根轴线的对齐办法，假如项目只要一根轴线，那么该特色将不起作用
多轴我的理解为：flex-flow中有一个特色，nowrap和wrap这表明当主轴一次性不能排下这么多元素的时分，采纳的排序办法，wrap的意思便是一行排不下了，换到下一行来展现，假如下一行仍是展现不下，就再换到下一行。
假如flex-flow设置为row的话，选用wrap办法展现了3行。那么就有3个主轴平行的，那么就归于多轴了。
flex-start：与穿插轴的起点对齐。
flex-end：与穿插轴的终点对齐。
center：与穿插轴的中点对齐。
space-between：与穿插轴两头对齐，轴线之间的距离均匀散布。
space-around：每根轴线两头的距离都持平。所以，轴线之间的距离比轴线与边框的距离大一倍。
stretch（默许值）：轴线占满整个穿插轴。
下图展现多根轴线的对齐办法默许与起点对齐办法的比较
align-content.jpg
2.项目特色
2.1order特色界说项目的摆放次序。数值越小，摆放越靠前，默认为0。
order.jpg
2.2flex-grow特色flex-grow特色界说项目的扩大比例，默认为0，即假如存在剩下空间，也不扩大。
假如一切项目的flex-grow特色都为1，则它们将等分剩下空间（假如有的话）。假如一个项目的flex-grow特色为2，其他项目都为1，则前者占有的剩下空间将比其他项多一倍。
flex-grow.jpg
2.3flex-shrink特色
flex-shrink特色界说了项目的缩小比例，默认为1，即假如空间不足，该项目将缩小。
假如一切项目的flex-shrink特色都为1，当空间不足时，都将等比例缩小。假如一个项目的flex-shrink特色为0，其他项目都为1，则空间不足时，前者不缩小。负值对该特色无效。
2.4align-self特色
align-self特色答应单个项目有与其他项目不相同的对齐办法，可覆盖align-items特色。默许值为auto，表明承继父元素的align-items特色，假如没有父元素，则等同于stretch。
align-self.jpg
弹性布局默许不改动项目的宽度，可是它默许改动项目的高度。假如项目没有显式指定高度，就将占有容器的一切高度。
inline-flex：将目标作为内联块级弹性弹性盒显现
inline-flex.jpg
虽然没有给父元素设置宽度，可是父元素默许会依据子元素的宽高去自适应。
box：将目标作为弹性弹性盒显现。（弹性盒最老版本）
1、首要不同的阅读器要做不同的兼容：现在box-flex特色还没有得到firefox、Opera、chrome阅读器的彻底支撑，但能够运用它们的私有特色界说firefox(-moz)、opera(-0)、chrome/safari（-webkit)。
2、用于父元素的常用特色有以下几个：
box-orient:horizontal|vertical|inherit;该特色界说父元素的子元素是如何摆放的。
父元素设置该特色后，作用与flex-direction类似。使子元素摆放方向发生变化。
horizontal水平摆放，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
vertical笔直摆放，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。
vertical：子元素笔直摆放，十分合适常用的网页布局，即头部，中心内容部分和底部，主张假如底部是固定定位的评论框，十分主张用此布局，能够减少许多起浮布局留下的坑。
box-orient.jpg
box-pack:start|end|center|justify;该特色界说父元素的子元素是如何摆放的。可是注意这种摆放是沿box-orient方向的
box-pack.jpg
box-align:start|end|center|baseline|stretch;也是沿着box-align方向的
box-align.jpg
box-direction:normal/reverse
在父级上设置该特色，作用使改动子元素的摆放次序，
normal默许值，子代按html次序摆放1，2，3，4
reverse反序，一切元素相反次序来，4，3，2，1
box-flex:1
作用与flex:1;相同。若子元素设置固定宽高，则子元素依照该子元素的宽和高，若没有设置该特色的子元素会占满具有display:box特色父元素中剩下的一切的空间。
设置为1则为一切剩下空间，能够为负数。
若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份
2.float
float特色
left:元素向左起浮
right:元素向右起浮
none:默许值。元素不起浮，并会显现在其文本中呈现的方位
起浮的特性
设置左右起浮后，元素会尽量往左往右挨近，当元素碰到父级元素的边框或者另一个同级元素的边框时就会停下来
在一个块级元素里，若设置前面的元素设置了起浮时，后边的元素不设置起浮时，后边的元素会收到影响，会盘绕包裹起浮的元素
铲除起浮（clear）
由于设置起浮时，前面设置起浮的元素会影响后边没有设置起浮的元素（盘绕作用），而铲除起浮会铲除起浮元素对没有起浮元素的影响（铲除盘绕作用）
clear:left铲除左面起浮
仅仅铲除左面起浮的元素对元素块发生的影响，适当于铲除文字对左面起浮元素的盘绕作用，可是依旧会盘绕右边起浮的元素
clear:right铲除右边起浮
仅仅铲除右边起浮的元素对元素块发生的影响，适当于铲除文字对右边起浮元素的盘绕作用，可是依旧会盘绕左面起浮的元素
clear:both铲除两头起浮
铲除元素块两头的起浮作用，适当于对两头的元素都不发生盘绕作用
解决父级边框塌陷的办法
父级增加overflow特色
简单，下拉列表框的场景不能用
visible对溢出内容不做处理，内容可能会超出容器。
hidden：躲藏溢出容器的内容且不呈现翻滚条。
scroll：躲藏溢出容器的内容，溢出的内容能够经过翻滚呈现。
auto：当内容没有溢出容器时不呈现翻滚条，当内容溢出容器时呈现翻滚条，按需呈现翻滚条。textarea元素的overflow默许值便是auto。
clip：与hidden相同，clip也被用来躲藏溢出容器的内容且不呈现翻滚条。不同的地方在于，clip是一个彻底禁止翻滚的容器，而hidden仍然能够经过编程机制让内容能够翻滚。
父级增加伪类after
写法比上面稍微杂乱一点，可是没有副作用，引荐运用
.clearfix:after{content:””;display:block;height:0;clear:both;visibility:hidden;}
css手册中文版下载
这是一个国内最好的CSS参考手册，本版别手册结构调整，手册在接下来将只更新IE8.0+,Firefox40.0+,Chrome40.0+,iOS8.0+,Android4.4+,AndroidChrome28.0+,Opera40.0+（Opera从15.0开始转入webkit阵营）的支撑数据，低于这些版别的数据将不再更新，共同期望未来前端的环境越来越好。
关于IE和Edge，手册是合并到一同表现的。IE11.0及之前的版别为IE浏览器，IE12.0及以后的版别为Edge浏览器，阅读者可根据版别来确定。
内容
正速查总表QuickSearch
简介Introduction
特点Properties
选择符Selectors
语法与规矩Rules
取值与单位VsluesandUnits
附录Appendix
CSSHack
问题和经验
下载:https://www.jb51.net/books/788291.html
