Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
生活随笔
收集整理的這篇文章主要介紹了
Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS盒子模型
- 一、盒子模型
- 二、 塊級元素與行級元素???
- 塊級元素
- 行內元素
- 轉化
- 三、導航欄的實現
一、盒子模型
盒子是頁面內容的容器，通過盒子的堆疊、嵌套能實現網頁布局
各屬性：
- 大小（width、height）
- 邊框（border）: 1px(border-width) solid (border-style) red(border-color)（紅實線邊框必背）
- 內邊距（padding）
- 外邊距（margin）
盒子計算
例如盒子的寬 = width+ padding-left + padding-right + border-left + border-right + margin-left + margin-right
二、 塊級元素與行級元素???
塊級元素
- 元素會獨占一行，且具有盒子的屬性
- 常見塊級元素：div , p , ul , form , table
行內元素
- 不會換行，橫向排列
- 常見行內元素：span , a，img , input ，select
轉化
- display：none（不顯示）
- display：inline（轉化為行內）
- display：inline-block（轉化為行內塊）
- display：block（轉化為塊）
三、導航欄的實現
<!DOCTYPE html> <html> <head><title>#</title><meta charset="utf-8"><style type="text/css">li{display: inline-block;width: 45px;height: 30px;border:1px solid red;}</style> </head> <body><ul><li>首頁</li><li>1</li><li>2</li><li>3</li></ul> </body> </html>總結
以上是生活随笔為你收集整理的Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web开发（一）·期末不挂之第四章·CS
- 下一篇： Web开发（一）·期末不挂之第六章·网页