position float浮动和定位

Original 2019-02-14 20:35:54 351
abstract:浮动 分左浮动和右浮动 对元素浮动后要清除(浮动后脱离文档流),否则后面的元素后跑到浮动的元素“下面”去。定位 分相对定位和绝对定位,position :relative 是相对于它原来的位置position :absolute 是相对于已经定位的元素或者相对于body 进行定位<!DCOTYPE html><html><head><tittle>浮

浮动 分左浮动和右浮动 对元素浮动后要清除(浮动后脱离文档流),否则后面的元素后跑到浮动的元素“下面”去。

定位 分相对定位和绝对定位,position :relative 是相对于它原来的位置position :absolute 是相对于已经定位的元素或者相对于body 进行定位

<!DCOTYPE html>

<html>

<head>

<tittle>浮动和定位</tittle>

<style>

ul li{width:30px; height:40px;  float:left;}

#box1{  width:30px; height:40px ; position :relative top: 20px; right:50px;}

#box1{  width:130px; height:140px ; position :absolute ;top: 20px; right:50px;}

</style>

</head>

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<div  id="box1'></div>

<div id="box2></div>

<div id="box3></div>

<div id="box4></div>

</body>

</html>

Correcting teacher:韦小宝Correction time:2019-02-15 09:18:31
Teacher's summary:写的没毛病 总结的也是没毛病的 浮动在开发中起到很关键的作用 但是使用多了也要记得清除浮动哦!

Release Notes

Popular Entries