css手册总结（一）

定位

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(auto auto auto auto)跟clip: rect(0px 100px 100px 0px)都表示不会对元素进行剪裁，第一个值表示从上往下剪裁到设定值，为0就是从上面剪裁到0px也就是不剪裁，第二个值表示从右边剪裁到设定值，100就表示从右边剪裁到宽度100px的位置，也就没有剪裁效果

布局

1.display

在讲display的inline跟block属性时我们先了解一下什么是块元素什么是行内元素

块级元素特点：
总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）
可以设置高度、宽度、各个方向外边距（margin）以及各个方向的内边距（padding）
当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度
块级元素中可以容纳其他块级元素或行内元素
常见的块级元素由<p><div><h1><li>等等
块级元素的display属性值默认为block
行内元素特点：
它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列
行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制
行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度
常见的行内元素由<a><em><img>等等
行内元素一般不可以包含块级元素
块级元素的display属性值默认为inline

• none:隐藏对象。
  与display:none有相似效果有visibility:hidden

display:none可以看做不存在且不加载，即不为要隐藏的对象保留其物理空间，即该对象在页面上彻底消失，被使用的对象的宽度高度等属性都消失不见。
visibility:hidden隐藏，但在浏览时保留位置，即，使对象在网页上不可见，但该对象在网页上所占的空间没有改变。使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。也即是说它仍具有高度、宽度等属性值。

• inline：指定对象为内联元素。
  
  inline.png

使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
不能更改元素的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元素不换行的特性。
举例说明，我们之前在做横向导航菜单的时候，一般是用ul li a组合，然后将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：指定对象为列表项目。
  这个属性就像ul list-style一样为块级元素前面添加一个空间来存放小黑点
  
  list-item.jpg
• table：指定对象作为块元素级的表格。类同于html标签<table>
  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 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

**1.容器属性 **

flex.jpg

1.1 flex-direction:
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-direction.jpg

1.2 flex-wrap:
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-wrap.jpg

1.3flex-flow:
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

1.4 justify-content:

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

justify-content.gif

1.5 align-items属性：定义在交叉轴上的对齐方式

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-items.gif

baseline.jpg

1.6 align-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.1 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order.jpg

flex-grow.jpg

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;
}