CSS基础知识-五（CSS定位、左右布局方法）

桃扇骨 2022-08-22 15:13 1127阅读 0赞

一、CSS定位

1、Float:left / right /none;--\----左浮动/右浮动/无

2、Position:absolute;\----绝对定位

3、Position:relative;\-----相对定位（top/right/bottom/left）

注意：

父级（大div）             子级（子div）

1、     Relelative                absolute------------

2、     Absolute                  absolute

3、     Relative                   relative

解释：

1中，父级中div设置绝对定位position:absolute;，子级中设置相对定位position:relative，这时子级中调整的位置是针对父级来调整的

例子：

.position\{

width:366px;

height:256px;

position:relative;

.title\{

font-family:"Arial";

color:white;;

font-size:13px;

position:absolute;

right:40px;

bottom:25px;

2中，如果都只用绝对定位position:absolute;，不在父级中使用position:relative;,无论位于div多少层结构，这时以body为父级

例子：

.title\{

font-family:"Arial";

color:white;

font-size:18px;

position:absolute;

top:210px;

left:240px;

3中如果只用相对定位position:relative;，是针对自己当前本身的位置（向上调整位置为负数）

例子：

.title\{

font-family:"Arial";

color:white;

font-size:18px;

position:relative;

top:-50px;

left:240px;

注意：相对定位position:relative;对象不可重叠，不可用z-index:0;

4、Position:fixed;-\----不随滚动条向上或向下移动（例：top按钮）

5、Position:static;\------默认

6、z-index:0;\------高低覆盖关系（通常和position:absolute;联合使用，数越大，谁就在上面）

例子：

.title\{

font-size:30px;

color:\#000;

position:absolute;

z-index:1;

.title2\{

font-size:30px;

color:\#999;

position:absolute;

z-index:0;

top:30px;

7、clear:left / right /both/ none;-\-------------清除float对 左侧/右侧/所有/无 的影响

二、左中右布局(如果左中右都需要自适应，则宽度都为百分比)

方法一：

**步骤（1）设置左右的固定宽度，都加上绝对定位；**

**步骤（2）设置中间的margin:0px 右宽度 0px 左宽度;**

Css.css

.left\{

width:190px;

height:500px;

background-color:\#9F3;

position:absolute;

left:0px;

top:0px;

.middle\{

height:600px;

margin:0px 190px 0px 190px;

background-color:\#F96;

.right\{

width:190px;

height:500px;

background-color:\#9F9;

position:absolute;

right:0px;

top:0px;

Index.html:

<divclass="left">

</div>

<divclass="middle">

<div>middleg;dhoibfkgo;rg;opg;klngfbkg;egfiopo\[;l</div>

</div>

<divclass="right">

<div>right</div>

</div>

方法二：

**步骤（1）设置左中的固定宽度，都加上左浮动；**

**步骤（2）设置右边的宽度，左右浮动都可以；**

Css.css

.left\{

width:20%;

height:500px;

background-color:\#9F3;

float:left;

.middle\{

width:60%;

height:300px;

background-color:\#F96;

float:left;

.right\{

width:20%;

height:500px;

background-color:\#9F9;

float:left;

Index.html

<divclass="left">

</div>

<divclass="middle">

<div>middleg;dhoibfkgo;rg;opg;klngfbkg;egfiopo\[;l</div>

</div>

<divclass="right">

<div>right</div>

</div>

三、左右布局居中的方法：

**方法一：**主体定义一个class=”main”，宽度为1000px，直接加样式：margin:0pxauto;即可

**方法二：**

（1）      主体定义一个class=”main”，宽度为1000px，

（2）      设置绝对定位position：relative;

（3）      向左移动一半：left:50%;

（4）      移动整体的宽度的一半，margin-left:-500px;(margin-right:500px;也可以)

例子：

.main\{

width:1000px;

height:500px;

background-color:red;

position:relative;

left:50%;

margin-left:-500px;

CSS基础知识-五（CSS定位、左右布局方法）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS 定位：掌握布局控制

相关 HTML&CSS Day06 CSS定位布局

相关 CSS - 定位布局（position）

相关 css总结五(定位)

相关 CSS基础知识-五（CSS定位、左右布局方法）

相关【CSS】CSS经典布局之居中定位

相关 CSS基础知识（四）——定位

相关 CSS基础（五）：定位

相关 HTML/CSS -- 利用定位进行布局

相关 css经典布局上下左右