项目中的CSS笔记
文本样式
1、杂记
1、溢出隐藏 overflow: hidden;
2、规定段落中的文本不进行换行 white-space: nowrap;
3、设置省略号 text-overflow: ellipsis; //规定当文本溢出包含元素时发生的事情
4、宽度100%-30px width: calc(100% - 34px);
5、段落中的字间距 word-spacing:25px; 规定段落中的字间距是 25 像素：
6、设置段落的最大宽度 max-100px
7、行间距 设置以百分比计的行高 line-height: 90%;
8、设置行内块级元素 display: inline-block;
9、规定字只显示两行 display: -webkit-box; -webkit-line-clamp: 2;
10、添加圆角边框 border-radius:25px;//圆形
首行缩进 text-indent:2em
!important; 优先级最高
层级最高z-index: 999;
Z-index使用的时候要有定位（position:absolute||relative||fixed！=static）且不能有浮动（有浮动的话要添加定位来解决）。
border-radius: 15px; 设置边框的圆角度
2、font-weight参数：字体加粗
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
3、下划线 text-decoration: line-through;文本修饰
none 默认 定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
blink 定义闪烁的文本
inherit 规定应该从父元素继承 text-decoration 属性的值
4、规定框的子元素应该被垂直排列。-webkit-box-orient: vertical; 垂直
解释
box-orient 属性规定框的子元素应该被水平或垂直排列。
目前没有浏览器支持 box-orient 属性。
Firefox 支持替代的 -moz-box-orient 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。
语法
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
horizontal 在水平行中从左向右排列子元素。
vertical 从上向下垂直排列子元素。
inline-axis 沿着行内轴来排列子元素（映射为 horizontal）。
block-axis 沿着块轴来排列子元素（映射为 vertical）。
inherit 应该从父元素继承 box-orient 属性的值
5、自动换行word-break: break-all;
语法 word-break: normal|break-all|keep-all;
normal使用浏览器默认的换行规则。
break-all允许在单词内换行
keep-all只能在半角空格或连字符处换行
文本的自动换行 white-space: pre-wrap;
6、只显示两行超出隐藏显示省略号;
overflow:hidden;//一定要写超出隐藏
text-overflow: ellipsis;//超出显示省略号
display:-webkit-box;//一定要写 display布局方式
-webkit-line-clamp: 2;//控制行数
/*! autoprefixer: off */ //有些浏览器不支持 所以要加一个注释
-webkit-box-orient: vertical;//一定要写
7、text-shadow 文本阴影。;
语法
Text-shadow: color x-offset y-offset blur-radius;
Color颜色
x-offset X轴位移，用来制定阴影水平位移量
y-offset Y轴位移，用来指定阴影垂直位移量
blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围
浏览器兼容性 IE+ Firefox 3.5+ Chrome 2.0+ Opera 9.6+ Safari 4.0+
盒子布局
1、绝对定位 position的使用
在上一级盒子中设置position: relative;
盒子内设置position: absolute ; right: 0; bottom: 0;设置距离右边0px,距离下边0px
1、position 属性值的含义：
static 默认值
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
inherit
规定应该从父元素继承 position 属性的值。
2、固定位置position: fixed;
position: fixed;的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。
下述 3 种方式目前都会使得 position:fixed 定位的基准元素改变（本文重点）：
1、 transform 属性值不为 none 的元素
2、 perspective 值不为 none 的元素
3、 在 will-change 中指定了任意 CSS 属性
2、设置水平居中 text-align: center/left/right; 水平居中/居左/居右
或 margin-left: auto; margin-right: auto;
3、display：的使用
block :块对象的默认值。用该值为对象之后添加新行
none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象
保留其物理空间
inline :内联对象的默认值。用该值将从对象中删除行
compact :分配对象为块对象或基于内容之上的内联对象
marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after 及:before 伪元素一起使用
inline-table :将表格显示为无前后换行的内联对象或内联容器
list-item :将块对象指定为列表项目。并可以添加可选项目标志
run-in :分配对象为块对象或基于内容之上的内联对象
table :将对象作为块元素级的表格显示
table-caption :将对象作为表格标题显示
table-cell :将对象作为表格单元格显示
table-column :将对象作为表格列显示
table-column-group :将对象作为表格列组显示
table-header-group :将对象作为表格标题组显示
table-footer-group :将对象作为表格脚注组显示
table-row :将对象作为表格行显示
table-row-group :将对象作为表格行组显示
4、flex-direction的用法详解
容器有如下6个属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1. flex-direction：该属性决定主轴的方向(即项目的排列方向)。
它可能有四个值：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
2. flex-wrap属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，可以换行。
它有如下三个值：
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
3. flex-flow
该属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4. justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。下面假设主轴为从左到右。
值为如下：
flex-start | flex-end | center | space-between | space-around;
flex-start(默认值) 左对齐
flex-end 右对齐
center 居中
space-between： 两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。
5. align-items属性
align-items属性定义项目在交叉轴上如何对齐。
它可能取5个值：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
该属性可能取6个值。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
5、box-sizing:border-box的用法详解
在CSS的盒子模型中，有两个重要的选项，box-sizing:content-box 和 box-sizing:border-box，content-box被称为正常盒子模型，border-box被称为怪异盒子模型
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box { 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
6、display:-webkit-box;的使用
用法
display:-webkit-box;//一定要写 display布局方式
-webkit-box-orient: vertical;//一定要写
display:-webkit-box;/主要让子容器针对父容器的宽度按一定规则进行划分
-webkit-box-orient: vertical;解释
1、box-orient
box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：
horizontal | vertical | inline-axis | block-axis | inherit
水平 | 垂直 | 水平 | 垂直 | 继承
inherit属性则是让子容器继承父容器的相关属性。
2、 box-direction
box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：
normal | reverse | inherit
normal是默认值
reverse表示反转
如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排列顺序为sectionThree、sectionTwo、sectionOne
3、box-align
box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：
start | end | center | baseline | stretch
start 在box-align表示居顶对齐
end 在box-align表示居底对齐
center 在box-align表示居中对齐
stretch 在box-align表示拉伸，拉伸到与父容器等高
4、box-pack
box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：
start | end | center | justify
start 在box-pack表示水平居左对齐
end 在box-pack表示水平居右对齐，如下图所示
center 在box-pack表示水平居中对齐，如下图所示
justify 在box-pack表示水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）
盒子样式
1、box-shadow 向框添加一个或多个阴影
例 box-shadow: 10px 10px 5px #888888;
box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。