关闭

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

810人阅读 评论(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

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:49840次
    • 积分:1366
    • 等级:
    • 排名:千里之外
    • 原创:88篇
    • 转载:14篇
    • 译文:0篇
    • 评论:1条