CSS应注意的基本知识

记录一些有用的css知识点，个人感觉非常重要，要补充记得留言

外边距合并

即块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。具体分三种情况：

1. 相邻的兄弟姐妹元素

<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

1. 当你需要在较大分辨率下得到固定宽度，用max-width
2. 为替换元素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的命名：

具体页面

1. 页面结构

• 容器: container
  页头：header
• 内容：content/container
• 页面主体：main
• 页尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 页面外围控制整体布局宽度：wrapper
• 左右中：left right center

2. 导航

• 导航：nav
• 主导航：mainnav
• 子导航：subnav
• 顶导航：topnav
• 边导航：sidebar
• 左导航：leftsidebar
• 右导航：rightsidebar
• 菜单：menu
• 子菜单：submenu
• 标题: title
• 摘要: summary

3. 功能

• 标志：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