CSS小记

CSS元素分类

（1）块状元素／Block Element：每个元素单独占一行；高／宽／行高／顶和底边距都可设置；默认大小为父容器的100%。
（2）行内元素／Inline Element：与其它元素共享一行；不可设置；默认为所含内容大小，不可修改。
（3）行内块状元素／Inline-block Element：与其它元素共享一行；高／宽／行高／顶和底边距都可设置。

网页中元素之间的关系其实可以总结为以下三种关系：

（1）块挨着块
（2）块嵌套着块
（3）块叠着块

CSS语法：

（1）box类与 link类：

.box, .link{
  width: 205px;
  height: 280px;
  float: left;
  margin: 0 20px;
}

（2）box类下面的link类：（这里没有逗号了！！）

.box .link{
  width: 205px;
  height: 280px;
  float: left;
  margin: 0 20px;
}

CSS定位机制

定位机制有三种，分别是标准文档流、浮动及绝对定位。

网页布局

常见的有一列布局，二列布局，三列布局：

常见网页布局

大多数网页都是混合布局！
-> 小结：靠左float:left;，靠右float:right;，居中margin: 0 auto;

CSS布局模型

（1）流动模型／
（2）浮动模型／
（3）层模型／

盒模型／Box Model

box model

css定义的width = paddingLeft + borderLeft + contentWidth + borderRight + paddingRight;
元素实际的width = marginLeft + paddingLeft + borderLeft + contentWidth + borderRight + paddingRight + marginRight;

文档流

确切的说应该是文档文档流模型的机制，html的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline）不独占一行。
举例来说：
-> position:absolute;和浮动／float脱离文档流，用它们修改元素位置之后，元素本身的位置不会被保留。
-> position:relative; 没有脱离文档流。

CSS的浮动／float

float 属性定义元素靠哪个方向浮动。
在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框／Block，而不论它本身是何种元素。
特点：如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

width和height的％

50％：父元素的50%

－－－－－－－－－已学列表－－－－－－－－
color:
font-family:
font-size:
border:
margin:
padding:

width:元素宽度
--> auto 默认值。浏览器可计算出实际的宽度。
--> length 使用 px、cm 等单位定义宽度。
--> % 定义基于包含块（父元素）宽度的百分比宽度。
--> inherit 规定应该从父元素继承 width 属性的值。

选择器们
id选择器：能且只能被使用一次
类选择器