1.外边距默认是透明的，因此不会遮挡其后的任何元素。
2.背景应用于由内容和内边距、边框组成的区域。
3.外边距可以是负值，而且在很多情况下都要使用负值的外边距。
4.不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。(由于IE5.X 和 6 在怪异模式中使用自己的非标准模型。)
5.那么如果把 border-style 设置为 none 会出现什么情况：尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了。
6.h1 {border-width: 20px;} 由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。所有 h1 元素都不会有任何边框，更不用说 20 像素宽了。
7.请始终把 border-style 属性声明到 border-color 属性之前。
8.如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。 border-color: transparent;
9.块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
10.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
11.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
12.把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
13.CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
14.CSS position 属性
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。---变为块，脱离文档流
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中

15.clip 属性剪裁绝对定位元素。 shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) 。
16.如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
17.top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
18.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效。
19.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
20.浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
21.clear 属性定义了元素的哪边上不允许出现浮动元素。
clear:left;是不是有点换行的味道
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。

22.<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"]，那么这个规则不能匹配示例标记，必须完全匹配。

23.

[attribute~=value] 用于选取属性值中包含指定词汇的元素。 词汇
[attribute*=value] 匹配属性值中包含指定值的每个元素。包含字串
:first-child 伪类向元素的第一个子元素添加样式。

24.

匹配第一个 <p> 元素

<html>

<head>

<style type="text/css">

p:first-child {

  color: red;

  }

</style>

</head>

<body>

<p>some text</p>

<p>some text</p>

</body>

</html>

　　

匹配所有 <p> 元素中的第一个 <i> 元素

<html>

<head>

<style type="text/css">

p > i:first-child {

  font-weight:bold;

  }

</style>

</head>

<body>

<p>some <i>text</i>. some <i>text</i>.</p>

<p>some <i>text</i>. some <i>text</i>.</p>

</body>

</html>

　

匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

<html>

<head>

<style type="text/css">

p:first-child i {

  color:blue;

  }

</style>

</head>

<body>

<p>some <i>text</i>. some <i>text</i>.</p>

<p>some <i>text</i>. some <i>text</i>.</p>

</body>

</html>

利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写为 p > *:first-child。

25.

height --元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。
line-height 属性设置行间的距离（行高）。不允许使用负值。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部

26.

替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

非替换元素：

(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

比如<p>wanmei.com</p>
浏览器将把这段内容直接显示出来。

【CSS】易错的更多相关文章

  1. css 易错点总结

    心得:思路清晰,细致,耐心. 慢慢来,先规划,再动手,先整体后局部,规划好整个页面先. 命名合理,且小心重复 防止标签嵌套错误,以及忘记闭合 行高要在字体后面,如下: 正确:font:400 15px ...

  2. css易错点总结

    传智老师说:找工作要问调不调IE6,同样的工作待遇,如果不用调IE6开12000工资,要调IE6,直接加价到15000,因为调IE6能累死人,气死人. 行高要在字体后面,如下: 正确:font:400 ...

  3. JavaScript易错知识点整理

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  4. JavaScript 易错知识点整理

    本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES ...

  5. Java五道输出易错题解析（避免小错误）

    收集了几个易错的或好玩的Java输出题,分享给大家,以后在编程学习中稍微注意下就OK了. 1. 看不见的空格? 下面的输出会正常吗? package basic; public class Integ ...

  6. 细节！重点！易错点！--面试java基础篇（二）

    今天来给大家分享一下java的重点易错点第二部分,也是各位同学面试需要准备的,欢迎大家交流指正. 1.字符串创建与存储机制:当创建一个字符串时,首先会在常量池中查找是否已经有相同的字符串被定义,其判断 ...

  7. 细节！重点！易错点！--面试java基础篇（一）

    今天来给大家分享一下java的重点易错点部分,也是各位同学面试需要准备的,欢迎大家交流指正. 1.java中的main方法是静态方法,即方法中的代码是存储在静态存储区的. 2.任何静态代码块都会在ma ...

  8. [SQLXML]FOR XML语法导出XML的易错之处

    原文:[SQLXML]FOR XML语法导出XML的易错之处 [SQLXML]FOR XML语法导出XML的易错之处 Version Date Creator Description 1.0.0.1 ...

  9. JavaScript易错点转载

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  10. PHP数据访问易错点（20161030）

    易错点: 1.造对象的时候括号里面的参数 写错了 $db = new MySQLi("localhost","root","789",&qu ...

随机推荐

  1. [转]glyphicons-halflings-regular字体 图标

    本文转自:http://www.ijquery.cn/?p=377 一.介绍 采用这种字体,我们可以避免网站制作中采用好多图片,一方面解决了浏览器的兼容性问题.另一方面,这些字体都是矢量字体,我们只要 ...

  2. AngularJS中的动画实现

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script ...

  3. SpringBoot和SpringCloud区别

    SpringBoot专注于快速方便的开发单个个体微服务.    SpringCloud是关注全局的微服务协调整理治理框架,它将SpringBoot开发的一个个单体微服务整合并管理起来,    为各个服 ...

  4. redis(4)事务

    一.事务 一般来说,事务必须满足4个条件,也就是我们常说的ACID: 1)Atomicity 原子性:一个事务中的所有操作要么全部完成,要么全部不完成,不会结束在中间的某个环节.事务在执行过程中发生错 ...

  5. springMVC介绍及配置

    Spring MVC的Controller用于处理用户的请求.Controller相当于Struts 1里的Action,他们的实现机制.运行原理都类似. Controller是个接口,一般直接继承A ...

  6. swoole安装

    转自:http://blog.csdn.net/u014207604/article/details/49926207 Windows 下安装 swoole 具体步骤: Swoole,原本不支持在Wi ...

  7. Docker安装和状态查询指令

    1 .安装 Docker $ yum install -y docker-engine 2.启动docker $systemctl start docker.service 3.验证安装是否成功(有c ...

  8. JavaScript中的attachEvent和addEventListener

    attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...

  9. <Android Framework 之路>BootAnimation（2）

    前言 上一篇主要讲解了BootAnimation是从何而来,如何启动,从开机,到SurfaceFlinger服务起来,然后到执行开机动画,如果要深入的看里面的代码,是需要花一定的时间的,我们旨在了解大 ...

  10. AGS API for JS代理页的使用

    AGS API for JS代理页的使用 1.概述 代理页即使用后端语言编写的请求转发页面,部署在Web应用端.客户端请求先发送到该代理页,代理页再将该请求转发到服务器处理,服务器处理结果再经代理页转 ...