百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

任务四:定位和居中问题---学习总结

作者杨坤华课程任务四:定位和居中问题1834次浏览12017-03-18 00:31

1、position属性
css中定位的属性为position属性,属性值和功能如下

属性值 含义 特点
static 静态定位 默认定位方式,相当于无定位
relative 相对定位 定位元素仍位于标准文档流中,相对于自身进行偏移
absolute 绝对定位 定位元素脱离标准文档流,若有已定位祖先原始则相对于距离最近的祖先元素偏移,无已定位祖先元素则相对于根节点html偏移
fixed 绝对定位中的固定定位 定位元素相对于窗口进行偏移

PS:关于static:
对于下列设置中由于box1设置的static属性值相当于box1未定位;所以box2的虽然嵌套在box1中,但是box1不是box2最近的祖先元素,所以其偏移是相对于html根节点而不是box1(因为不知道如何插入图片,所以结果需复制代码查看,下同)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>static定位</title>
    <style>
        .box1{
            position: static;
            height: 200px;
            width: 200px;
            margin: 50px;
            background-color: red;
        }
        .box2{
            height: 50px;
            width: 50px;
            background-color: yellow;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2" ></div>
</div>
</body>
</html>

2、如何利用position属性
(1)使元素居中显示

.boxset{
    width: 400px;
    position:relative;
    left:50%;
    margin-left:-200px;
    top: 100px;

}

(2)使元素层叠显示
对于嵌套的父子元素,父元素设置position:relative;属性;子元素设置position: absolute;属性时,可以利用left、top、right、bottom对原始的位置进行设置,使子元素在父元素的固定位置显示

<div class="boxset">
    <div class="box"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</div>

}
.boxset{
    width: 400px;
    position:relative;
    left:50%;
    margin-left:-200px;
    top: 100px;
}
.box{
    height: 200px;
    width: 400px;
    background-color: #CCCCCC;
}
.top{
    height: 50px;
    width: 50px;
    background-color: #fc0;
    border-radius:0 0 50px 0;
    position: absolute;
    top: 0px;
    left: 0px
}
.bottom{
    height: 50px;
    width: 50px;
    background-color: #fc0;
    border-radius:50px 0 0 0;
    position: absolute;
    top: 150px;
    left: 350px;
}

3、如何利用 border-radius属性画圆和半圆
border-radius属性是css3中的用来设置边框左上、右上、右下、左下4个角圆角的属性,
可以利用这个属性来实现圆、半圆、扇形等简单图形,方法如下代码所示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css画圆</title>
    <style type="text/css">
        .box1{/* 画圆 */
            width: 100px;
            height: 100px;
            background-color: #fc0;
            margin: 20px;
            border-radius: 100%;
        }
        .box2{/* 画半圆 */
            width: 100px;
            height: 50px;
            background-color: #fc0;
            margin: 20px;
            border-radius:0 0 50px 50px ;/* 直径所在的两个角的值为0,其余角为半径*/
        }
        .box3{/* 画四分之一圆 */
            width: 100px;
            height: 100px;
            background-color: #fc0;
            margin: 20px;
            border-radius: 100px 0 0 0;/* 圆心所在角的对角值为半径,其余角为0*/
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
1条评论