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. JVM(二) 对象存活判断和垃圾回收算法

    对象的创建 概述 下面简要介绍创建对象的几个重要步骤 : 检查能否在常量池定位到一个类的符号引用,并检查这个符号代表的类是否已被加载,解析和初始化过.如果没有则执行类加载的操作.(即是说对象的引用放在 ...

  2. shodan在渗透测试中的应用

    场景1:想搜索美国所有的elasticsearch服务器 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.设计 ...

  3. servlet-mapping元素及其子元素

    <servlet-mapping>元素在Servlet和URL样式之间定义一个映射.它包含了两个子元素<servlet- name>和<url-pattern>,& ...

  4. 从官网下载mod_jk.so

    最近在搞apache和tomcat集群,这里就要用到mol_jk.so,在官网找了很久才知道在哪里下载,英语是硬伤啊. 1.打开tomcat官网 http://tomcat.apache.org/ 2 ...

  5. laravel5.7 表单验证

    laravel5.7 表单验证 一.创建表单请求 1.找到 larave5.7 文档 验证 中的创建表单请求,这里就要用到命令:php artisan make:request BrandReques ...

  6. JavaScript 数组对象常用属性

    concat() 用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. var a = ["aa","ccc"]; var b ...

  7. jquery each() 方法跳出循环

    1.jquery each() 方法  return false: 的时候  相当于  break; 跳出整个循环: 2.jquery each() 方法  return true: 的时候  相当于 ...

  8. Django—middleware

    一.Django中间件的请求周期 我们从浏览器发出一个请求 Request,得到一个响应后的内容 HttpResponse ,这个请求传递到 Django的过程如下: 也就是说,每一个请求都是先通过中 ...

  9. [小北De编程手记] : Lesson 02 - Selenium For C# 之 核心对象

    从这一篇开始,开始正式的介绍Selenium 以及相关的组件,本文的将讨论如下问题: Selenium基本的概念以及在企业化测试框架中的位置 Selenium核心对象(浏览器驱动) Web Drive ...

  10. vs2010开发activex（MFC）控件/ie插件(一)

    原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50782904  vs2010开发activex(MFC)控件:      第一步:生成ac ...