CSS基础知识小结

-----------------------------------------------------------------CSS盒子模型---------------------------------------------------------------------------------

1. 什么是盒子模型?
盒子模型可用于元素定位和网页布局.
盒子模型中,每个元素(不论是块级还是内嵌元素)都会产生一个矩形盒子围绕在元素的内容之外,我们称这个盒子为元素盒.
由三部分组成: 元素里面的实际内容 元素(如p/div等等) 元素盒(包裹元素的矩形框).

2. width和height
width和height属性可以设置块级元素和内嵌可替换元素(如图片)的大小;
对于内嵌的不可替换元素(如文本)可以设置width和height的大小,但无效;
在样式中设置元素的宽度和高度值时,只是设置了元素的内容区域的宽度和高度,而不是整个元素的宽度;通常元素的高度是自动计算的,并且只是大到足够容纳元素的内容.所有通常很少指定元素的高度;
对于图像元素,最好同时指定其高度和宽度较好.

3. margin(外边距)
含义: 是元素边框到元素盒外边缘的距离(上,下,左,右);
margin 可以使用负值,这样做可以起到元素重叠的作用;
例 margin-top=-10px;
分析: 当margin-top=0时,说明元素的顶部边框与该元素的元素盒的顶部边框重合.
当margin-top为正数时,使元素下移.
当margin-top为负数时,使元素上移.
故当margin-top为负数时,可使下面的元素重叠在上面的元素上.

块级元素的margin在垂直方向会重合,并取大的值作为margin值.
(不可替换的内嵌元素)文本类的内嵌元素的margin在垂直方向无效,内嵌元素的高度由其文本字体的高度来控制.
浮动元素,绝对定位元素的margin都不会重合.

4. border(边框)
含义: 是元素的边框;
常用边框样式的设置: border-style-top: solid 实线
border-style-right: dotted 点状
border-style-left: dashed 虚线
border-style-bottom: double 双线

border-style: 上 右 下 左;
border-color: 上 右 下 左;
border: 1px solid red; (宽度 样式 颜色)

5. padding(内边距)
含义: 元素的实际内容到元素边框的距离,不允许有负值;
用法跟margin类似,文本类的内嵌元素的padding值无效;
若想让一个元素出现在一个彩色盒子中,可采用padding来实现.

6. float 浮动(常用于实现文本环绕着图像的布局)
在CSS中可以浮动任何元素(段落,列表,div,图像等),使用float可以创建多列的网页布局,不使用table也能使元素对齐; 其属性值只有三种: none(不浮动) left(向左浮动) right(向右浮动).

注意: 当元素浮动时,元素会被视为块级元素;
当浮动一个文本类型元素时,必须指定该元素的width 宽度,否则元素内容的宽度可能会被置为最小宽度;
浮动元素停留在包含它的父级元素的内容区域,不会穿过padding区域;
浮动元素的margin不会重叠;
浮动的元素可以覆盖下一个元素的背景和边框,但不会覆盖里面的文字内容,而是把文字内容挤到旁边的位置;

浮动的行为: 在源文档中相邻的浮动元素不允许重叠;
如果元素向同一个方向浮动,每个后续的浮动元素必须向该方向移动,直到碰到父级元素的内边缘或者上一个浮动元素;
如果没有足够的空间让浮动元素肩并肩地并排,第二个浮动元素将向下移,直到有足够的空间来显示它而不覆盖第一个浮动元素;

清除浮动: 使用clear属性阻止一个元素出现在浮动元素的后面,其只能应用于块级元素;
其属性值: none 允许两边都可以有浮动元素 (不清楚浮动);
left 清除左边的浮动元素;
right 清除右边的浮动元素;

例 p {clear: left;} 这个代表清除p元素左边的浮动,让p元素可以重左边开始布局,而不是从它前面的浮动元素布局.