整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
体属性：(font)
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性： (background)
色彩 {background-color: #FFFFFF;}
图片 {background-image: url();}
重复 {background-repeat: no-repeat;}
滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
位置 {background-position: left;}(水平) top(垂直);
简写方法 {background:#000 url(..) repeat fixed left top;} /*简写*/
字间距 {letter-spacing: normal;} 数值 /*设置字和字母的间距*/
对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进 {text-indent: 数值px;} /*一般给段落设置2em，缩进两个字符*/
垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal;/*设置文本的词间距，本质是控制空格间距*/
空格white-space: pre;(保留) nowrap;(不换行)
显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的值有很多，可以多研究*/
边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：width style color; /*简写*/
列表属性： (List-style)
类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
图像list-style-image: url(..);
定位属性： (Position)
Position: absolute; relative; static(元素默认的定位);
visibility: inherit; visible; hidden;（设置元素的可见性，分别是默认 可见 隐藏）
overflow: visible; hidden; scroll; auto;（设置溢出部分，分别是可见 隐藏 滚动 和自适应）
clip: rect(12px,auto,12px,auto) (裁切属性)
css属性代码大全
一 CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
二、CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
三、CSS符号属性：
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/
四、CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
五、CSS连接属性：
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}
六、CSS框线一览表：
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
CSS 属性： 字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式 {font:font-style font-variant font-weight font-size font-family}
2 字体类型 {font-family:"字体1","字体2","字体3",...}
3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字体风格 {font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字 间 距 {letter-spacing:数值|inherit|normal}
10 单词间距 {word-spacing:数值|inherit|normal}
11 字体变形 {font-variant:inherit|normal|small-cps }
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}
14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(Text Style)
序号 中文说明 标记语法
1 行 间 距 {line-height:数值|inherit|normal;}
2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:数值|inherit}
4 水平对齐 {text-align:left|right|center|justify}
5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 书写方式 {writing-mode:lr-tb|tb-rl}
背景样式
序号 中文说明 标记语法
1 背景颜色 {background-color:数值}
2 背景图片 {background-image: url(URL)|none}
3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(Box Style)
序号 中文说明 标记语法
1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 补 白 {padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值： thin|medium|thick|数值
4 边框颜色 {border-color:数值 数值 数值 数值} 数值：分别代表top、right、bottom、left颜色值
5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边 框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
7 宽 度 {width:长度|百分比| auto}
8 高 度 {height:数值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分类列表
序号 中文说明 标记语法
1 控制显示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目录列表 {list-style:目录样式类型|目录样式位置|url}
7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
更多交流，请登录bbs.520it.com
SS样式被称为“层叠样式表”，是一种网页制作不可或缺的技术，是用于修饰网页样式，达到设计效果的一种样式语言。
而由于样式效果非常多，在工作中并非所有的样式都会用到，因此经常可能遇到某些特定样式会突然想不起来的情况，更何况对于初学者来说遇到这种情况。
接下来就跟着小凡一起整理一下这些常用而易忘的css样式。
css样式的效果
01、文字超出部分显示省略号
单行文本的超出部分显示省略号。（一定要给元素本身设置宽度）
.title {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}CSS样式效果图
多行文本的超出部分显示省略号
.title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}CSS样式效果图
PS：建议加上word-break:break-all 否则遇到长单词会出现很神奇的布局情况。
图一
图二
图一未添加，图二添加后的不同效果
02、中英文(长单词)自动换行
word-break:break-all; 只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap;都起作用，强制不换行
PS:网页中英文单词通过“_”(下划线)和 “-”（中划线）连接的英文单词在编译处理是方式是截然不同的。
下划线是程序命名方法下划线命名法的规范,其他命名规范还有驼峰式命名。属于程序专用的命名规范。可以连接想连的部分为一个变量名，不是单词。
下划线连接单词效果
中划线是英语复合词有连接2个单词的意思，但前后是2个独立单词。
中划线连接单词效果
03、设置表单输入框placeholder的样式
input::-webkit-input-placeholder {
color:skyblue;
text-align: center;
}
input::-ms-input-placeholder {
color:skyblue;
text-align: center;
}
input::-moz-placeholder {
color:skyblue;
text-align: center;
}CSS样式效果图
04、不固定高度的元素文字垂直居中
兼容IE8：伪元素和inline-block/vertical-align
.box::before {
content:"";
display: inline-block;
height: 100vh;
vertical-align: middle;
text-align: center;
}CSS样式效果图
不兼容IE8以下: flex布局
.box {
background: skyblue;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}CSS样式效果图
05、文字两端对齐
.wrap {
margin: 0 auto;
width: 800px;
text-align: justify;
text-justify: distribute-all-lines;
/* 兼容IE6-8 */
text-align-last: justify;
-moz-text-align-last: justify;
}CSS样式效果图
06、iOS页面中滑动卡顿
body,html {
-webkit-overflow-scrolling:touch
}07、设置滚动条样式
.wrap {
margin: 0 auto;
width: 300px;
height: 200px;
overflow: auto;
}
.wrap::-webkit-scrollbar {
/* 整体大小样式 */
width: 10px;
height: 10px;
}
.wrap::-webkit-scrollbar-thumb {
/* 滚动条里的滑块 */
border-radius: 10px;
background-color: skyblue;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,0.2) 55%,
rgba(255,255,255,0.2) 75%,
transparent 75%,
transparent);
}
.test::-webkit-scrollbar-track {
/* 滚动条的轨道 */
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #ededed;
border-radius: 10px;
}CSS样式效果图
08、隐藏滚动条但又可以滚动
.wrap {
margin: 0 auto;
width: 300px;
height: 200px;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.wrap::-webkit-scrollbar {
/* 整体大小样式 */
display: none;
}CSS样式效果图
09、css绘制三角
无边框三角
div {
width:0;
height:0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent rgba(0,0,0,0.3);
}CSS样式效果图
带边框三角
div {
position: relative;
width:0;
height:0;
border-width: 40px 0 40px 40px ;
border-style: solid;
border-color: transparent black ;
}
div::after {
content: "";
position: absolute;
top:-36px;
left:-38px;
border-width: 36px 0 36px 36px ;
border-style: solid;
border-color: transparent red ;
}CSS样式效果图
10、文字间的间距
text-indent 文章段落首行缩进
letter-spacing 字与字之间的间距
.wrap {
margin: 0 auto;
width: 600px;
text-indent: 2em;
letter-spacing: 10px;
}CSS样式效果图
11、禁止用户选中元素
有些时候不想让用户选中内容，复制网站上文字内容。
.wrap {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}12、元素占满整个屏幕
以往需要在做全屏遮罩功能的时候会设置height:100%。但是这种做法需要该遮罩层的所有父级元素都逐级设置高度才能使遮罩继承高度属性。所以可以使用100vh单位来实现。
.mask {
width:100%;
height: 100vh;
background: rgba(0,0,0,0.6);
position: fixed;
top: 0;
}CSS样式效果图
以上就是为学员们整理的针对工作中对商品/新闻等标题的样式处理，弹窗做法的一些经常遇到的css样式实现方法。
如果觉得有用可以收藏关注，同时还可以留言说出你想知道或者是遇到的不会的样式处理，我们还将继续推出后续内容，继续为大家解读别的常用css实用技巧以及其他的前端开发新技能，让我们期待下一期吧。
文末领资料
Web前端设计秘籍——30个工作中常用的CSS样式
eb前端入门到精通必会的CSS样式和属性，昨天更新了Web前端入门到精通必学的标签及属性大全，得到了很多同学的认可，有同学想要看接下来CSS以及JS的相关基础内容，今天他来了！
抽时间为大家总结了实际开发中必会的CSS、CSS3样式和属性（常用和不常用的内容都有标注），做成了网页版，以便于查询使用，对于初学者来说可以少走弯路，明确重点，时间诚可贵呀?！
盒模型：width，height，padding，margin，box-sizing，display，visibility
单词 | 描述 |
width | 设置元素的宽度 |
height | 设置元素的高度 |
padding-top | 设置元素上内边距 |
padding-right | 设置元素右内边距 |
padding-bottom | 设置元素内边距 |
padding-left | 设置元素左内边距 |
padding | 设置元素四个方向的内边距 |
margin-top | 设置盒子与上方盒子的距离 |
margin-right | 设置盒子与右方盒子的距离 |
margin-bottom | 设置盒子与下方盒子的距离 |
margin-left | 设置盒子与左方盒子的距离 |
margin | 设置在上、右、下和左四个方向的外边距 |
box-sizing | 规定计算一个元素实际宽高的方式 |
display | 设置元素表现的类型，例如： display:block;设置元素表现为块元素 |
visibility | 设置元素是否是可见的 |
常用文本样式属性：color，font-size，font-weight，font-style，text-decoration
单词 | 描述 |
color | 规定字体的颜色，也称为前景色 |
font-size | 设置字体大小 |
font-weight | 设置字体粗细 |
font-style | 设置字体样式 |
text-decoration | 设置添加到文本的装饰线 |
字体属性：font-family，@font-face
单词 | 描述 |
ont-family | 设置元素的字体 |
@font-face | 定义字体，例如：阿里巴巴普惠体 |
段落和行相关属性：text-indent，line-height，text-align，font
单词 | 描述 |
text-indent | 设置首行文本的缩进 |
line-height | 设置文本行间的距离（行高） |
text-align | 设置文本对齐方式 |
font | 设置所有字体属性 |
css的书写位置：style，link，@import
单词 | 描述 |
style | 1、内嵌式，书写在head标签对中，使用<style></style>标签对，里面书写css样式。例如： <head> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> 2、行内式，直接在标签上书写style属性设置css样式。这种方式不常用，了解即可 示例：<h1 style="color:blue;text-align:center">这是一个标题</h1> |
link | 链接外部样式文件,例如： <head> <link rel="stylesheet" href="css文件"> </head> |
@import | 导入样式规则 （不常用，了解即可） 例如：@import url('css文件') |
层叠性和选择权重：!important
单词 | 描述 |
!important | 提升权重（不常用，了解即可） |
伪元素：::before，::after，::selection，::first-letter，::first-line
单词 | 描述 |
::before | 作为匹配选中元素的第一个子元素，必须设置content属性 |
::after | 作为匹配选中元素的最后一个子元素，必须设置content属性 |
::selection | 设置文档中被用户高亮的部分，即使用鼠标圈选的部分（不常用，了解即可） |
::first-letter | 选择块元素中的第一个字母设置样式（不常用，了解即可） |
::first-line | 选择块元素中的第一行全部文字设置样式（不常用，了解即可） |
伪类：:link，:visited，:active，:hover
单词 | 描述 |
:link | 选择所有未被访问的超级链接 |
:visited | 选择所有访问过的超级链接 |
:active | 选择被用户激活的元素 |
:hover | 选择鼠标悬停的元素 |
css3新增伪类：:empty，:focus，:enabled，:disabled，:checked，:root （不常用，了解即可）
单词 | 描述 |
:empty | 选择没有任何子级的元素 |
:focus | 选择当前获得焦点的元素 |
:enabled | 选择已启用的元素 |
:disabled | 选择禁用的元素 |
:checked | 选择选中的输入元素（仅适用于单选按钮或复选框） |
:root | 选择根元素，即标签 |
标签选择器和id选择器 ：element、#id
单词 | 描述 |
element | 标签选择器，直接使用元素的标签名，表示选择指定元素名称的所有元素 示例：p{color:red;}选择所有的p标签 |
#id | id选择器，使用井号#作为前缀，表示选择指定id的元素 示例：#firstname{color:yellow;} 选择id=firstname" 的元素 |
class 选择器：.class
单词 | 描述 |
.class | class选择器，使用点.作为前缀， 表示选择指定类名的元素 p示例：.intro{color:red;} 选择class="intro" 的元素 |
复合选择器：后代，交集，并集
单词 | 描述 |
element1 element2 | 后代选择器，使用空格分隔两个元素 示例：.box p{} 表示选择类名为box的标签的后代元素p标签 |
element1.class | 交集选择器 示例：h3.spec{} 表示选择有.spec类的<h3>标签 |
element1,element2 | 并集选择器，也叫分组选择器，使用逗号隔开 示例：ul, ol{} 表示同时选择<ul>标签和<ol>标签 |
元素关系选择器：子选择器，相邻兄弟，通用兄弟选择器
单词 | 描述 |
element>element | 子选择器，使用 > 符号分隔两个元素 示例： div > p {} 选择<div>下的所有子级<p>元素 |
element+element | 相邻兄弟选择器，使用 + 分隔两个元素 示例：div + p {}选择所有紧接着 <div> 元素之后的第一个<p>元素 |
element1~element2 | 通用兄弟选择器，使用 ~ 分隔两个元素 示例：p~ul {}选择同一父元素下的 p 元素之后的每一个 ul 元素 |
序号选择器：:first-child，:last-child，:nth相关
单词 | 描述 |
:first-child | 匹配其父元素中的第一个子元素 示例：p:first-child{}匹配<p>的父元素的第一个<p>元素 |
:last-child | 匹配父元素中最后一个子元素 示例：p:last-child{}匹配<p>的父元素下最后一个<p>元素 |
:nth-child(n) | 匹配父元素中的第 n 个子元素 示例：p:nth-child(2)匹配<p>的父元素中第2个子元素<p>标签 |
:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素 （不常用，了解即可） 示例：p:nth-of-type(2){}指定每个<p>元素匹配同类型中的第2个同级兄弟元素 |
:nth-last-child(n) | 匹配属于其父元素的第n个子元素的所有元素，从最后一个子元素开始计数 （不常用，了解即可） 示例：p:nth-last-child(2){}指定每个<p>元素匹配同类型中的倒数第2个同级兄弟元素 |
:nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素，从最后一个子元素开始计数（不常用，了解即可） 示例：p:nth-last-of-type(2){}指定每个<p>元素匹配同类型中的倒数第2个同级兄弟元素 |
属性选择器：[attribute]、[attribute=value]、[attribute^=value]、[attribute$=value]、[attribute*=value] 、[attribute~=value] 、[attribute|=value] （不常用，了解即可）
单词 | 描述 |
[attribute] | 选择指定属性的元素 |
[attribute=value] | 选择指定了属性和值的元素 |
[attribute^=value] | 选择属性值带指定的值开始的元素 |
[attribute$=value] | 选择属性值带指定的值结尾的元素 |
[attribute*=value] | 选择元素属性值包含指定值的元素 |
[attribute~=value] | 选择属性值包含一个指定单词的元素 |
[attribute|=value] | 选择属性值以指定值开头的元素 |
浮动：float，BFC，overflow，clear
单词 | 描述 |
float | 设置元素浮动 |
BFC | 块级格式化上下文，它是页面上一个独立的容器 |
overflow | 溢出隐藏：溢出盒子边框的内容会被隐藏，也可以让盒子形成BFC（块级格式上下文） |
clear | 清除元素的浮动 |
定位：position，relative，top，bottom，left，right，absolute，z-index，fixed
单词 | 描述 |
position | 规定元素的定位类型 |
relative | 定义相对定位 |
top | 设置定位元素距离顶部的距离 |
bottom | 设置定位元素距离底部的距离 |
left | 设置定位元素距离左侧的距离 |
right | 设置定位元素距离右侧的距离 |
absolute | 定义绝对定位 |
z-index | 设置定位元素的堆叠顺序，数值大的会盖住数值小的 |
fixed | 定义绝对定位 |
鼠标样式：cursor
单词 | 描述 |
cursor | 设置光标的形状 |
边框：border相关，属性（solid，dashed，dotted）
单词 | 描述 |
border-width | 设置边框的宽度 |
border-style | 设置边框线的形状 |
border-color | 设置边框的颜色 |
border-top-width | 设置上边框宽度 |
border-right-width | 设置右边框宽度 |
border-bottom-width | 设置下边框宽度 |
border-left-width | 设置左边框宽度 |
border-top-style | 设置上边框样式 |
border-right-style | 设置右边框样式 |
border-bottom-style | 设置下边框样式 |
border-left-style | 设置左边框样式 |
border-top-color | 设置上边框颜色 |
border-right-color | 设置右边框颜色 |
border-bottom-color | 设置下边框颜色 |
border-left-color | 设置左边框颜色 |
border-top | 上方向边框样式的复合写法 |
border-bottom | 下方向边框样式的复合写法 |
border-right | 右方向边框样式的复合写法 |
border-left | 左方向边框样式的复合写法 |
border | 边框的复合写法，设置所有的边框属性 |
solid | 定义实线边框 |
dashed | 定义虚线边框 |
dotted | 定义点状线边框 |
圆角：border-radius
单词 | 描述 |
border-top-left-radius | 设置左上方的圆角 |
border-top-right-radius | 设置右上方的圆角 |
border-bottom-left-radius | 设置左下方的圆角 |
border-bottom-right-radius | 设置右下方的圆角 |
border-radius | 设置圆角的复合写法 |
盒子阴影：box-shadow
单词 | 描述 |
box-shadow | 给元素添加阴影效果 |
背景：background相关
单词 | 描述 |
background-color | 设置背景颜色 |
background-image | 设置盒子的背景图片 |
设置线性渐变背景 | |
设置径向渐变背景 | |
background-repeat | 设置背景图像是否重复 |
background-size | 设置背景图片大小 |
background-clip | 设置背景的绘制区域（不常用，了解即可） |
background-origin | 设置背景图片显示区域的位置（不常用，了解即可） |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动（不常用，了解即可） |
background-position | 设置背景图像的位置 |
background | 设置背景样式的复合写法 |
浏览器前缀：-webkit-，-moz-，-ms-，-o-
单词 | 描述 |
-webkit- | 谷歌浏览器的私有前缀 |
-moz- | 火狐浏览器的私有前缀 |
-ms- | IE、Edge浏览器的私有前缀 |
-o- | 欧朋浏览器的私有前缀 |
2D/3D转换：transform，transform
单词 | 描述 |
transform | 对元素进行旋转、缩放、移动或倾斜 |
transform-origin | 设置元素变换的原点 （不常用，了解即可） |
scale | 设置缩放变形（不常用，了解即可） |
skew | 设置斜切变形（不常用，了解即可） |
translate | 设置位移变形 |
perspective | 设置透视强度，即“人眼到舞台的距离” |
还需要总结什么 ？需要的同学留言，做我的粉丝我会宠你 接下来我会抽时间把这15年的Web全栈相关的经验和知识从入门到精通逐一总结出来
*请认真填写需求信息，我们会在24小时内与您取得联系。
