HTML学习笔记（六）

　　昨天结束了HTML+CSS部分的学习。

　　今天是腊月二十三，今天的任务主要是复习一下以前学的知识。

　　下面整理一下昨天学的知识：

　　1.margin和padding

　　　　margin用来控制标签的外边距，margin有四个属性：分别按顺序是 top right bottom left。如果只设置1个数值，那么四个方向的页边距都是这个数值。如果设置两个数值，那么这两个数值就分别表示上下和左右的页边距。；padding表示的是内边距用法与margin类似。

　　2.margin的重叠现象

　　　　插入一段代码：

<title>margin的重叠现象</title>
<style>
    #d1{
        background-color:red;
        height:50px;
        margin-bottom:30px;
        }
    #d2{
        background-color:blue;
        height:50px;
        margin-top:20px;
        }
</style>    
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

　　　　两个div之间的间距本该是50px，但是margin的重叠现象会让真正的间距取两个margin的最大值。

　　3.盒子模型

    真正的占地宽度：width+padding*2+border*2+margin*2

　 真正的占地高度：height+padding*2+border*2+margin*2

　　4.绝对定位

　　　　根据上一级父元素谁有position属性，就根据谁定位，如果上一级父元素没有position属性，就会继续往上一级寻找，最大能找到body标签，根据body来定位。

　　

    /*绝对定位*/
        #b5{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 101;
        }
        #b6{
            width: 50px;
            height: 50px;
            background-color: brown;
            position: absolute;
            top: 40px;
            left: 40px;
            z-index: 100;
        }
            #b7{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>

　　　　在绝对定位中还有一个z-index属性，如果有两块相互重叠了，可以用z-index来调整哪个在上边哪个在下边。上边代码设置了z-index，最终效果是数值大的在上边显示。

　　5.fixed定位和相对定位

　　　　fixed定位是根据浏览器窗口定位，比如360网站在页面右侧的导航栏。

　　　　相对定位是相对于自己本身的位置去定位。

<style>
#b1{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: fixed;/*固定，根据浏览器窗口定位*/
            left: 1000px;
            top: 50px;
        }
        #b2{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        #b3{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;/*相对定位*/
            left: 10px;
            top: 10px;
        }
        #b4{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
</style>
<div id="b1">fixed定位</div>
<div id="b2">相对定位
    <div id="b3"></div>
    <div id="b4">
    </div>
    </div>

6.块状元素与内联元素

　　

　　　　如何实现块状元素与内联元素的转化：

　　　　　　

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内联元素与块状元素的转化</title>
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        border: 1px solid black;
        display: inline;/*块状转内联*/
    }
    #s1{
        color: red;
        width: 100px;
        height: 100px;
        display: block;/*内联转块状*/
        background-color: blue;
    }
</style>
</head>

<body>
    <p>离离原上<span id="s1">草</span>，春风吹又生</p>
    <div>一岁一枯荣</div>
    <div>野火烧不尽</div>
</body>
</html>

 

posted @ 2018-02-08 10:59  445412434  阅读(105)  评论(0)  编辑  收藏  举报