盒模型定位 0816 - 作业

Home > List of blog posts > 盒模型定位 0816

Blogger Information

Blog 40

fans 1

comment 0

visits 31977

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: lightblue;
            padding；30px 20px;/*内边距；只能设置上下左右的宽度没有样式也没颜色*/
            border: 60px solid pink;/*边框可设置宽度，类型：实线/虚线,颜色:...*/
            box-shadow: 5px 5px 5px 5px;/*盒子阴影*/
            background-color:white;
            margin-top: 20px;/*外边距；只能设置上下左右的宽度，没有样式也没颜色*/
            margin-right:40px;
            margin-left:20px;
            margin-bottom:30px;
        }

       
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>







实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        body {
            /*margin:0;*/
        }
        .box {
            width: 600px;
            height: 600px;
            /*background-color: wheat;*/
            /*定位父级必须设置定位属性*/
            position: relative;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /*绝对定位元素会脱离文档流*/
            position: absolute;
            top:0;
            left: 200px;

        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top:200px;
            left:0;
        }
        .box3 {
            width: 200px;
            height: 200px;
            background-color:red;
            position: absolute;
            top: 200px;
            left: 400px;
        }
        .box4 {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 400px;
            left: 200px;

        }
        .box5{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 200px;
            left: 200px;

        }


    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

</body>
</html>
运行实例 »
点击 "运行实实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素对齐方式</title>
</head>
<body>
<h3>元素对齐方式</h3>
<!--1. 子元素是单行行内元素: 如a, span <br>
    a:水平居中: 在父元素应用: text-align: center;
    b:垂直居中: 在行内子元素上设置行高与父元素等高: line-height:200px;-->

<!--<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #ffff0a;
        text-align: center;
    }
    .box1 a {
        line-height: 200px;
    }
</style>-->
<!--<div class="box1">
   <a href="">php中文网</a>
</div>-->


<!--<hr>-->


<!--2. 子元素是多行的内联文本 <br>,都是在父类元素中进行，转化为表格形式进行垂直居中
    a:水平居中: 在父元素应用: text-align: center;<br>
    b:垂直居中: 在父元素: display:table-cell;-->


<!--<style>
    .box2 {
         width: 200px;
         height: 200px;
         background-color: lightgreen;
         text-align: center;  /*水平居中*/
         display: table-cell
         vertical-align: middle; /*垂直居中*/
          }
    </style>-->
<!--<div class="box2">
    <span>php中文网</span> <br>
    <span>www.php.cn</span>-->
<!--</div>-->
<!--<hr>-->


<!--3.子元素是块元素 <br>
    a:水平居中: 子元素设置左右外边距自动适应容器margin: auto;
    b:垂直居中: 在父元素: display:table-cell;--> 
<!--  
<style>
    .box3 {
        width: 200px;
        height: 200px;
        background-color: lightgreen;
        display: table-cell;/*2.指让标签元素以表格单元格的形式呈现，类似于td标签*/
        vertical-align: middle; /*3.垂直居中*/
    }
    .box3 .child {
        width: 100px;
        height: 100px;
        background-color: lightcoral;
        /*margin-left: auto;*/
        /*margin-right: auto;*/
        margin: auto;  /*1.水平居中*/
    }
</style>
<div class="box3">
    <div class="child"></div>
</div>


<hr>
-->

<!-- 4. 子元素是不定宽的块元素
     a: 水平居中: 子元素转为行内元素,父级加: text-align:center
     b: 垂直居中: 在父元素: display:table-cell;-->
<style>
    .box4 {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        text-align: center; /*2.水平居中*/
        display: table-cell;/*3.让标签元素以表格单元格的形式呈现*/
        vertical-align: bottom; /*4.位于底部top为顶部，middle为垂直居中*/

    }
    ul {
        margin: 0;
        padding-left: 0;
    }
    .box4 li {
        display: inline;  /*1.将块元素转为行内元素,类似于子元素的多行内联文本*/
    }
</style>

<div class="box4">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</div>

</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例例" 按钮查看在线实例

运行实例 »

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

0816作业

]$3@(3F3ITDMTBB{Y$2WS0S.jpg (G$IYQ~X]885`T[%F@WJ$M0.png $]NIX{M2Q4UFD(_UZE(@T2CM.jpg$ 35X3R~L]CRR@)KX1CJPSL(8.png V~TV_2T%1)9FVZBQ$Z9M1`C.jpg

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

分页查询0910

2018-09-12 21:09:04