一.盒子模型
undefined
undefined
给ul下的li设置宽度，那么他们将平均掉它们所占容器的宽度。div >ul> li> a标签所占宽度和高度：
undefined
当你为body元素指定div时，每个div默认的宽为浏览器的100%，高度在每个浏览器的解析都是不一样的，比如在火狐下是131px，在chrome下则是142px，具体机制不明
二.选择器的分组
CSS选择器分为
-
群组选择器 如：p, body, img, div{}
-
兄弟选择器 如：p + p { color:#f00; }
-
属性选择器 如： p[title] { color:#f00; }
-
包含（后代）选择器 如：body ul li{}
-
子元素选择器 如：div > p{}
-
ID选择器 如：#myDiv{}
-
类选择器 如：.class1{}
-
伪元素选择器 如：E:first-line，E:before
-
伪类选择器 如：E:first-child ，E:visited，E:focus，E:enabled
-
标签选择器 如：p { font-size:1em; }
子选择器和后代选择器的区别：
后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。
子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。
注意：在IE6中，只支持后代选择器，不支持子选择器
三.行内元素、块元素和空元素
行内元素特点
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内元素在设置 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
块级元素特点
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素（inline）元素。
块级元素是可以设置宽高的，但是它的实际宽高是本身宽高+padding。block元素要单独占一行。内联元素不单独占一行，给他设置宽高是没有用的。
空元素
知名的空元素： <br> <hr> <img> <input> <link> <meta>
鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
四.css float属性
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
清除浮动
如果你很明确的知道接下来的元素会是什么，可以使用 clear:both; 来清除浮动。这个方法很不错，它不需要 hack，不添加额外的元素也使得它有良好的语义性。
使用css 伪选择符(:after)来清除浮动：
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
网友评论