盒子模型之CSS3學習--邊框(Border)

時間 2020-06-03

標籤盒子模型 css3 css 學習邊框 border 欄目 CSS 简体版

原文原文鏈接

盒子模型之bordercss

　　邊框相關屬性html

　　border-width 控制邊框的大小　　用長度賦值web

　　border-style 控制邊框的樣式　　none 沒有邊框　　solid 實線　　dotted 點線　　dashed 虛線　　double 雙線條ui

　　border-color 控制邊框的顏色　　四種顏色表示法url

　　border-top 控制上邊框的樣式　　spa

　　border-right 控制右邊框的樣式　　code

　　border-bottom 控制下邊框的樣式　　xml

　　border-left 控制左邊框的樣式htm

　　其實四條邊也是複合屬性：blog

　　border-top能夠分紅這麼幾個屬性：border-top-color　　border-top-width　　border-top-style　　（剩下三條邊以此類推）

　　邊框連寫

　　理論上：沒有順序，皆可省略

　　案例：表格邊框、四彩盒子、表單邊框

<!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>&nbsp;<a href="#">圖片</a>&nbsp;<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>&nbsp;<a href="#">圖片</a>&nbsp;<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 、給父盒子設置邊框

　　二、給父盒子設置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>