Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Div+CSS > CSS:CSS学习笔记总结【转】
隐藏/显示侧边栏

CSS:CSS学习笔记总结【转】

2013-10-16 14:01    来源:http://www.cgner.com    责任编辑:程管网    字号【

背景

CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验。

1、规则声明顺序

因为CSS的样式具备层叠性和继承性,为了最小化代码量,规则的声明可以按照如下顺序:
常用标记
常用类
布局类
导航类
表格类
表单类
组件类

2、盒子模型、文档流、定位和浮动一定要清楚

盒子模型:浏览器把每种标记都当做一个盒子,有两种盒子(内联和框),他们在文档流中的布局模式是不同的。
文档流:框盒子会被从上到下的布局,内联盒子会被从左到右、从上到下的布局。
定位:可以修改框盒子的定位方式,static(正常的文档流中的位置)、absolute(相对于最近一个被定位(非static定位)了的祖先元素的位置,脱离了文档流)、relative(相对于正常的文档流的位置,保留原来的位置)、fixed(相对于窗口,脱离了文档流)。
浮动:浮动会导致元素脱离文档流,元素会浮动到父亲元素的边缘或其它浮动元素的边缘,如果遇到空间不够就会下降寻找足够的空间,浮动一般伴随着清除,清除会让元素的左右没有任何浮动元素。

3、利用伪元素清除浮动

1 .clear-fix:after
2 {
3     content: ".";
4     clear: both;
5     display: block;
6     height: 0;
7     visibility: hidden;
8 }

4、margin可以支持负数

Bootstrap中的栅格系统就用了这个特性,row的margin-left为-20px,span*的margin-left也为20px,这样就抵消了第一个span的margin。

5、属性选择器

1 [class*="span"] {
2      float: left;
3      min-height: 1px;
4      margin-left: 20px;
5 }

6、相邻兄弟选择器

 1 .main-content
2 {
3     background: url("../Images/accent.png") no-repeat;
4     padding-left: 10px;
5     padding-top: 30px;
6 }
7
8 .featured + .main-content
9 {
10     background: url("../Images/heroAccent.png") no-repeat;
11 }

更多
Tags 标签: CSS笔记
责任编辑:程管网
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |