1. 程式人生 > >html布局(盒子)

html布局(盒子)

提示 頁面 abs 相對定位 posit textarea size type absolut

在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

水平布局

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

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

html布局(盒子)