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. 理解 Azure 虚拟机的性能监视

    随着越来越多的用户将生产应用迁移到云平台,一些传统 IT 的运维功能也相应的需要改变,例如监控,备份等等.我们希望通过这一系列的文章来协助用户更好的理解在 Azure 云平台上实现资源监控的方法. 在 ...

  2. 实例化geoserver wms服务

    var vectorWmsJHdataLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ //地址 url:'http://loca ...

  3. HttpClient 入门教程学习

    HttpClient简介 HttpClient是基于HttpCore的HTTP/1.1兼容的HTTP代理实现. 它还为客户端认证,HTTP状态管理和HTTP连接管理提供可重用组件. HttpCompo ...

  4. 模拟Springboot一:(零xml配置搭建SSM项目)

    在spring官网文档中无论是spring的基础文档,还是spring-mvc文档都推荐我们使用javaconfig的方式来搭建项目 间接说明 (优点:javaconfig配置>xml配置) 其 ...

  5. javaweb之jsp指令

    1.JSP指令简介 JSP指令是为JSP引擎设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令:page指令,Include指 ...

  6. 2013 Warm up 3 -- Skill --- dp

    题意:求n位数字,满足非递减的个数. dp[ i ] [ j ] = sum( dp[i -1] [ k ] );  k =>( j , 9); #include<iostream> ...

  7. MyBaits_查询缓存02_Ehcache二级缓存

    一.Ehcache二级缓存的开启 导入jar(https://github.com/mybatis/ehcache-cache/releases) <cache type="org.m ...

  8. [转]Shared——React Native与原生关系理解与对比

    零.关系理解 这个是我对RN和原生关系的理解.简单解释下这个图. RN js编写完业务代码后,通过react-native bundle命令,将代码分别编译成一个index.ios.bundle和in ...

  9. 11.7NOIP模拟赛解题报告

    心路历程 预计得分:\(50 + 100 + 100\) 实际得分:\(50 + 100 +100\) T2 T3两道数据结构题美滋滋,然而写完就过去\(3h\)美滋滋 T1数学题学弟们都会做Orzz ...

  10. vue-cli脚手架项目实例

    看完了配置,接下来通过一个实例,更清晰地了解这些文件之间的联系,顺带练习练习vue相关知识. 1.安装 打开命令行控制器,系统自带cmd或者git bash等都可以,按照顺序输入如下指令,耐心等待每一 ...