CSS整理

Posted 黑胡子大叔的小屋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS整理相关的知识，希望对你有一定的参考价值。

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指定如何重复背景图像1no-repeat
background-origin指定背景图像的定位区域3
background-clip指定背景图像的绘画区域3border-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均匀排列每个元素，每个元素周围分配相同的空间。测试 »

以上是关于CSS整理的主要内容，如果未能解决你的问题，请参考以下文章

用html5或js功能或css实现特定方框内图像保存为图片功能。

css中，content这里啥意思，是那个方框是代表右边那个图标的，为啥代码不是图像显示呢

js中style的属性

element-ui自定义图标使用（引入项目图标是小方框）

Flex布局语法

Excel纵轴交叉，如图中怎么做到的，交叉点不是0，横轴只显示整数的刻度