CSS基础-2

CSS模型

标准盒模型

标准盒模型：box-sizing:content里面的宽为内容宽(element宽)

怪异盒模型

怪异盒模型：box-sizing:border-box，里面的宽为（element+padding+border）

内边距，边框设置

1. 内边距：padding:顺时针
   参数个数
   1. 一个：上下左右
   2. 两个：上右，下左
   3. 三个：上，右，下，左
   4. 四个：上，右，下，左
2. 边框设置：border：1px solid black
   border-width: 大小;
   border-color: 颜色;
   border-style: 样式; 一般为solid(表示实线)

CSS定位

在进行浏览器页面的编程时经常要用到该方法

相对定位

相对定位是指相对于自己的原始位置进行定位，空间不释放（即保留原始空间和定位后空间两个空间）

position:relative
后面可以跟上它定位的位置：top | bottom | left | right

绝对定位

相对于最近已定位的父元素的整体进行定位（没有则相对于body定位），空间释放（即只保留定位后空间）

position:absolute
后面可以跟上它定位的位置：top | bottom | left | right

固定定位

定位在浏览器的某一固定位置，始终不动，类似于侧边广告

position:fixed
后面可以跟上它定位的位置：top | bottom | left | right

静态定位（默认）

不进行定位

position:static

CSS浮动

浮动

使用float关键字进行浮动，浮动脱离文档流，空间释放（相当于元素没有宽高，飘在页面上了，不占有页面的空间），这就可能会导致下面的元素顶上来了，与浮动的元素重合（即浮动塌陷问题）
在进行浏览器页面的编程时经常要用到该方法

float: left（左浮）| right（右浮）| none（不浮动，默认）

浮动塌陷问题解决

1. 固定元素的宽高
2. 父元素样式内写入：overflow：hidden
3. 在浮动的块级元素下再加一个块级元素，样式内写入：clear : both
4. 专门写一个清浮动的伪类

		.clearfix :: after{
			content : "" ;
			dispaly: block ;
			clear: both;
		}