CSS学习笔记

CSS学习笔记

1、标准文档流、块级元素、行级元素

2、盒子模型

边框（border）

盒子中内容（content）

内边距（padding）

外边距（margin）

注：

设置时按照上右下左顺序，从顶部开始沿顺时针方向设置
设置有三个属性值时代表上（左右）下
设置有两个属性值时代表（上下）（左右）
设置有一个属性值时代表四个属性值设置均相同
属性值与属性值之间使用空格隔开

盒子模型立体来看，可分为五层，依次为：border、content+padding、background-image、background-color、margin

3、自动居中一列布局：

水平居中：margin:0 auto;

auto：左右值设为auto，可以理解为根据浏览器的宽度自动设置两边的外边距，在不同浏览器下均使其居中，且使用auto时不能再设置浮动或绝对定位属性（注意：使用margin时width值也要设定成一个定值）。

4、浮动布局二列布局：

左浮动：float:left;
右浮动： float:right;
不浮动：none
（float属性块如果未指定宽度，它的大小会随着内容的多少而发生改变，如果没有内容且没有指定宽度，该块会缩成一个点而导致看不见）

注：
如果想要使这个二列布局固定宽度水平居中，则可指定一个大的块作为父级，将这个二列布局包含在内，然后指定宽度，再使其居中即margin:0 auto;

当设置float属性时，会对紧邻其后的元素产生影响而使布局改变，所以要对受到浮动影响的元素设置清除浮动属性：

clear:both;
或
为元素同时设置：width:100%（或固定宽度）;overflow:hidden;

5、position属性：

position属性可设置四个属性值：

static（静态定位）

relative（相对定位）：相对与自身原有位置进行偏移

fixed（固定定位）

absulote（绝对定位，脱离了标准文档流）
左：width:leftwidthpx;position：absulote;
中：margin:0 rightwidthpx 0 leftwidth;
右：width:rightwidthpx;position：absulote;
（未设置宽度时块的大小按照内容的大小决断，偏移量的偏移参照标准为：无已定位祖先元素：以为偏移参照基准；有已定位祖先元素：以距其最近的已定位的祖先元素为偏移参照基准）

注：
此设置可使左右固定宽度，中间自适应，如果想使中间块在左右留有空隙，可以设置rightwidthpx与leftwidthpx大一些。

6、使用absulote实现横向两列布局举例代码（父元素相对定位，自适应宽度元素绝对定位）：

<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{background:#ccc;width:100%;}
.main{height:200px;position:relative;}
.left{width:200px;position:absolute;top:0;left:0;background:blue;height:200px;}
.right{margin-left:210px;background:green;height:200px;}
.foot{background:red;width:100%;}
</style>

（顶部与底部水平居中自适应，中间部分分为两份，左部固定宽度，右部距左部有一定距离）