在body里面放置兩個盒子，里面盒子設置margin-top，外層盒子生效？
在里面盒子上面加一個塊元素，設置高度

表單

? ? ? ? ? ? ? ?form action="地址" method="get/post"

input type:text password
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? button checkbox radio reset submit file

textarea 文本域

?

上傳的鍵name規定，必須寫
上傳的值value規定，可寫可不寫
placeholder，提示信息

?

元素

內斂元素：input、select、option、textarea、td
塊元素：form、table、tr

?

<br /> 換行
<hr /> 水平線

table：rowspan

? ? ? ? ? ? ? ? ? ? ? ? colspan
? ? ? ? ? ? ? ? ? ? ? ? cellpadding
? ? ? ? ? ? ? ? ? ? ? ? cellspacing
? ? ? ? ? ? ? ? ? ? ? ? border-colpase:colpase

定位

? ? ? ? ? ? ? ? ? ? ? ? position:absolute;絕對定位 相對父元素來定位(頁面定位)，給父元素加相對 定位position:relative; 不占位
? ? ? ? ? ? ? ? ? ? ? ? position:relative;相對定位，相對于原來位置定位 占位
? ? ? ? ? ? ? ? ? ? ? ? position:fixed;固定定位，相對于瀏覽器窗口定位 不占位
? ? ? ? ? ? ? ? ? ? ? ? z-index 調整定位順序

內斂元素可以設置寬高？

? ? ? ? ? ? ? ? ? ? ? ? display:block/inline-block;
? ? ? ? ? ? ? ? ? ? ? ? 浮動
? ? ? ? ? ? ? ? ? ? ? ? 定位

盒子居中？

?

父元素：相對定位
? ? ? ? ? ? ? ?position:relative;
子元素：絕對定位
? ? ? ? ? ? ? position:absolute;
? ? ? ? ? ? ? top:50%;
? ? ? ? ? ? ? left:50%;
? ? ? ? ? ? ? margin-left:-自身寬度一半;
? ? ? ? ? ? ? margin-top:-自身高度一半;
? ? ? ? ? ? ? border-radius /*圓角 單位：百分比 px*/
? ? ? ? ? ? ? background:rgba([0-255],[0-255],[0-255],[0-1]) 背景透明

隱藏

display:none; 隱藏 不占位 block 自身
visibility: hidden; 隱藏 占位 visible 自身
overflow:hidden;溢出隱藏 ---父元

overflow:scroll/hidden

visibility:hidden/visible

?

水平布局

水平三塊布局
? ? ? ? ? ? ? ? ? ? ?左中右 ---左左左
? ? ? ? ? ? ? ? ? ? ?左中右---左左右

水平兩塊布局
? ? ? ? ? ? ? ? ? ? ?左右 ---左左
? ? ? ? ? ? ? ? ? ? ?左右---左右

?

轉載于:https://www.cnblogs.com/qiaoxiaotuo/p/9343638.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html布局（盒子）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。