CSS基础5-定位和元素转化

模块回顾

1.position定位

2.元素转化

一、定位

css中用postion定位一般有4中，

（1）固定定位（fixed）

 

（2）相对定位(relative)

 

（3）绝对定位(absolute)

 

（4）静态定位(static)

 

1.fixed：固定元素框不随页面的滚动而滚动，固定在一个地方不会变动。例如：

<div id="dog1">
    <div id="dog2"><a href="#"><img src="360-dog.png" alt="" id="l1"></a></div>
    <div id="dog3">
    <div ><img src="360-star.png" alt="" class="l2"></div>
    <div id="dog5"><a href="#" class="o1">娱乐</a></div>
    </div>
    <div id="dog6">
    <div ><img src="360-play.png" alt="" class="l2"></div>
    <div id="dog8"><a href="#" class="o1">看片</a></div>
    </div>
    <div id="dog9">
    <div ><img src="360-shopping.png" alt="" class="l2"></div>
    <div id="dog11"><a href="#" class="o1">购物</a></div>
    </div>
    <div id="dog12">
    <div ><img src="360-game.png" alt="" class="l2"></div>
    <div id="dog14"><a href="#" class="o1">游戏</a></div>
    </div>
    <div id="dog15">
    <div id="dog16"><img src="360-coffee.png" alt="" class="l2"></div>
    <div id="dog17"><a href="#" class="o1">生活</a></div>
    </div>
    <div id="dog18">
    <div id="dog19"><img src="360-money.png" alt="" class="l2"></div>
    <div id="dog20"><a href="#" class="o1">借钱</a></div>
    </div>
    <div id="dog21">
    <a href="#" id="dog22">星座运势</a>
    </div>

#dog1{
    border: 0px black solid;
    height: 350px;
    width: 75px;
    position: absolute;
    right: 30px;
    top: 57px;
    position: fixed;
}
#dog2{
    border: 0px black solid;
}
#l1{
    width: 74px;
    height: 80px
}
#dog3{
    border: 0px black solid;
    height: 30px;
    width: 70px;
    position: absolute;
    top: 85px;
    left: 2px;
    background-color: #f7f7f7;
}
.l2{
    height: 30px;
    width: 30px;
}
.o1{
    text-decoration: none;
    color: gray;
    font-size: 14px;
}
#dog4{
    border: 0px black solid;
    position: absolute;
    left: 2px;
    bottom: 0px;
}
#dog5{
    border: 0px black solid;
    height: 30px;
    position: absolute;
    left: 30px;
    top: 4px;
}
#dog6{
    border: 0px black solid;
    height: 30px;
    width: 70px;
    position: absolute;
    top: 120px;
    left: 2px;
    background-color: #f7f7f7;
}
#dog9{
    border: 0px black solid;
    height: 30px;
    width: 70px;
    position: absolute;
    top: 155px;
    left: 2px;
    background-color: #f7f7f7;
}
#dog12{
    border: 0px black solid;
    height: 30px;
    width: 70px;
    position: absolute;
    top: 190px;
    left: 2px;
    background-color: #f7f7f7;
}
#dog7{
    border: 0px black solid;
    position: absolute;
    left: 2px;
    bottom: 0px;
}
#dog10{
    border: 0px black solid;
    position: absolute;
    left: 2px;
    bottom: 0px;
}
#dog13{
    border: 0px black solid;
    position: absolute;
    left: 2px;
    bottom: 0px;
}
#dog8{
    border: 0px black solid;
    height: 30px;
    position: absolute;
    left: 30px;
    top: 3px;
}
#dog11{
    border: 0px black solid;
    height: 30px;
    position: absolute;
    left: 30px;
    top: 3px;
}
#dog14{
    border: 0px black solid;
    height: 30px;
    position: absolute;
    left: 30px;
    top: 3px;
}
#dog15{
    border: 0px black solid;
    height: 30px;
    width: 70px;
    position: absolute;
    top: 225px;
    left: 2px;
    background-color: #f7f7f7;
}
#dog18{
    border: 0px black solid;
    height: 30px;
    position: absolute;
    top: 260px;
    width: 70px;
    left: 2px;
    background-color: #f7f7f7;
}
#dog17{
    border: 0px black solid;
    height: 30px;
    position: absolute;
    left: 30px;
    top: 3px;
}
#dog20{
    border: 0px black solid;
    height: 30px;
    position: absolute;
    left: 30px;
    top: 3px;
}
#dog21{
    border: 0px black solid;
    height: 30px;
    position: absolute;
    top: 295px;
    width: 70px;
    left: 2px;
    background-color: #f7f7f7;
}
#dog22{
    color: orangered;
    font-size:14px ;
    text-decoration: none;
    position: absolute;
    margin: 6px
}
.o1:hover{
    color: yellowgreen;
}
.o1:visited{
    color: gray;
}

2.相对定位：相对于自身未设置相对定位前的位置进行移动，引用chensiqi的一句话是“老家留坑，形影分离”，一般就是给绝对定位当参考，子承父。

div1{
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
left：10px；
bottom：5px；
}

3.绝对定位：

绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；注意css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，所以离他最近的盒子的定位可以是相对定位（relative）和绝对定位（absolute）的，但是在开发中，一般是父盒子设置相对定位的，但是不代表只能是相对定位。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="D7CSSTest03.css">
</head>

<body>
<div id="d1">
</div>
</body>
</html>

#div1{
position:absolute;
left:30px;
right:30px;
top:50px;
}

二、元素转化

常用的块状元素有：<div>,<p>,<h1>~<h6>,<ol>,<ul>,<dl>,<table>,<form>,<address>,<blockquote>

常用的行内元素有：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<img>,<input>,<q>,<var>,<cite>,<code>

1.行内元素

行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。行内元素特征：(1)设置宽高无效(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间(3)不会自动进行换行。

display：inline

2.块状元素

　　块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。块状元素特征：(1)能够识别宽高(2)margin和padding的上下左右均对其有效(3)可以自动换行(4)多个块状元素标签写在一起，默认排列方式为从上至下。

display：block

3.行内块状元素

　　行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

　　行内块状元素特征：(1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右。displa：inline-block

4.转化

块级元素默认display:block;行内非替换元素(a,span)默认为display:inline;；行内替换元素(input)默认为display:inline-block;

display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。

display:block;转换为块级元素。

display:inline;转换为行内元素。

display:inline-block;转换为行内块级元素。
通过display:block;与display:inline;可以很容易的实现两类元素变现形式之间的转换。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="D7CSSTest04.css">
</head>

<body>
<div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
</div>
<div id="d4">原来你是我最想留住的幸运</div>
<div id="d5">原来我们和爱情曾经靠的那么近</div>
<p>我听见<span id="s1">远方</span>下课钟声响起</p>
</body>
</html>

/* CSS Document */
#d1{
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
#d2{
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    right: 50px;
    top: 50px;
    z-index: 2;
/*    绝对定位，根据上一级父元素谁有position属性，就根据谁定位，最大也就找到body，根据body定位*/
}
#d3{
    width: 50px;
    height: 50px;
    background-color: yellow;
    position: absolute;
    right: 40px;
    top: 40px;
    z-index: 3
}
#d4{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    border: 1px solid black;
    display:inline;
/*    块状转内联元素*/
}
#d5{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    border: 1px solid black;
}
#s1{
    color: red;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: blue;
    display: block;
/*    内联转块状元素*/
}