H5CSS3筆記-三大布局方式
阿新 • • 發佈:2019-02-13
一.HTML中的三種佈局方式
1.標準流:預設的佈局方式,即順序佈局
2.浮動:
3.定位:position屬性決定了元素將如何定位
二.HTML有兩大元素
1.塊級元素
div, h1~h6, 有序無序列表(ol,ul,li), table表格 p段落等--總是獨佔一行
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>標準流網頁佈局</title> <style> .test{ width: 100px; height: 100px; background: red; border: 1px solid #FFFFFF;/*邊框1畫素實線白色*/ } </style> </head> <body> <div class="test"></div> <div class="test"></div> <div class="test"></div> <span>文字1</span> <span>文字3</span> <span>文字2</span> <!--div垂直排列,span橫向排列---即塊元素和內聯元素的區別--> </body </html>
2.內聯元素
a, span, img ,input--和相鄰的內聯元素同一行,寬度不夠才會被擠到下一行。