CSS应注意的基本知识
2017-05-24 16:59
337 查看
记录一些有用的css知识点,个人感觉非常重要,要补充记得留言
1. 相邻的兄弟姐妹元素
可以看见,外边距为两者中的较大者,而不是求和
2. 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
多出内容省略号表示
如果不能解决,更多内容参考这篇文章
为替换元素
简写
字体属性
简写
内容: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
内容区
/* 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
如
.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
外边距合并
即块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(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
当你需要在较大分辨率下得到固定宽度,用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
相关文章推荐
- css学习随笔,基本知识
- CSS编写的网页打开流畅相关知识与注意点
- CSS基本知识5-CSS对齐
- CSS基本知识
- css布局定位系列:(1)基本知识及正常流(Normal Flow)定位
- java程序员:开发系统要注意的基本知识!
- CSS基本知识1-CSS基本概念
- CSS基本知识8-CSS定位
- HTML/CSS一些需要注意的基础知识
- css常用注意事项及基础知识点
- JS学习笔记-1--基本知识和注意事项
- [HTML/CSS/JavaScript/PHP/MySQL]HTML基本知识
- CSS基本知识4-CSS行模型
- CSS基本知识0-命名规范
- 开发Java系统程序员要注意的基本知识
- java基本知识(2)----需要注意的小知识点
- css的基本知识
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM
- C 基本知识,注意点
- (一)php的基本知识和一些注意点