2.Css【样式】

2.Css【样式】

Calc【计算】

width: calc(100% - 54px); //计算

Font【文字】

color: red;  		 //字体颜色
font-size: 16px;  	 //字体大小 
font-family: Arial;  //字体名称 
font-weight: bold;   //加粗 
font-style: italic;  //倾斜 
letter-spacing: 1px; //字间距
line-height: 16px;        //行高 

Overflow【溢出显示】

overflow: visible;  // 默认，溢出显示 
overflow: hidden; // 溢出隐藏 
overflow: auto; // 若溢出显示滚动条 
overflow: scroll; // 总是显示滚动条 

white-space: nowrap;  // 溢出不换行,显示单行 
text-overflow: ellipsis;  // 溢出省略 
display: -webkit-box; // 设置弹性盒模型 
-webkit-line-clamp: 5;  // 设置显示行数 
-webkit-box-orient: vertical; // 从上到下垂直排列元素 

Text【文本】

text-align: center; //文本水平居中 
text-align: justify;  //文本两端对齐 
text-decoration: none;  //无下划线 
text-decoration: line-through;  //删除线 
text-decoration: underline; //下划线 
text-indent: 1px; //首行缩进 
text-shadow: 4px 8px 16px rgba(156, 156, 156, 0.8); //文字阴影 

vertical-align: middle; //垂直居中 

Border【边框】

border-width: 1px;    //边框宽度 
border-color: red;    //边框颜色 
border-style: solid;  //实线 
border-style: dashed; //虚线 
border-style: double; //双实线 
border-radius: 50%;   //圆角 

Outline【外边框】

outline-width: 1px;    //外边框，不占据空间
outline-color: yellow; //外边框颜色，不占据空间 
outline-style: dashed; //外边框样式，不占据空间 

Background【背景】

opacity: .5;  //透明度 
background-image: url();  //插入图片 
background-repeat: no-repeat; //显示一张 
background-size: 100% 100%; //铺满盒子 
background-color: transparent;  //背景色透明 
background-position: 10% 10%; //背景图定位 
background-position: center;  //背景图居中 
background-attachment: scroll;  //默认滚动 
background-attachment: fixed; //固定不动 
background: linear-gradient(to right,rgba(60,80,155,1) 0%, rgba(0,120,170,.8));  // 背景色渐变 

Position【定位】

position: relative; //相对定位，不脱离文档，最佳包含块 
position: absolute; //绝对定位，脱离文档，最佳被包含块 
position: fixed;  //固定定位 
position: sticky; //粘性定位 
z-index: 1; //层叠级数，越大越靠前 

a【超链接】

a:hover {color: red}; //鼠标悬停，可用于所有元素，不只是链接，:hover 必须位于 :link 和 :visited 后，这样样式才能生效
a:visited {color: green}; //已访问
a:active {color: yellow}; //点击时

Cursor【鼠标样式】

cursor:pointer; // 小手 
cursor:crosshair; // 十字 
cursor:not-allowed; //禁用

Css【选择器】

:first-child     //选中父元素中第一个子元素
:last-child 	 //选中父元素中最后一个子元素
:nth-child(n)    //选中父元素中正数第n个子元素
:nth-last-child(n)  //选中父元素中倒数第n个子元素
:nth-child(even) //基数,第一个子元素的下标是1
:nth-child(odd)  //偶数

Box【盒子】

box-sizing: border-box; // 盒子绝对宽高 
box-sizing: content-box;  // 默认,盒子弹性宽高 
box-shadow: 4px 8px 16px rgba(156, 156, 156, 0.8); // 盒子阴影 

盒子居中

display: flex;
justify-content: center;
align-items: center;

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;

盒子水平居中

width: 100%;
left: 50%;
transform: translateX(-50%);