CSS编码规范
- 命名规范：
语义化标签优先；基于功能命名、基于内容命名、基于表现命名；简略、明了、无后患
常见命名1
.wrap or .wrapper -- 用于外侧包裹
.container or .ct -- 包裹容器
.header -- 用于头部
.body -- 页面 body
.footer -- 页面尾部
.aside or .sidebar -- 用于侧边栏
.content -- 和header footer 对应，用于主要内容
.navigation -- 导航元素
.pagination -- 分页
常见命名2
.tabs > .tab -- tab 切换
.breadcrumbs -- 导航列表、面包屑
.dropdown -- 下拉菜单
.article -- 文章
.main -- 用于主体
.thumbnail -- 头像，小图像
.media -- 媒体资源
.panel -- 面板
.tooltip -- 鼠标放置上去的提示
.popup -- 鼠标点击弹出的提示
常见命名3
.button、.btn -- 按钮
.ad -- 广告
.subnav -- 二级导航
.menu -- 菜单
.tag -- 标签
.message或者.notice -- 提示消息
.summary -- 摘要
.logo -- logo
.search -- 搜索框
.login -- 登录
常见命名4
.register -- 注册
.username -- 用户名
.password -- 密码
.banner -- 广告条
.copyright -- 版权
.modal或者 .dialog -- 弹窗
常见命名5
var 名字 = {
状态: [ 'inverse', 'toggled', 'switched', 'original', 'initial', 'identified', 'disabled', 'loading', 'pending', 'syncing', 'default' ],
修饰: [ 'dark', 'light', 'shaded', 'flat', 'ghost', 'maroon', 'pale', 'intense', 'twisted', 'narrow', 'wide', 'smooth', 'separate', 'clean', 'sharp', 'aligned' ],
元素: [ 'pagination', 'modal', 'popup', 'article', 'story', 'flash', 'status', 'state', 'media', 'block', 'card', 'teaser', 'badge', 'label', 'sheet', 'poster', 'notice', 'record', 'entry', 'item', 'figure', 'square', 'module', 'bar', 'button', 'action', 'knob' ],
布局: [ 'navigation', 'wrapper', 'inner', 'header', 'footer', 'aside', 'section', 'divider', 'content', 'container', 'panel', 'pane', 'construct', 'composition', 'spacing', 'frame' ] }
- 书写规范:
- 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
- 为选择器分组时，将单独的选择器单独放在一行。
- 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
- 声明块的右花括号应当单独成行。
- 每条声明语句的
:后应该插入一个空格。 - 为了获得更准确的错误报告，每条声明都应该独占一行。
- 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
- 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如
, box-shadow）。 - 不要在
rgb()、rgba()、hsl()、hsla()或rect()值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。 - 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，
.5
代替0.5；-.5px代替-0.5px）。 - 十六进制值应该全部小写，例如，
#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。尽量使用简写形式的十六进制值，例如，用#fff代替#ffffff。 - 为选择器中的属性添加双引号，例如，
input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。 - 避免为 0 值指定单位，例如，用
margin: 0;代替margin: 0px;。
- 声明顺序:
相关的属性声明应当归为一组，并按照下面的顺序排列：- Positioning(布局方式、位置)：
position / top / right / bottom / left / float / display / overflow等 - Box model(盒模型、尺寸)：
border / margin / padding / width / height等 - Typographic(文本相关)：
font / line-height / text-align / word-wrap等 - Visual(视觉效果)：
background / color / transition / list-style等
- Positioning(布局方式、位置)：
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
垂直居中有4种实现方式
- 上下padding相等实现居中
html
<body>
<div class="content">
<p>我爱学习，学习使我快乐</p>
<p>我爱学习，学习使我快乐</p>
<p>我爱学习，学习使我快乐</p>
<p>我爱学习，学习使我快乐</p>
</div>
</body>
css
.content {
border: 1px solid red;
margin: 20px auto;
padding: 50px 0;
text-align: center;
}
.content>p {
border: 1px solid green;
}
上下padding相等
- 绝对定位实现居中
html
<body>
<div class="dialog">
<header>来自网页的消息:</header>
<p>欢迎来到饥人谷~最有爱的前端学习社区~~</p>
</div>
</body>
css
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -80px;
width: 240px;
height: 160px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 3px #aaa;
}
.dialog>header {
padding: 10px;
background: #000;
border-radius: 9px 9px 0 0;
color: #fff;
}
.dialog>p {
padding: 20px;
}
绝对定位
注：当width和height属性不固定时，可用transform: translate(-50%,-50%)代替margin-left: ; margin-right: ;
-
vertical-align:middle实现居中
html
<div class="box">
</div>
css
.box {
width: 400px;
height: 200px;
border: 1px solid orange;
text-align: center;
}
.box:before {
content:"";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box>img {
width: 180px;
vertical-align: middle;
background: #a0a0a0;
}
vertical-align
-
table-cell实现居中
html同上
css
.box {
width: 400px;
height: 200px;
border: 1px solid orange;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box>img {
width: 180px;
background: #a0a0a0;
}
效果同上
实现如下效果
效果范例
代码
网友评论