html/css第五课--盒子模型、元素对齐、定位技术概念及实例--0816

代码：

编程实现盒模型的基本要素

实例

<!DOCTYPE html>
<!--filename: lesson0501.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
</head>
<style type="text/css">
    .box{
        width:300px;
        height:300px;
        background-color:coral;
        border-style:solid dotted dashed double;
        border-width:1px 2px 3px 4px;
        border-color:blue black green yellow;
        padding:2px 4px 6px 8px;
        margin:8px 6px 4px 2px;
    }
</style>
<body>
<!--1. 编程实现盒模型的基本要素: 内容，内外边距与边框，并背诵padding与margin的简写规则；-->
<div class="box">php</div>
</body>
</html>

运行实例 »

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

2.编程实现最常用的四种元素对齐方案

实例

<!DOCTYPE html>
<!--filename: lesson0502.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素对齐</title>
</head>
<body>
<!--2. 编程实现最常用的四种元素对齐方案；-->
1. 子元素是单行行内元素: 如a, span <br>
a:水平居中: 在父元素应用: text-align: center;
b:垂直居中: 在行内子元素上设置行高与父元素等高: line-height:200px;
<style type="text/css">
    .b1{
        width:300px;
        height:300px;
        background-color:cyan;
        text-align:center;
    }
    .b1 a{
        line-height:300px;
    }
</style>
<div class="b1">
    <a href="">php中文网</a>
</div>
<hr>
2. 子元素是多行的内联文本 <br>
a:水平居中: 在父元素应用: text-align: center;<br>
b:垂直居中: 在父元素: display:table-cell;
<style type="text/css">
    .b2{
        width:300px;
        height:300px;
        background-color:lightgreen;
        text-align:center;
        display:table-cell;
        vertical-align:middle;
    }
</style>
<div class="b2">
    <span>php中文网</span>
    <br>
    <span>视频教程</span>
</div>
<hr>
3.子元素是块元素 <br>
a: 水平居中: 子元素设置左右外边距自动适应容器margin: auto;
b:垂直居中: 在父元素: display:table-cell;
<style type="text/css">
    .b3{
        width:300px;
        height:300px;
        background-color:wheat;
        display:table-cell;
        vertical-align:middle;
    }
    .b31{
        width:100px;
        height:100px;
        background-color:white;
        margin:0 auto;
    }
</style>
<div class="b3">
    <div class="b31"></div>
</div>
<hr>
4. 子元素是不定宽的块元素
a: 水平居中: 子元素转为行内元素,父级加: text-align:center
b: 垂直居中: 在父元素: display:table-cell;
<style type="text/css">
    ul{
        margin:0;
        padding:0;
    }
    .b4{
        width:300px;
        height:300px;
        background-color:lightblue;
        text-align:center;
        display:table-cell;
        vertical-align:bottom;
    }
    .b4 li{
        display:inline;
    }
</style>
<div class="b4">
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
    </ul>
</div>
</body>
</html>

运行实例 »

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

3.编程实现用五个色块制作一个十字架(相对定位和绝对定位任选一种实现即可)

实例

<!DOCTYPE html>
<!--filename:lesson0503.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位相对定位</title>
</head>
<body>

<!--3. 编程实现用五个色块制作一个十字架(相对定位和绝对定位任选一种实现即可)-->
<style type="text/css">
    .box{
        width:600px;
        height:600px;
        /*定位父级设置定位属性 一般为相对定位*/
        position:relative;
    }

    .box1{
        width:200px;
        height:200px;
        background-color:lightblue;
        /*定位属性：绝对定位*/
        position:absolute;
        top:0;
        left:200px;
    }
    .box2{
        width:200px;
        height:200px;
        background-color:lightcoral;
        position:absolute;
        top:200px;
        left:0;

    }
    .box3{
        width:200px;
        height:200px;
        background-color:lightgreen;
        position:absolute;
        top:200px;
        left:400px;
    }
    .box4{
        width:200px;
        height:200px;
        background-color:lightyellow;
        position:absolute;
        top:400px;
        left:200px;
    }
</style>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>
</body>
</html>

运行实例 »

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

实例

实例

实例

相关文章