CSS整理

CSS Class命名规范

CSS命名由小写的英文单词或组合命名，单词与单词之间通过“-”连接，常用的CSS命名规范有页面结构命名规范，导航命名，功能命名以及文本命名规范等。

1.页面结构

  整个页面：page
  首页：homepage
  二级页面子页面：subpage
  页头：head / header
  页面主体：main
  内容：content / container 
  页尾：foot / footer/ (或命名为 copyright用于底部)
  容器：container
  导航：nav 
  侧栏：sidebar 
  栏目：column 
  页面外围控制整体布局宽度：wrapper 
  左中右：left  center  right
  外套：wrap / wrapper

2.导航

  导航：nav / navbar / navigation / nav-wrapper 
  顶导航：topnav
  主导航：mainnav
  子导航：subnav
  边导航：sidebar
  左导航：leftsidebar / sidebar_a
  右导航：rightsidebar / sidebar_b
  菜单：menu
  子菜单：submenu
  下拉：drop
  下拉菜单：dorpmenu
  链接菜单：links
  标题：title
  摘要：summary

3.功能

  登陆：login 
  登录条：loginbar 
  注册：register 
  搜索：search 
  搜索条：searchbar
  搜索输入框：searchlnput
  功能区：shop 
  工具条：tool / toolbar
  标题：title 
  加入：joinus 
  状态：status 
  按钮：btn 
  下载：download 
  滚动：scroll 
  标记箭头：arr / arrow
  面包屑导航：breadcrumb

  标签页：tab 
  文章列表：list 
  新闻列表：list-news
  提示信息：msg 
  当前的:  current 
  小技巧：tips 
  栏目标题：title 
  图标:  icon 
  商标：label
  注释：note 
  指南：guild 
  服务：service 
  网站地图：sitemap
  网站信息：siteinfo

  标志：logo 
  广告：banner 
  热点：hot 
  新闻：news 
  投票：vote 
  合作伙伴：partner 
  友情链接：friendlink / link
  版权：copyright 
  信誉：siteinfoCredits
  法律信息：siteinfoLegal

4.CSS样式表文件命名 

  index.css： 一般用于首页建立样式
  head.css： 头部样式，当多个页面头部设计风格相同时使用。
  style.css：独立页面所使用的样式文件。
  global.css：页面样式基础，全局公用样式，页面中必须包含。
  layout.css：布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
  module.css：模块，用于产品类页，也可与其它样式配合使用。
  master.css：主要的样式表
  columns.css：专栏样式
  themes.css：主体样式
  forms.css：表单样式
  font.css： 文字样式
  print.css： 打印样式
  mend.css：补丁，基于以上样式进行的私有化修补。

5.一些可缩写的前缀或者后缀：

1.如果是模块，可以这样前缀：
    弹出：pop                   公共：global（缩写：gb）
    标题：title（缩写：tit）          提示：hint
    菜单：menu                   信息：info
    预览：preview（缩写：pvw）     导航：nav

2.类型：
    按钮：btn                     文本：txt
    段落：p                      图标：icon
    颜色：color（缩写：c）          背景：bg
    边框：border（缩写：bor）

3.作用：
   设置：set                   添加：add
   删除：del                   操作：op
   密码：pwd                  导入：inc

4.状态：
   成功：suc
   失败：lost
   透明：tran

注意事项：
  1.一律小写; 
  2.尽量用英文; 
  3.可加中横(search-btn)和下划线(search_btn); 
  4.尽量不缩写，除非一看就明白的单词。 



命名示例：
 文本输入框： .input_txt
 密码输入框： .input_pw
 段落文本颜色： .txt_color_p
 相册弹出的设置层： .pop_set_photo
 登录密码输入框： .input_pwd_login
 日志设置成功提示： .hint_logsetsuc
 公共提示： .hint_gb

animation和transition

	触发条件	状态	CSS属性	循环遍历	JS结合	子属性
transition(过渡)	需要	2种	不可修改	无法	易于	少
animation(动画)	无需	无限制	可修改	允许	不易于	多

transition

属性	说明	属性值
transition-property	规定设置过渡效果的 CSS 属性的名称。	all（所有属性活得过渡效果）none(没有属性活得过渡效果) property(定义应用过渡效果的css属性列表，逗号分割)
transition-duration	规定完成过渡效果需要多少秒或毫秒。	6s，过渡时间
transition-timing-function	规定速度效果的速度曲线。	linear(相同速度过渡) / ease(慢-快-慢) / ease-in(慢速开始) / ease-out(慢速结束) / ease-in-out(慢速开始结束) / cubic-bezier(n,n,n,n) 自定义（0-1）之间
transition-delay	定义过渡效果何时开始。	6s ，定义时间延迟开始

div
{
    width:100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
    -o-transition: width 2s; /* Opera */
}

animation

div
{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。 阅读关于 initial的介绍。
inherit	从父元素继承属性。 阅读关于 initinherital的介绍。

background

属性	说明	CSS	常用值
background-color	指定要使用的背景颜色	1
background-position	指定背景图像的位置	1
background-size	指定背景图片的大小	3
background-repeat	指定如何重复背景图像	1	no-repeat
background-origin	指定背景图像的定位区域	3
background-clip	指定背景图像的绘画区域	3	border-box（背景绘制在方框内，剪成方框）padding-box（绘制在衬距方框）content-box（绘制成内容方框，基于内容背景）
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	指定要使用的一个或多个背景图像	1

border

/* 边框宽度 | 边框样式 | 边框颜色 */
border: medium dashed green;

border-style

边框样式

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

border-radius

圆角

color

属性	说明	CSS
opacity	设置一个元素的透明度级别	3

flex弹性盒子

属性	说明	CSS
flex	复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。	3
flex-grow	设置或检索弹性盒的扩展比率。	3
flex-shrink	设置或检索弹性盒的收缩比率。	3
flex-basis	设置或检索弹性盒伸缩基准值。	3
flex-flow	复合属性。设置或检索弹性盒模型对象的子元素排列方式。	3
flex-direction	该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。	3
flex-wrap	该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。	3
align-content	在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。	3
align-items	定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。	3
align-self	定义flex子项单独在侧轴（纵轴）方向上的对齐方式。	3
justify-content	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。	3
order	设置或检索弹性盒模型对象的子元素出现的順序。	3

flex-direction和flex-wrap

值	描述
flex-direction	可能的值： row row-reverse column column-reverse initial inherit 默认值是 “row”。 规定灵活项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit 默认值是 “nowrap”。 规定灵活项目是否拆行或拆列，是否换行。nowrap不换行 / wrap换行

对齐方式

align-content(内容布局配置)

属性	说明	测试
stretch	默认值。元素被拉伸以适应容器。 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。	测试 »
center	元素位于容器的中心。 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）	测试 »
flex-start	元素位于容器的开头。 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。	测试 »
flex-end	元素位于容器的结尾。 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。	测试 »
space-between	元素位于各行之间留有空白的容器内。 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。	测试 »
space-around	元素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

align-item(子项布局配置)(纵轴)

值	描述	测试
stretch	默认值。元素被拉伸以适应容器。 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。	测试 »
center	元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。	测试 »
flex-start	元素位于容器的开头。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。	测试 »
flex-end	元素位于容器的结尾。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。	测试 »
baseline	元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。	测试 »

align-self(单个子项配置)

子div单独设置aligin-item

justify-content(横轴)

值	描述	测试
flex-start	默认值。从行首起始位置开始排列。	测试 »
flex-end	从行尾位置开始排列。	测试 »
center	居中排列。紧凑居中	测试 »
space-between	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。	测试 »
space-evenly	均匀排列每个元素，每个元素之间的间隔相等。	测试 »
space-around	均匀排列每个元素，每个元素周围分配相同的空间。	测试 »