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

桃扇骨 2022-08-22 15:13 1201阅读 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{

  1.      width:366px;
  3.      height:256px;
  5.      position:relative;
  7.      \}

.title{

  1.      font-family:"Arial";
  3.      color:white;;
  5.      font-size:13px;
  7.      position:absolute;
  9.      right:40px;
  11.      bottom:25px;
  13.      \}

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

例子：

.title{

  1.      font-family:"Arial";
  3.      color:white;
  5.      font-size:18px;
  7.      position:absolute;
  9.      top:210px;
  11.      left:240px;
  13.      \}

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

例子：

.title{

  1.      font-family:"Arial";
  3.      color:white;
  5.      font-size:18px;
  7.      position:relative;
  9.      top:-50px;
  11.      left:240px;
  13.      \}

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

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

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

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

例子：

.title{

  1.      font-size:30px;
  3.      color:\#000;
  5.      position:absolute;
  7.      z-index:1;
  9.      \}

.title2{

  1.      font-size:30px;
  3.      color:\#999;
  5.      position:absolute;
  7.      z-index:0;
  9.      top:30px;
  11.      \}

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

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

方法一：

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

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

Css.css

.left{

  1.      width:190px;
  3.      height:500px;
  5.      background-color:\#9F3;
  7.      position:absolute;
  9.      left:0px;
  11.      top:0px;
  15.      \}

.middle{

  1.      height:600px; 
  3.      margin:0px 190px 0px 190px;
  5.      background-color:\#F96;
  7.      \}

.right{

  1.      width:190px;
  3.      height:500px;
  5.      background-color:\#9F9;
  7.      position:absolute;
  9.      right:0px;
  11.      top:0px;
  13.      \}

Index.html:







left

  1.      <divclass="middle">
  3.          <div>middleg;dhoibfkgo;rg;opg;klngfbkg;egfiopo\[;l</div>

  1.      <divclass="right">
  3.          <div>right</div>

方法二：

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

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

Css.css

.left{

  1.      width:20%;
  3.      height:500px;
  5.      background-color:\#9F3;
  7.      float:left;
  11.      \}

.middle{

  1.      width:60%;
  3.      height:300px;
  5.      background-color:\#F96;
  7.      float:left;
  9.      \}

.right{

  1.      width:20%;
  3.      height:500px;
  5.      background-color:\#9F9;
  7.      float:left;
  9.      \}

Index.html







left

  1.      <divclass="middle">
  3.          <div>middleg;dhoibfkgo;rg;opg;klngfbkg;egfiopo\[;l</div>

  1.      <divclass="right">
  3.          <div>right</div>

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

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

方法二：

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

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

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

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

例子：

.main{

  1.      width:1000px;
  3.      height:500px;
  5.      background-color:red;
  7.      position:relative;
  9.      left:50%;
  11.      margin-left:-500px;
  15.      \}

发表评论

表情：
评论列表 （有 0 条评论，1201人围观）

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

相关阅读

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

    CSS定位简介 开发网页时，元素的定位和排列方式对于创建有吸引力且实用的用户界面起着至关重要的作用。CSS 定位是一个关键工具，使开发人员能够精确控制网页上元素的布局。在

    川长思鸟来川长思鸟来/ 0 赞/ 137 阅读

    相关 CSS基础（五）：定位

    CSS定位机制 CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。 相对定位 相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原

    布满荆棘的人生布满荆棘的人生/ 0 赞/ 323 阅读