关闭

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

1261人阅读 评论(0) 收藏 举报
分类:

一、CSS定位

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

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

3Position: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;

 

4Position:fixed;-----不随滚动条向上或向下移动(例:top按钮)

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

6z-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;

         }

 

7clear: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:

<div class="main">

         <!--左侧-->

         <divclass="left">

             <div>left</div>

   </div>

   <!--中间-->

         <divclass="middle">

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

   </div>

   <!--右侧-->

         <divclass="right">

             <div>right</div>

   </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

<div class="main">

         <!--左侧-->

         <divclass="left">

             <div>left</div>

   </div>

   <!--中间-->

         <divclass="middle">

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

   </div>

   <!--右侧-->

         <divclass="right">

             <div>right</div>

   </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;

        

         }

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

HTML与CSS布局技巧总结

很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些...
  • bingkingboy
  • bingkingboy
  • 2016-04-11 00:29
  • 14563

css实现左右布局,左侧div固定不变,右侧div宽度自适应

1.如果不考虑浏览器的兼容问题的话,可以使用css3的新增属性 calc()  ;calc是calculate的简写,汉语为计算的意思。 .left{ width: 200px; float...
  • yinkaihui
  • yinkaihui
  • 2015-11-15 20:12
  • 8743

这可能是史上最全的CSS自适应布局总结

标题严格遵守了新广告法,你再不爽,我也没犯法呀!屁话不多说,直入! 所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。 大体上,布局中会用到的有:尺寸相...
  • three_bird
  • three_bird
  • 2016-05-21 08:56
  • 25059

一个好例子:DIV+CSS布局-固定页面开度布局

DIV+CSS布局中主要CSS属性介绍: Float:        Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道标签默认一行只能显示一个,而使用...
  • u014801801
  • u014801801
  • 2016-12-11 22:20
  • 4612

经典左右布局demo

test    -->        .layout .sidebar { float: left; width: 150px; background: #fce3c5; height: 300px;.....
  • XTQueen_up
  • XTQueen_up
  • 2014-09-30 11:31
  • 1894

DIV 左右布局方案

DIV 左右布局方案
  • Silent_Paladin
  • Silent_Paladin
  • 2017-03-01 20:59
  • 1453

h5学习笔记:左右布局

最近在学习css的时候会经常用到左右布局。所以会先建立一个div容器,里面添加图形和文本 效果图如下。 于是第一步会先建立一个div,然后在内部添加两个div。 ...
  • hero82748274
  • hero82748274
  • 2016-12-30 17:32
  • 1841

Css 详细解读定位属性 position 以及参数

Css 详细解读定位属性 position 以及参数position 定位属性,是CSS中非常重要的属性。除了文档流布局,就是定位布局了。本来我对这个问题没有放在心上,毕竟写了这么多年的css,对po...
  • FungLeo
  • FungLeo
  • 2015-11-26 15:04
  • 5958

CSS布局样式:左右布局,左边定宽,右边自适应

1.display:table width:100% 和 diplay : table-cell table #wrap{ display: table;...
  • Jacksoncz
  • Jacksoncz
  • 2017-08-02 14:28
  • 202

float 左右布局,左右div等高

一. 利用背景图,做出左右等高的模拟效果   这种方法不是真正的左右等高,而是在外框元素中添加一张背景图片,当内容增多时,背景会纵向重复,就会形成左右等高的效果。  这种方法不是真正的div自动等高...
  • wodetiankong516
  • wodetiankong516
  • 2013-09-25 13:41
  • 17122
    个人资料
    • 访问:82120次
    • 积分:1734
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条