前端初步預習（六）------盒子模型之border
盒子模型之border
邊框相關屬性
border-width 控制邊框的大小 用長度賦值
border-style 控制邊框的樣式 none 沒有邊框 solid 實線 dotted 點線 dashed 虛線 double 雙線條
border-color 控制邊框的顏色 四種顏色表示法
border-top 控制上邊框的樣式
border-right 控制右邊框的樣式
border-bottom 控制下邊框的樣式
border-left 控制左邊框的樣式
其實四條邊也是復合屬性：
border-top可以分成這麽幾個屬性：
邊框連寫
理論上：沒有順序，皆可省略
案例：表格邊框、四彩盒子、表單邊框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> table { width: 800px; height: 300px; border: 1px solid #000; border-collapse: collapse;/*去掉邊框：細線*/ } th,td { border: 1px solid #000; } </style> </head> <body> <table> <caption><h3>今日小說排行榜</h3></caption> <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="img/up.jpg" width="13" height="11" /></td> <td >65589</td> <td >45</td> <td ><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td> </tr> <tr> <td>2</td> <td>盜墓筆記</td> <td><img src="img/down.jpg" width="13" height="11" /></td> <td>1</td> <td>456</td> <td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td> </tr> </tbody> </table> </body> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 500px; height: 500px; background-color: #999; border-top: 10px solid red; border-right: 15px dashed blue; border-bottom: 20px dotted yellow; border-left: 25px double green; } </style> </head> <body><!-- 四彩盒子 -->
<div></div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style type="text/css"> input{ width:150px; height:18px; outline-style:none; /*取消藍色邊框*/ } .username{ border:1px dashed #ccc; background-color:#E7EEFE; color:blue; } .username:focus{ /*獲得焦點的狀態*/ border:1px dashed pink; background-color:#FFF7FB; color:pink; } .email{ border:0 none; border-bottom:1px dashed red; } .search{ border:1px solid #ccc; color:#ccc; background:url(search.png) no-repeat right center; } </style> </head> <body> 用戶名: <input type="text" class="username" /><br /> <br /> 郵 箱: <input type="text" class="email"/><br /> <br /> <label for="txt">搜索一下</label>: <input type="text" id="txt" class="search" value="請輸入..." /> </body> </html>
盒子模型之padding
內邊距：控制內容和邊框之間的距離
padding屬性和padding連寫
padding-top 上內邊距 padding-right 右內邊距 padding-bottom 下內邊距 padding-left 左內邊距
四種連寫
1 只寫一個值 padding : 10px; 代表四個方向都是第一個數字
2 寫兩個 padding : 10px 20px; 表示：上下內邊距等於第一個數字，左右內邊距等於第二個數字
3 寫三個 padding: 10px 20px 30px; 表示：上內邊距=第一個數字，左右內邊距等於第二個數字，下內邊距等於第三個數字
4 寫四個 padding: 10px 20px 30px 40px; 表示：上右下左分別對應各個數字
padding和border對盒子的影響
設置padding和border會對盒子的實際大小造成影響
盒子的實際寬度 = 設置在css裏的寬度 + 水平的paddding + 水平的border
盒子的實際高度 = 設置的高度 + 垂直的padding + 垂直的border
但是是要註意：
如果是存在父子關系的時候
如果子盒子沒有設置寬度，並且子盒子的padding+border沒有超過父盒子的寬度，子盒子的寬度是不會改變的
如果子盒子的padding+border超過父盒子的寬度，會被padding和border撐開寬度
案例：
padding的作用、padding計算題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border: 1px solid #000; width: 500px; height: 500px; padding: 10px; } </style> </head> <body> <div> 我是盒子中的內容 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*問題：大盒子寬為500px，高為300px， 在大盒子正中心有一個小盒子 小盒子寬為300px，高為150px， 請用padding將結構寫出來 */ .father { width: 300px; height: 150px; padding: 75px 100px; background-color: red; } .son { width: 300px; height: 150px; background-color: green; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
盒子模型之margin
外邊距屬性和外邊距連寫
margin-top 控制盒子的上外邊距
margin-right 控制盒子的右外邊距
margin-bottom 控制盒子的下外邊距
margin-left 控制盒子的左外邊距
margin的連寫和padding是一樣的
垂直塌陷(合並)現象
當兩個盒子垂直分布，同時給兩個盒子設置了相對的margin值，兩個盒子之間的實際距離，取決於連個margin值中的最大
包含塌陷(合並)現象
當給子盒子設置margin-top的時候，有可能會把父盒子一起帶跑
如何解決：
1 、給父盒子設置邊框
2、給父盒子設置overflow：hidden
案例：列表顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul{ list-style:none; } ul li{ background:url(li.gif) no-repeat left 4px; padding-left: 25px; } li a{ text-decoration: none; } a:hover{ color: #9E7878; text-decoration: underline; } </style> </head> <body> <ul> <li><a href="#">大明星:姜潮魔性拜年道晚安</a></li> <li><a href="#">軟萌正太徐浩演繹《小幸運》</a></li> <li><a href="#">漫威絕逼好看的電影鏡頭合集</a></li> <li><a href="#">從沒見過這麽搞笑的祖孫組合</a></li> <li><a href="#">史上最容易挨揍的自助餐吃法</a></li> </ul> </body> </html>
給行內元素設置margin和padding的問題
給行內元素設置margin-top和margin-bottom沒有效果
給行內元素設置垂直padding的時候，能夠增加高度，位置不會依賴於padding撐開的位置
以後給行內元素控制位置，不要用垂直的padding和margin
我們通常使用行高控制行內元素的垂直位置
margin：0 auto；的秘密
margin-left和maring-right同時是auto的時候，會讓子元素（塊級）居中顯示
能將設置了寬度的塊級元素相對於其父元素水平居中
通常會使用它來將頁面的版心居中
將行內元素和行內塊級元素居中
給容器設置text-align：center
前端初步預習（六）------盒子模型之border