html+css|元素的浮动与定位

1.浮动属性float

清除浮动clear

overflow属性

visible:内容不会被修剪，会呈现在元素框之外

hidden:溢出内容会被修剪，并且被修建的内容是不可见的

auto:在需要时产生滚动条，即自适应所要显示的内容

scroll:溢出内容会被修剪，且浏览器会始终显示滚动条

2.定位属性position

static:静态定位

relative:相对定位

absolute:绝对定位

fixed:固定定位

例子如下：

P196

nbsp;html>


<meta><title>子元素相对于直接父元素定位</title><style>
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{
              margin:10px auto;
              width:300px;
              height:300px;
              padding:10px;
              background:#ccc;
              border:1px solid #000;
              position:relative;
}
.child01,.child02,.child03{
              width:100px;
              height:50px;
              line-height:50px;
              background:#ff0;
              border:1px solid #000;
              margin:10px 0px;
              text-align:center;
               
}
.child02{
              position:absolute;
              left:50px;
              top:100px;
              z-index:1000;
}
.child03{
              position:absolute;
              left:10px;
              top:80px;
              z-index:100;
}
</style><div>
     <div>child-01</div>
     <div>child-02</div>
     <div>child-03</div>
</div>

3.制作车载音乐页面网页焦点图

如下代码：

nbsp;html>


<meta><title>车载音乐页面</title><div>
    @@##@@
    <a></a>
    <a></a>
    <ul>
       <li>
       <li>
       <li>
       <li>
       <li>
       <li>
    </ul>
</div>

定义css样式表

*{margin:0;padding:0;border:0;list-style:none;}
a{text-decoration:none;font-size:30px;color:#fff;}
div{
    width:580px;
    height:200px;
    margin:50px auto;
    position:relative;
}
a{
  float:left;
  width:25px;
  height:90px;
  line-height:90px;
  background:#333;
  opacity:0.7;
  border-radius:4px;
  text-align:center;
  display:none;
  cursor;pointer;
}
.left{
    position:absolute;
    left:-12px;
    top:60px;
    }
.right{
     position:absolute;
     right:-12px;
     top:60px;
     }
div:hover a{
    display:block;
    }
ul{
  width:110px;
  height:20px;
  background:#333;
  opacity:0.5;
  border-radius:8px;
  position:absolute;
  right:30px;
  bottom:20px;
  text-align:center;
  }
li{
  width:5px;
 height:5px;
 background:#ccc;
 border-radius:50%;
 display:inline-block;
 }
.max{
    width:12px;
    background:#03BDE4;
    border-radius:6px;
    }

更多html+css|元素的浮动与定位相关文章请关注PHP中文网！

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！