絕對定位與margin bottom

2021-08-22 13:41:54 字數 789 閱讀 9307

charset="utf-8">

矩形圖title>

src="./js/vue.min.js">

script>

head>

type="text/css">

.div1

.div2

.div3

.div4

.div5

style>

class='div1'>

class='div2'>

class='div3'>

div>

class='div4'>

div>

div>

class='div5'>

div>

div>

body>

html>

總結:

當三個div在同一級時,若最後乙個div絕對定位,則倒數第二個設定margin-bottom無效,所以若想第二個div的margin-bottom有效果,需要給前兩個div設乙個父div ;

div2和div5左右居中的方法是分別設定width,然後left:50%,margin-left:-width/2。

矩形沒設定display:none

矩形設定display:none

絕對定位與相對定位

先看以下 效果 當設定child的div改為絕對定位後 效果 當父div沒設定絕對定位時,子絕對定位是相對於瀏覽器左上角座標,當時當父div設定了絕對或者相對定位後,效果如下 absolute 絕對定位 和 relative 相對定位 position absolute 意思是 絕對定位,他預設參照...

相對定位與絕對定位

其實是非常簡單的概念,w3school 給出的兩幅圖可以一目了然地表達這兩個概念 相對定位 position relative 也就是說,相對定位是相對於元素原來的位置進行重新定位,定位後,任然佔據著在文件流中原始的位置。絕對定位 position absolute 也就是說,絕對定位是相對於已定位...

相對定位與絕對定位

relative是相對定位,相對於本身的位置,元素的位置通過 left top right bottom 屬性進行定位。left是離原座標x軸的距離,top是離原座標y軸的距離,它本身的位置還在。absolute是絕對定位,相對於視窗左上角的位置,元素的位置通過 left top right 以,b...