CSS学习笔记

CSS学习参考：http://www.w3school.com.cn/css/index.asp

选择器　　

　　#　　　　　　　　     id选择器 　　　　

　　.　　　　　　　　      类选择器

　　p　　　　　　　　     元素选择器

　　h1,h2,h3,h4　　　　元素分组

　　h1 em　　　　　　   后代选择器

　　高级选择器（浏览器支持不充分）

　　img[src|="figure"]　　属性选择器

　　ol > li　　　　　　　　子选择器（相邻层级）

　　+ 相邻选择器 　a:hover 伪类

层叠和继承

　　层叠　　　　　　　　因为样式选择器的优先级高低而产生样式覆盖，优先级高的（#）覆盖低的（元素选择器）

　　继承　　　　　　　　后代元素继承祖先元素的特定样式

盒模型

外边距合并：

当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

 

内边距和外边距的区别？

　　外边距会合并，内边距不会合并。

　　内边距包含背景图片，外边距不包含。

 定位　　

　定位都是对于块元素来说，行内元素可手动设置display:block; 使得具有块布局

　　普通　　　　　　position: relative;　　


　　　　　　　　　　默认文档流定位，html自上而下逐行分布。设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

　　绝对定位　　　　position: absolute;　　　　　　

　　　　　　　　　　设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来　　　　　　　　　　　　　  它在正常流中生成何种类型的框。

　　浮动定位　　　　float: left;

　　　　　　　　　  浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

引用

　　外联　　<link rel="stylesheet" type="text/css" href="mystyle.css" /> 　　mystyle.css ....

　　内联　　<style type="text/css">...</style>

　　内嵌　　<p style="color: sienna; margin-left: 20px">