博客列表 >盒子模型,元素对齐与位置定位作业-2018年8月17日

盒子模型,元素对齐与位置定位作业-2018年8月17日

YHF的博客
YHF的博客原创
2018年08月17日 11:56:14818浏览

1.盒子模型:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型呀</title>
    <style>
        .div1{
            width:300px;
            height:300px;
            background-color:lightgreen;
        }
        .div2{
            width: 300px;
            height: 300px;
            background-color:lightpink;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

预览图:

1.jpg

2.元素对齐

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素对齐呀</title>
</head>
<body>
    <h3>元素对齐方式一</h3>
    <!--1.子元素是单行行内元素:如:a,span -->
    <!--a.水平居中:在父元素应用:text-align:center;-->
    <!--b.垂直居中:在行内子元素上设置行高与父元素等高:line-light:200px;-->
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color:#FFE80E;
            text-align:center;
        }
        .box1 a{
            line-height:200px;
            /*去下划线*/
            text-decoration:none;

        }
    </style>
<div class="box1"><a href="">方式一呀!</a></div> <hr>

    <h3>元素对齐方式二</h3>
<!--2.子元素是多行的内联文本-->
<!--a.水平居中:在父元素应用:text-align:center;-->
<!--b.垂直居中:在父元素:display:table-cell; vertical-align:middle   -->
    <style>
        .box2{
            width: 200px;
            height: 200px;
            background-color:#593bfc;
            /*水平居中*/
            text-align:center;
            /*此元素会作为一个表格单元格显示(类似 <td> 和 <th>)*/
            display:table-cell;
            /*垂直居中*/
            vertical-align:middle;
        }
    </style>
    <div class="box2">
        <span>对齐方式二呀!</span><br>
        <span>是呀!对齐方式二呀!</span>
    </div>
    <hr>


    <h3>元素对齐方式三</h3>
<!--3.子元素是块元素-->
<!--a.水平居中:子元素设置左右外自动适应容器margin:auto;-->
<!--b.垂直居中:在父元素:display:table-cell;   vertical-align:middle;  -->
    <style>
        .box3{
            width: 200px;
            height: 200px;
            background-color:#ffff0a;
            display:table-cell;
            vertical-align:middle;

        }
        .box3 .child{
            width: 100px;
            height: 100px;
            background-color:#39FF1B;
            /*水平居中*/
            margin:auto;
            /*水平居中*/
            text-align:center;
        }
    </style>
    <div class="box3">
        <div class="child">方式三呀!</div>
    </div>
    <hr>

<h3>元素对齐方式四</h3>
<!--4.子元素是不定宽的块元素-->
<!--a:水平居中:子元素转为行内元素,父级加:text-align:center;-->
<!--b.垂直居中:在父元素:display:table-cell;    -->
    <style>
        .box4{
            width: 200px;
            height: 200px;
            background-color:#ef27d8;
            text-align:center;/*水平居中*/
            display:table-cell;
            vertical-align: middle;
            /*位于底部*/
            /*vertical-align:bottom;*/
        }
        ul{
            margin:0;
            /*padding:0;*/
            padding-left:0;
        }
        .box4 ul li{
            /*将块元素转行内元素*/
            display:inline;

        }
        .box4 ul li a{
            text-decoration:none;
        }
    </style>
    <div class="box4">
        <ul>
            <li><a href="">方</a></li>
            <li><a href="">式</a></li>
            <li><a href="">四</a></li>
            <li><a href="">呀</a></li>
            <li><a href="">!</a></li>
        </ul>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

预览图:

2.jpg

3.定位

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        body{
            margin: 0;
        }
        .box{
            width: 600px;
            height: 600px;
            /*background-color:grey;*/
            /*定义父级必须设置地位属性:属性为相对定位position:relative*/
            position:relative;
        }
        .div1{
            width: 200px;
            height: 200px;
            background-color:#ef27d8;
            position:absolute;
            left: 200px;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color:#39FF1B;
            position:absolute;
            top: 200px;
        }
        .div3{
            width: 200px;
            height: 200px;
            background-color:#ffff0a;
            position:absolute;
            left: 400px;
            top: 200px;
        }
        .div4{
            width: 200px;
            height: 200px;
            background-color:#0388f1;
            position:absolute;
            left: 200px;
            top: 400px;
        }
        .div5{
            width: 200px;
            height: 200px;
            background-color:pink;
            position:absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
    </div>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

预览图:

3.jpg

总结:

元素对齐方式:

  1.  子元素是单行行内元素: 如a, span <br>
        a:水平居中: 在父元素应用: text-align: center;
        b:垂直居中: 在行内子元素上设置行高与父元素等高: line-height:200px;

  2. 子元素是多行的内联文本
    a.水平居中:在父元素应用:text-align:center;
    b.垂直居中:在父元素:display:table-cell; vertical-align:middle

  3. 子元素是块元素
    a.水平居中:子元素设置左右外自动适应容器margin:auto;
    b.垂直居中:在父元素:display:table-cell;   vertical-align:middle;

  4. 子元素是不定宽的块元素
    a:水平居中:子元素转为行内元素,父级加:text-align:center;
    b.垂直居中:在父元素:display:table-cell;  

位置定位:

  1. 绝对定位:position:absolute;

  2. 相对定位:position:relative;

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议