CSS:CSS学习总结

背景

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

1、规则声明顺序

因为CSS的样式具备层叠性和继承性,为了最小化代码量,规则的声明可以按照如下顺序:

  1. 常用标记
  2. 常用类
  3. 布局类
  4. 导航类
  5. 表格类
  6. 表单类
  7. 组件类

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

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

教程:http://www.w3school.com.cn/css/css_positioning.asp

3、利用伪元素清除浮动

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

教程:http://www.w3school.com.cn/css/css_pseudo_elements.asp

4、margin可以支持负数

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

教程:http://www.w3school.com.cn/css/css_margin.asp

5、属性选择器

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

教程:http://www.w3school.com.cn/css/css_selector_attribute.asp

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 }

教程:http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

备注

CSS不好学习,还是需要专门的人员来做,后端懂点CSS有利于更好的合作。

 
分类: CSS

CSS:CSS学习总结的更多相关文章

  1. DIV+CSS系统学习:转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  2. CSS入门级学习

    css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...

  3. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  4. CSS入门学习(转)

    一.基础学习 1.何为CSS CSS是Cascading Style Sheets(层叠样式表)的简称,是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语 言). CSS文件也可以 ...

  5. HTML&CSS基础学习笔记1.24-input标签的单选与多选

    单选和多选 单选框和多选框是用<input>标签来实现的. <input>标签的type属性值为"checkbox"时,表示多选框,为"radio ...

  6. HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表

    文本域 <textarea>标签定义多行的文本输入控件. 平时在网页上的一些需要输入比较多的内容的输入框,比如回复帖子,回答问题等,都可以用<textarea>标签. < ...

  7. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  8. HTML/CSS/JavaScript学习总结(转)

    HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...

  9. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

  10. (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

随机推荐

  1. exit() _exit()

    图 C程序的启动与终止 差别: _exit()函数:直接使进程停止执行,清除其使用的内存空间,并销毁其在内核中的各种数据结构; exit()函 数则在这些基础上作了一些包装,在运行退出之前加了若干道工 ...

  2. Oracle利用存储过程性 实现分页

    分页的简单配置 在上一次已经说过了 这边说说怎么在存储过程中实现分页 首先建立存储过程 參考 http://www.cnblogs.com/gisdream/archive/2011/11/16/22 ...

  3. JavaScript语言基础知识11

    JavaScript字符的比较. 在接下来的学习内容的开始,我们先来看一下alert()此功能,它是一个消息框. OK,接下来正式介绍代码: <HTML> <HEAD> < ...

  4. POJ 2724 Purifying Machine(最大独立集)

    POJ 2724 Purifying Machine 题目链接 题意:这题题意有点没看懂.看了别人的题解, 给出m串长度为n的01串. 有些串中可能包括,这种串能够表示两个串,为1 和为0. 反复的算 ...

  5. 算法如功夫——C++ 用递归函数计算n的阶乘n!

    算法如功夫,套路练久了,才干应用自如! 学功夫不能死练,知其所以然,取长补短! #include <iostream.h> int main(int argc, char* argv[]) ...

  6. Aspose.Words 直接写response导出docx文档显示文件已损坏需要修复的解决办法

    使用Aspose.Words的Document.Save(HttpResponse response, string fileName, ContentDisposition contentDispo ...

  7. MyEclipse新建Web Project报错

    1.详细报错例如以下图 2.报错原因 3.解决方法

  8. mcstructs-MircoCStructs用C语言实现的微型数据结构库

    以C语言的方式,我将逐步实现以下算法: 我的Github地址为:https://github.com/tfa2012/mcstructs 1 线性链表 2 环形缓冲区 3 Hash表

  9. 常见ActiveX控件下载大全

    ActiveX是微软对于一系列策略性面向对象程序技术和工具的称呼,ActiveX控件可以在Windows窗体和Web程序上使用,所以不管是什么语 言开发的应用程序只要在windows窗体和html页面 ...

  10. 【Android开发日记】妙用 RelativeLayout 实现3 段布局

    在设计过程中,我们经常会遇到这样的需求: 把一条线3控制,左对齐左控制,右侧控制右对齐,中间控制,以填补剩余空间. 或者一列内放3个控件,上面的与顶部对齐,以下的沉在最底部,中间控件是弹性的.充满剩余 ...