web前端入门学习 css（4）（盒子模型）
生活随笔
收集整理的這篇文章主要介紹了
web前端入门学习 css（4）（盒子模型）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 盒子模型（box model）
- 盒子模型的組成
- 邊框 border
- 邊框的簡寫，邊框的分開寫法（分別寫上下左右邊框）
- 利用邊框的層疊性簡化書寫代碼（小技巧）
- 給表格table和單元格td和表頭th加邊框
- 盒子邊框會影響實際寬度
- 盒子的內邊距padding
- 盒子內邊距padding的簡寫（復合寫法）
- 內邊距padding也會影響盒子實際大小
- 【綜合案例】模仿新浪導航欄用內邊距padding撐開盒子
- 使用padding而不適用text-indent的原因
- 如果盒子沒有指定寬度/高度width/height，則padding不會撐開盒子大小
- margin外邊距
- 使用外邊距margin屬性讓整個塊級頁面居中顯示
- 如何讓行內元素或者行內塊元素水平居中對齊（在其水平居中的父級設置：text-align: center）
- 外邊距margin合并問題
- 相鄰塊元素垂直外邊距的合并
- 嵌套塊元素垂直外邊距的塌陷
- 用通配符選擇器*清除所有盒子的內外邊距（css必需首行代碼！）
- ps的基本操作
- 綜合案例：電商網站產品模塊/小米手機展示
- 盒子模型總結
- 1、布局為啥用不同盒子？
- 2、為什么用那么多類名？
- 3、到底用margin還是padding？（視情況不同而用）
- 4、自己做不知如何敲代碼？
- 案例：品優購快報（如何去掉無序列表ul里li前面的點list-style: none;）
- 圓角邊框border-radius
- 盒子陰影box-shadow
- 文字陰影 text-shadow
https://www.bilibili.com/video/BV1pE411q7FU?p=135&spm_id_from=pageDriver
盒子模型（box model）
盒子模型的組成
邊框 border
邊框的簡寫，邊框的分開寫法（分別寫上下左右邊框）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>邊框的復合寫法</title><style>div {width: 300px;height: 200px;/* border-width: 5px;border-style: solid;border-color: pink; *//* 邊框的復合寫法 簡寫: *//* border: 5px solid pink; *//* 上邊框 */border-top: 5px solid pink;/* 下邊框 */border-bottom: 10px dashed purple;}</style> </head><body><div></div> </body></html>利用邊框的層疊性簡化書寫代碼（小技巧）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>邊框的練習</title><style>/* 請給一個 200*200 的盒子，設置上邊框為紅色，其余邊框為藍色 */div {width: 200px;height: 200px;/* border-top: 1px solid red;border-bottom: 1px solid blue;border-left: 1px solid blue;border-right: 1px solid blue; *//* border包含四條邊 */border: 1px solid blue;/* 層疊性 只是層疊了 上邊框啊 */border-top: 1px solid red;}</style> </head><body><div></div> </body></html>給表格table和單元格td和表頭th加邊框
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>今日小說排行榜</title><style>table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px solid pink;/* 合并相鄰的邊框 */border-collapse: collapse;font-size: 14px;text-align: center;}</style> </head><body><table align="center" cellspacing="0"><thead><tr><th>排名</th><th>關鍵詞</th><th>趨勢</th><th>進入搜索</th><th>最近七日</th><th>相關鏈接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹燈</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹燈</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td></tr><tr><td>3</td><td>西游記</td><td><img src="up.jpg"></td><td>456</td><td>123</td><td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹燈</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹燈</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹燈</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td></tr></tbody></table> </body></html>
https://www.bilibili.com/video/BV1pE411q7FU?p=141&spm_id_from=pageDriver
轉去學下Ajax
瞟了一眼回來了
盒子邊框會影響實際寬度
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>邊框會影響盒子的實際大小</title><style>/* 我們需要一個200*200的盒子, 但是這個盒子有10像素的紅色邊框 */div {width: 180px;height: 180px;background-color: pink;border: 10px solid red;}</style> </head> <body><div></div> </body> </html>盒子的內邊距padding
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子模型之內邊距</title><style>div {width: 200px;height: 200px;background-color: pink;padding-left: 20px;padding-top: 30px;}</style> </head> <body><div>盒子內容是content盒子內容是content盒子內容是content盒子內容是content</div> </body> </html>盒子內邊距padding的簡寫（復合寫法）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子模型之內邊距</title><style>div {width: 200px;height: 200px;background-color: pink;/* padding-left: 5px;padding-top: 5px;padding-bottom: 5px;padding-right: 5px; *//* 內邊距復合寫法(簡寫) *//* padding: 5px; *//* padding: 5px 10px; *//* padding: 5px 10px 20px; */padding: 5px 10px 20px 30px;}</style> </head> <body><div>盒子內容是content盒子內容是content盒子內容是content盒子內容是content</div> </body> </html>內邊距padding也會影響盒子實際大小
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>內邊距會影響盒子實際大小</title><style>div {width: 160px;height: 160px;background-color: pink;padding: 20px;}</style></head><body><div>padding會影響盒子實際大小padding會影響盒子實際大小padding會影響盒子實際大小padding會影響盒子實際大小</div></body> </html>【綜合案例】模仿新浪導航欄用內邊距padding撐開盒子
使用padding而不適用text-indent的原因
如果盒子沒有指定寬度/高度width/height，則padding不會撐開盒子大小
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>padding不會影響盒子大小的情況</title><style>h1 {/* width: 100%; */height: 200px;background-color: pink;padding: 30px;}div {width: 300px;height: 100px;background-color: purple;}div p {padding: 30px;background-color: skyblue;}</style> </head><body><h1></h1><div><p></p></div> </body></html>margin外邊距
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子模型之外邊距margin</title><style>div {width: 200px;height: 200px;background-color: pink;}/* .one {margin-bottom: 20px;} */.two {/* margin-top: 20px; *//* margin: 30px; */margin: 30px 50px;}</style> </head> <body><div class="one">1</div><div class="two">2</div> </body> </html>
https://www.bilibili.com/video/BV1pE411q7FU?p=149&spm_id_from=pageDriver
使用外邊距margin屬性讓整個塊級頁面居中顯示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>塊級盒子水平居中對齊</title><style>.header {width: 900px;height: 200px;background-color: pink;margin: 100px auto;}</style> </head> <body><div class="header"></div> </body> </html>如何讓行內元素或者行內塊元素水平居中對齊（在其水平居中的父級設置：text-align: center）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行內元素/行內塊元素水平居中對齊</title><style>.header {width: 900px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;}/* 行內元素或者行內塊元素水平居中給其父元素添加 text-align:center 即可 */</style> </head> <body><div class="header"><span>里面的文字</span></div><div class="header"><img src="down.jpg" alt=""></div> </body> </html>外邊距margin合并問題
相鄰塊元素垂直外邊距的合并
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>外邊距合并-相鄰塊級元素垂直外邊距合并</title><style>.damao, .ermao {width: 200px;height: 200px;background-color: pink;}.damao {margin-bottom: 100px;}.ermao {margin-top: 200px;}</style> </head> <body><div class="damao">大毛</div><div class="ermao">二毛</div> </body> </html>嵌套塊元素垂直外邊距的塌陷
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>外邊距合并-嵌套塊級元素垂直外邊距塌陷</title><style>.father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/* border: 1px solid red; *//* border: 1px solid transparent; *//* padding: 1px; */overflow: hidden;}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}</style> </head> <body><div class="father"><div class="son"></div></div> </body> </html>用通配符選擇器*清除所有盒子的內外邊距（css必需首行代碼！）
<style>/* 這句話也是我們css 的第一行代碼 */* {margin: 0;padding: 0;} </style> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除內外邊距</title><style>/* 這句話也是我們css 的第一行代碼 */* {margin: 0;padding: 0;}span {background-color: pink;margin: 20px;}</style> </head> <body>123<ul><li>abcd</li></ul><span>行內元素盡量只設置左右的內外邊距</span> </body> </html>ps的基本操作
https://www.bilibili.com/video/BV1pE411q7FU?p=155&spm_id_from=pageDriver
綜合案例：電商網站產品模塊/小米手機展示
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>綜合案例-產品模塊</title><style>* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 179px;height: 172px;background-color: #fff;/* 讓塊級的盒子水平居中對齊 */margin: 100px auto;}.box img {/* 圖片的寬度和父親一樣寬 */width: 100%;}.review {height: 70px;font-size: 14px;/* 因為這個段落沒有 width屬性 所有 padding不會撐開盒子的寬度 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}</style> </head><body><div class="box"><img src="GIF.gif" alt=""><p class="review">快遞牛，整體不錯藍牙可以說秒連。紅米給力</p><div class="appraise">來自于 117384232 的評價</div><div class="info"><h4> <a href="#">Redmi AirDots真無線藍...</a></h4><em>|</em><span> 99.9元</span></div></div> </body></html> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #F5F5F5;font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;}.box {background-color: white;width: 235px;height: 300px;margin: 100px auto;text-align: center;}.box img {width: 160px;height: 160px;}.title {margin: 0 10px 2px;font-size: 14px;font-weight: 400;}.desc {margin: 0 10px 10px;height: 18px;font-size: 12px;color: #b0b0b0;}.price {margin: 0 10px 14px;color: #ff6700;}</style> </head><body><div class="box"><img src="xiaomi.jpg" alt=""><h3 class="title">小米10S</h3><p class="desc">驍龍870 | 對稱式雙揚立體聲</p><p class="price"><span class="num">3299</span>元<span>起</span></p></div> </body></html>
盒子模型總結
1、布局為啥用不同盒子？
2、為什么用那么多類名？
3、到底用margin還是padding？（視情況不同而用）
4、自己做不知如何敲代碼？
案例：品優購快報（如何去掉無序列表ul里li前面的點list-style: none;）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>新聞快報模塊</title><style>* {margin: 0;padding: 0;}li {/* 去掉li前面的小圓點 */list-style: none;}.box {width: 248px;height: 163px;border: 1px solid #ccc;margin: 100px auto;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}.box ul li a {font-size: 12px;color: #666;text-decoration: none;}.box ul li a:hover {text-decoration: underline;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;}.box ul {margin-top: 7px;}</style> </head><body><div class="box"><h3>品優購快報</h3><ul><li><a href="#">【特惠】爆款耳機5折秒！</a></li><li><a href="#">【特惠】母親節，健康好禮低至5折！</a></li><li><a href="#">【特惠】爆款耳機5折秒！</a></li><li><a href="#">【特惠】9.9元洗100張照片！</a></li><li><a href="#">【特惠】長虹智能空調立省1000</a></li></ul></div> </body></html>圓角邊框border-radius
盒子陰影box-shadow
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子陰影</title><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* box-shadow: 10px 10px; */}div:hover {box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);}/* 原先盒子沒有影子,當我們鼠標經過盒子就添加陰影效果 */</style> </head><body><div></div> </body></html>
文字陰影 text-shadow
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文字陰影</title><style>div {font-size: 50px;color: orangered;font-weight: 700;text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);}</style> </head><body><div>你是陰影,我是火影</div> </body></html>總結
以上是生活随笔為你收集整理的web前端入门学习 css（4）（盒子模型）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： web前端入门学习 css（8）（新增语
- 下一篇： css设置元素的宽高为整数，为什么有的浏