CSS 小结

1.去掉下划线：

text-decoration:none;

2.去掉li的圆点：

list-style:none;

3.设置li的高度：

line-height:20px;

4.字体加粗：

font-weight:bold;

5.文本居右：

text-align:right;

6.链接手指状：

cursor:pointer;

7.display用法：

display:inline;//在同一行显示
display:block;//在新的一行上显示
display:inline-block;//一行显示的块级元素

8.border边框：

border:1px solid black;//实线
border:1px dotted black;//虚线，默认矩形边框
border-radius:5px;//圆角边框

9.为文本设置阴影：

text-shadow:1px 1px 5px #04acef;//水平阴影位置 垂直阴影位置 模糊的距离 颜色

10.为边框设置阴影：

box-shadow:1px 1px 10px #ccc;

11.设置字与字的间距：

letter-spacing:8px;

12.单行超出部分省略：

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

13.字体竖直显示

writing-mode: vertical-lr;

14.flex布局的样式居中，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

• flex-direction　　容器内项目的排列方向(默认横向排列)　　

• flex-wrap　　容器内项目换行方式

• flex-flow　　以上两个属性的简写方式

• justify-content　　项目在主轴上的对齐方式

• align-items　　项目在交叉轴上如何对齐

• align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

justify-content: center;
display: flex;

flex-direction: row | row-reverse | column | column-reverse; 3

属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。

flex-wrap: nowrap | wrap | wrap-reverse; 3

属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse

flex-flow:  || ; 3

写法属性中，将上述两种方法的值用||连接即可

justify-content: flex-start | flex-end | center | space-between | space-around; 3

项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)

flex-start：在主轴上由左或者上开始排列

flex-end：在主轴上由右或者下开始排列

center：在主轴上居中排列

space-between：在主轴上左右两端或者上下两端开始排列

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items: flex-start | flex-end | center | baseline | stretch; 3

align-content: flex-start | flex-end | center | space-between | space-around | stretch; 3

以上介绍完了容器中的属性，下面说一下容器中项目的属性：

• order　　项目的排列顺序。数值越小，排列越靠前，默认为0。

• flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

• flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

• align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

转自：https://www.cnblogs.com/xuyuntao/articles/6391728.html

15.bootstrap div居中的样式 

.div{
    float:none;
    margin:0 auto;
}