记录一些有用的css知识点,个人感觉非常重要,要补充记得留言
外边距合并
即块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并。具体分三种情况:
- 相邻的兄弟姐妹元素
<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
可以看见,外边距为两者中的较大者,而不是求和
2. 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
<div class="parent">
<p>外边距被合并</p>
</div>
<style>
.parent {
margin-top: 20px;
width: 100px;
height: 100px;
background: #ccc;
}
.parent p {
display: block;
margin-top: 20px;
background: red;
}
</style>
css单词断词、换行、省略号
断词换行
word-break: keep-all;
word-wrap: break-word;
多出内容省略号表示
<p>webpack supports pre-processing files via loaders. This allows you to bundle any static </p>
p {
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
如果不能解决,更多内容参考这篇文章
max-width、min-width
- 当你需要在较大分辨率下得到固定宽度,用max-width
- 为替换元素
img/object/video/iframe
设置max-width:100%
常用的简写、合并属性
- 背景属性
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
简写
background: #000 url(images/bg.gif) no-repeat top right;
- 字体属性
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
简写
font: italic bold .8em/1.2 Arial, sans-serif;
清除浮动代码
/*清除浮动*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
关于团队合作的css命名规范
命名规范转自http://www.alloyteam.com/2011/10/css-on-team-naming/
常用的css命名规则
- 头:header
- 内容:content/container
- 尾:footer
- 导航:nav
- 侧栏:sidebar
- 栏目:column
- 页面外围控制整体布局宽度:wrapper
- 左右中:left right center
- 登录条:loginbar
- 标志:logo
- 广告:banner
- 页面主体:main
- 热点:hot
- 新闻:news
- 下载:download
- 子导航:subnav
- 菜单:menu
- 子菜单:submenu
- 搜索:search
- 友情链接:friendlink
- 页脚:footer
- 版权:copyright
- 滚动:scroll
- 内容:content
- 标签页:tab
- 文章列表:list
- 提示信息:msg
- 小技巧:tips
- 栏目标题:title
- 加入:joinus
- 指南:guide
- 服务:service
- 注册:register
- 状态:status
- 投票:vote
- 合作伙伴:partner
注释的写法
/* Footer /
内容区
/ End Footer */
id的命名:
具体页面
- 页面结构
- 容器: container
页头:header - 内容:content/container
- 页面主体:main
- 页尾:footer
- 导航:nav
- 侧栏:sidebar
- 栏目:column
- 页面外围控制整体布局宽度:wrapper
- 左右中:left right center
- 导航
- 导航:nav
- 主导航:mainnav
- 子导航:subnav
- 顶导航:topnav
- 边导航:sidebar
- 左导航:leftsidebar
- 右导航:rightsidebar
- 菜单:menu
- 子菜单:submenu
- 标题: title
- 摘要: summary
- 功能
- 标志:logo
- 广告:banner
- 登陆:login
- 登录条:loginbar
- 注册:regsiter
- 搜索:search
- 功能区:shop
- 标题:title
- 加入:joinus
- 状态:status
- 按钮:btn
- 滚动:scroll
- 标签页:tab
- 文章列表:list
- 提示信息:msg
- 当前的: current
- 小技巧:tips
- 图标: icon
- 注释:note
- 指南:guide
- 服务:service
- 热点:hot
- 新闻:news
- 下载:download
- 投票:vote
- 合作伙伴:partner
- 友情链接:link
- 版权:copyright
class的命名
-
颜色:使用颜色的名称或者16进制代码
如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; } -
字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; } -
对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; } -
标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }
注意事项
- 尽量用英文;
- 尽量不缩写,除非一看就明白的单词.
- 主要的 master.css
- 模块 module.css
- 基本共用 base.css
- 布局,版面 layout.css
- 主题 themes.css
- 专栏 columns.css
- 文字 font.css
- 表单 forms.css
- 补丁 mend.css
- 打印 print.css