您的位置：首页 > Web前端 > CSS

css自学笔记

2015-07-28 12:30 627 查看

盒子模型：

边框：border。内边距：padding。外边距：margin。

在css中一个盒子模型由content（内容）、border、padding和margin组成。

border的属性有三个：color、width（粗细）和style（样式）。

style属性：none、hidden、dotted（点状的）、dashed（虚线）、solid（立体的）、

double、groove（凹槽）、ridge（脊状）、inset、outset。

盒子的定位：

盒子的定位是由position来实现的。

position有四个属性值：

1，static：这是默认的属性值，也就是该盒子按照标准流进行布局。

2，relative：称为相对定位。

3，absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位盒子从标准流中脱离。

4，fixed：称为固定定位，以浏览器窗口为基准进行定位。

一、以下代码为relative（相对定位）：

<html>

<head>

<title>relative属性</title>

<style type="text/css">

body{

margin:20px;font-family:Arial;font-size:18px;}

#father{

background-color:blue;padding:15px;border:1px dashed #000000;}

#block{

background-color:red;padding:10px;border:1px dashed #000000;position:relative;left:30px;top:30px;}

</style>

</head>

<body>

<div id="father">

<div id="block">Box-1</div>

</div>

</body>

</html>

left：30px的作用是使Box-1的新位置在原来左边框30像素的地方。

相对定位的结论：

1，使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。

2，使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。

二、以下代码为absolute（绝对定位）：

<html>

<head>

<title>absolute属性</title>

<style type="text/css">

body{

margin:20px;font-family:Arial;font-size:18px;}

#father{

background-color:#a0c8ff;padding:15px;border:1px dashed #000000;}

#father div{

background-color:#fff0ac;padding:10px;border:1px dashed #000000;}

#block{

position:absolute;top:0;right:0;} 

</style>

</head>

<body>

<div id="father">

<div>Box-1</div>

<div id="block">Box-2</div>

<div>Box-3</div>

</div>

</body>

</html>

并不是所有的绝对定位都是以浏览器窗口为基准来定位的，对以上代码的父div增加一个定位样式：

#father{

background-color:#a0c8ff;padding:15px;border:1px dashed #000000; position:relative;}

则此时以他的父div为基准来定位。

绝对定位结论：

1，使用绝对定位的盒子以他的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已定位的祖先，则以浏览器窗口为基准进行定位。

2，绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没影响，其它盒子就好像这个盒子不存在一样。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航