Web前端学习打卡第四天：CSS布局与定位

概述

CSS的布局与定位就是用来规定网页各个部分的大小与位置属性。包括页面元素的大小、边框、与其他元素的距离。定位机制包括文档流、浮动定位、层定位。

盒子模型

页面中的所有元素都可以看成一个盒子，占据着一定的页面空间，页面上区域、图片、导航、列表、段落，都可以是盒子。

盒子模型组成：content内容、width宽度、margin外边距、border边框、padding内边距、height高度

一个盒子的实际宽度、高度:content+padding+border+margin

overflow属性（当内容溢出盒子框时，overflow属性取值）：

hidden超出部分不可见、scroll显示滚动条、auto如果有超出部分，显示滚动条

border属性：

border-width：px、 thin、medium、thickv

border-style：dashed、dotted、solid、double

border-color：颜色

border: width style color

对浏览器默认的设置清零:

* {

margin: 0;

padding: 0;

}

取值:px，%(外层盒子的宽度和高度)

盒子模型margin：

margin：1px;margin:1px 1px 1px 1px;

margin:1px 2px;margin:1px 2px 1px 2px;

margin: 1px 2px 3px;margin:1px 2px 3px 2px;

margin: 1px 2px 1px 3px;注意，这里虽然上下边距都为1px，

但是这里不能缩写。

top——right——bottom——left

margin的合并：垂直方向合并，水平方向不合并

水平居中：图片、文字水平居中text-align:center;div水平居中margin:0 auto 浏览器自动计算

CSS定位机制

CSS中，存在3种的定位机制：文档流flow、浮动float、层layer

文档流定位

元素类型分类block、inline、inline-block；元素类型转换display属性

元素分类——inline-block

同时具备inline元素、block元素的特点

不单独占用一行

元素的height、width、margin、padding都可设置

常见的inline-block元素

显示为inline-block元素display:inline-block;、

相互转换：

display: none元素不会被显示

display:block显示为block元素

display:block显示为block元素

display：inline-block显示为inline-block元素

浮动定位

内容：float属性，left、right；clear属性，left、right、both

float属性:div实现横向多列布局

float属性：left——左属性，right——右浮动，none——不浮动

clear属性：both，清除左右两边的浮动。

left 和 right 只能清除一个方向的浮动。

none 是默认值，只在需要移除已指定的清除值时用到。

侧栏向右浮动，并且短于主内容区域。页脚(footer)于是按浮动

所要求的向上跳到了可能的空间。

层定位

层定位概述：像图像软件中的图层一样可以对每个layer能够精确定位操作。

position属性：fixed 固定定位；relative 相对定位；absolute 绝对定位

position属性

static（默认值）：没有定位，元素出现在正常的流中 top, bottom, left, right ， z-index无效

fixed（固定定位）：相对于浏览器窗口进行定位 top, bottom, left, right ， z-index 有效

realtive（相对定位）：相对于其直接父元素进行定位 top,bottom,left,right，z-index有效

absolute（绝对定位）：相对于 static 定位以外的第一个父元素进行定位 top, bottom, left, right ， z-index 有效

固定定位position:fix

不会随浏览器窗口的滚动条滚动而变化，总在视线里的元素

#fix-box{

width:200px;

height:200px;

border:1px solid red;

}

position:fixed;

left:100px;

top:50px;

相对定位position:relative

relative：定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。

#box1{

width:170px;

height:190px;

position:relative;

top:20px;

left:20px;

}

相对定位position:absolute

absolute:定位为absolute的层脱离正常文本流，但与relative的区别:其在正常流中的原位置不再存在。

#box1{

position:absolute;

top:20px;

left:20px;

}