行内元素：只占据对应标签边框所包含的空间（如span）
块级元素：占据父元素整个空间。（如div，p）
块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；
块元素：高度，行高以及外边距和内边距都可以控制。宽度默认是它容器的100%，除非设定一个宽度.
内联元素：高度，行高以及外边距和内边距不可改变。宽度就是它的文字和图片的宽度，不可改变。
块级元素和内联元素之间的转换：
1）display
2）float
3）position:当为行内元素进行定位时，position:absolute，与position:fixed。
都会使原先的行内元素变为块级元素。
正确理解clear:both：
1）浮动元素会自动设置成块级元素（相当于display:block，块级元素能设置宽和高，而行内元素则不可以）
2）浮动元素后边的非浮动元素显示问题。
浮动元素后边的元素若是非浮动元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示。
若是非浮动块级元素，该块级元素边框和背景在浮动元素“之下”显示，只有内容在浮动元素“之上”，不在浮动元素“之下”显示
1.pic.jpg
如下：div2为浮动元素，跟在后面的一个为行内元素，一个为块级元素。观察效果可发现不同的地方。
<style>
.div1 {
width: 600px;
height: 500px;
border: solid 1px blue;
background-color: yellow;
}
.div2 {
float: left;
width: 250px;
height: 250px;
border: solid 1px Aqua;
background-color: gray;
margin: 10px 0 0 10px;
}
.div3 {
background-color: red;
border: solid 1px green;
width: 300px;
height: 150px;
}
.span4 {
background-color: red;
border: solid 1px green;
margin: 0 0 0 -50px;
}
</style>
<div class="div1">
<div class="div2">浮动DIV</div>
<div class="div3">跟在浮动元素后边的DIV</div>
<span class="span4">跟在浮动元素后边的span</span>
</div>
3、多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。
4、子元素全为浮动元素高度自适应问题
由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。解决此问题最常用的办法由两种，第一种就是在所有浮动元素后加: <div style="clear:both;height:0px;"></div>
第二就是：
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
补充：clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。
盒模型:内容(content)、填充(padding)、边界(margin)、 边框(border)
IE的content部分把 border 和 padding计算了进去
null 与 undefined
null 表示一个对象是“没有值”的值，也就是值为“空”；
undefined 表示一个变量声明了没有初始化(赋值)；
undefined不是一个有效的JSON，而null是；
undefined的类型(typeof)是undefined；
null的类型(typeof)是object；
position
relative:相对定位，相对于父元素进行偏移，原本的空间也占据着，下面的元素并不会顶替上去。
absoluate:绝对定位，会脱离文档流，不占有原本空间，后面元素会顶替上去。
fixed:固定定位，相对于浏览器窗口
px、em、rem区别介绍
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，
则相对于浏览器的默认字体尺寸。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
rem是CSS3新增的一个相对单位（root em，根em）。
css选择器：
标签选择器，ID选择器，类选择器，群组选择器，后代选择器，通配符选择器
标签选择器 以文档元素作为选择符 a { text-decoration:none }
群组选择器 多个选择符 td,p,a,div {}
后代选择器 元素E的任意后代元素F #links a {color:red;}
通配符选择器 以文档的所有元素作为选择符 *{ font-size:14px;}
CSS3伪类和伪元素：
常见伪类：:focus :hover :active :nth-child()
常见伪元素：::before ::after ::first-letter ::first-line
CSS中还有，伪类选择器(伪元素)，子选择器，临近选择器，属性选择器。
子选择器（>）：
如：h1 > strong {color:red;} 表示把第一个h1下面的strong元素变成红色字体
临近选择器（＋）：
如：h1 + p {margin-top:50px}
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
结果：h1和第一个p元素直接的间距为50px，其他不受影响
属性选择器（[]）：
比如我们需要将元素中带有属性title的颜色都设为红色可以这么做：*[title] {color:red;}
常见的有：
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
网友评论