一、
1. css必须写在<head></head>里面的<style></style>里面

2. css 由选择器 + 规则组成, 规则由属性和值组成 ，格式示例：div{color:red;}

3. 常用的选择器有：标签选择器（类型选择器）、class选择器（类选择器）、id选择器、后代选择器、 组合选择器和并列选择器等等

4. class选择器与id选择器的区别是，class可以样式重用，而id不行，因为id就像是人的身份证，是唯一的

5.层居中的要决：1、有宽度 2、左右外补丁要为auto 例如div{width:200px; margin:auto;}

6.边框三要素：颜色 大小 形状 例如 div{border:#F00 1px solid;}

7.高度=行高，字就可以垂直居中 例如div{height:200px; line-height:200px;}

8. 标签还可以分为行内标签和块级标签，行内标签的占用空间取决于内容（例如 a、span），块级标签不管内容多与少都会占用一整行（例如 div、 p）。由于行内标签一般不支持

width、height，所以排版过程中都会用块级标签来布局；如果有需要时，可以将行元素转换为块元素。

9.如果需要块级标签排版在同一行，只需要给它们都加上float:left的规则即可

10.背景图默认会平铺（也叫重复），如果想背景图水平居右，垂直居中，不重复的话，可以写background:url(bg.jpg) right center no-repeat

11.外部文件用<link href="XXX.css"  rel="stylesheet" type="text/css" />

12.优先级算法： 选择器的总分数高，优先级就高。 100分/id选择器     10分/class 选择器    1分/标签选择器    分数相等的，后面的覆盖前面的（就近原则）

13.清除浮动有四种常用的方法
   1）给父亲层加一个子层<div class="clear"></div>  其中 .clear{clear:both;}
    缺点：多一个空节点
   2）给父亲层加一个高度
    缺点：不适合内容高度不确定的情况
   3）给父亲层加一个float属性
    缺点：不适合父亲层需要居中的情况
   4）给父亲层加 overflow:hidden; _height:1%;
    缺点：_height:1%;的写法不符合W3C规范

14.一个标签（容器）与另外一个标签之间的距离，要靠外补丁margin来实现，而一个标签内部如果有多行文本，每行文本之间的距离要靠行高line-height来实现

15.行高的特点是文本的上下空白会相等，因此当一个容器里面只有一行文本，容器的height等于line-height时，文本便可以垂直居中

CSS小结的更多相关文章

  1. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  2. CSS 小结笔记之浮动

    在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...

  3. 2015第10周四-CSS小结

    这两天做前台页面发现个人在CSS前端方法很多基础知识都忘了,晚上又搜索学习了下,把相关内容摘录总结. CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declara ...

  4. ASP.NET CSS 小结

    1.ASP.NET 引用CSS 1.Site.master里面设置webopt <webopt:bundlereferencerunat="server"path=" ...

  5. CSS 小结笔记之图标字体（IconFont）

    本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...

  6. CSS 小结笔记之em

    1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...

  7. CSS 小结笔记之伸缩布局 (flex)

    CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...

  8. CSS 小结笔记之定位

    定位也是Css中一个非常强大的属性.定位主要是用来移动盒子,将其移动到我们想要的位置. 定位分为两部分 1.边偏移 left | right |top |bottom:偏移大小:(边偏移一般制定上就不 ...

  9. CSS 小结笔记之清除浮动

    浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...

随机推荐

  1. Java之美[从菜鸟到高手演练]之JDK动态代理的实现及原理

    Java之美[从菜鸟到高手演练]之JDK动态代理的实现及原理 JDK动态代理的实现及原理 作者:二青 邮箱:xtfggef@gmail.com     微博:http://weibo.com/xtfg ...

  2. 异常详细信息: System.Web.Hosting.HostingEnvironmentException: 访问 IIS 元数据库失败 解决方法

    访问IIS元数据库失败 同理,给操作系统的新建用户赋予IIS操作权限同样可以采用该命令来处理 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错 ...

  3. （1）定义一个接口CanFly，描述会飞的方法public void fly(); （2）分别定义类飞机和鸟，实现CanFly接口。 （3）定义一个测试类，测试飞机和鸟，在main方法中创建飞机对象和鸟对象， 再定义一个makeFly()方法，其中让会飞的事物飞。并在main方法中调用该方法， 让飞机和鸟起飞。

    package b; public interface CanFly { public void fly(); } package b; public class FeiJi implements C ...

  4. Task<TResult>的使用

    https://msdn.microsoft.com/en-us/library/dd321424(v=vs.110).aspx Represents an asynchronous operatio ...

  5. CUBRID学习笔记23 关键字列表

    先放上特殊的字符 Backtick Symbol - `    反引号 同撇 Double Quotes - "      双引号 Square Brackets - [  中括号 如    ...

  6. ServiceStack.OrmLite 笔记5 改

    修改 db.Update(new Person { Id = 1, FirstName = "Jimi", LastName = "Hendrix", Age ...

  7. HDU 2222 Keywords Search（查询关键字）

    HDU 2222 Keywords Search(查询关键字) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K ...

  8. Android——例子：简单计算器

    今天没事干,做了个单击事件的练习. 截图如下:(一个小小的计算器) XMl文件中的代码: <LinearLayout xmlns:android="http://schemas.and ...

  9. 可以考虑使用SublimeText编辑器替代notepad++了

    大概是去年吧,这款编辑器神一般的出现在我面前,经过我小心翼翼的试用后发现并不是那么太顺手,插件配置都不太成熟,如Package Control. 最喜欢用它的zencoding还得专门开个小窗:ang ...

  10. git-github-svn你们都是个什么东东

    Git 和 GitHub 有什么区别  百科中是这样说的 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. GitHub 是一个面向开源及私有软件项目的托管平台,因为 ...