Css学习_3基础盒子模型和定位

CSS学习3_基础盒子模型和定位

盒子模型

盒子模型边框（border）

border : border-width || border-style || border-color 

# style常用属性：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线  
dotted：边框为点线
double：边框为双实线
#圆角边框
border-radius: 左上角  右上角  右下角  左下角;

内边距（padding）外边距（margin）

一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。

2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

.header{ width:960px; margin:0 auto;}

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

 

浮动(float)

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

浮动

目的就是为了让多个块级元素同一行上显示。

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

选择器{float:属性值;}

属性值 ： left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值）

注意：

1、加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。 2、加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。 3、特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。

清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

最主要的影响就是，如果子布局都是浮动布局，则父布局的高度即使设置了依旧就会为0。

方法一：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

方法二：

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

 

定位（position）

选择器{position:属性值;}

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

static：

网页中所有元素都默认的是静态定位， 也就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

relative：

将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示。

相对定位是相对于自己的原有位置定位。

absolute ：

如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

绝对定位是相对于于最近的已定位祖先元素。

fixed：

对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

注意：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。

2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。