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. 关于webApi使用session

    1.关于webApi使用session 在Global.asax中注册session添加以下代码 public override void Init() { //开启session this.Post ...

  2. gradle -v不是外部命令, 内部命令,或批处理文件

    安装完gradle并且配置了环境变量之后,使用windos+R,cmd 进入Dos命令gradle -v检测版本号出现了: 1 --首先找到gradle文件所在目录 一般是在C:\Users\su\. ...

  3. dokcer安装并开机自启动服务

    linux内核最好是3.10以上.不过本次使用的是centos6.5 内核2.6 1.yum -y install docker-io 如果出现: 需要安装yum源: 3.service docker ...

  4. ugui之圆角矩形头像实现

    这个是参考大神的修改了一下渲染方式实现的,可以去查看原帖的,原贴是圆形头像,原理讲的非常详细 点击这里 我写的这个只支持正方形图片,效果是酱紫的~ 一共三个代码,还需要两个代码,原帖里都有的,我只是修 ...

  5. PHP打印日期

    <?php header("content-type:text/html;charset=utf-8"); echo "今天是 " . date(&quo ...

  6. String API

    String它即是内置对象,也是 包装类型之一,所有的String API都无法修改原字符串,而是返回一个新的字符串.   1.大小写转换 str.toUpperCase(); str = str.t ...

  7. JS常见的几种数组去重方法

    总结一下JS中用到的数组去重的方法  方法一: 该方法利用对象的属性值不能相同: function arrDelLikeElement (array) { const result = []; con ...

  8. 前端使用nginx上传文件时，进度获取不对

    在使用iview时,上传文件获取进度时onUploadProgress返回数据不对. 原因是开启了nginx代理,本地上传时先传到本地nginx然后在传到服务器,导致获取进度不对 解决:在nginx的 ...

  9. css模仿百度首页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 003客户端负载均衡Ribbon & 短路器Hystrix

    1.POM配置 和普通Spring Boot工程相比,仅仅添加了Eureka.Ribbon.Hystrix依赖和Spring Cloud依赖管理 <dependencies> <!- ...