溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下CSS3邊框相關的屬性有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
盒子模型之border
邊框相關屬性
border-width控制邊框的大小 用長度賦值
border-style控制邊框的樣式 none沒有邊框 solid實線 dotted點線 dashed虛線 double雙線條
border-color控制邊框的顏色 四種顏色表示法
border-top控制上邊框的樣式
border-right控制右邊框的樣式
border-bottom控制下邊框的樣式
border-left控制左邊框的樣式
其實四條邊也是復合屬性：
border-top可以分成這么幾個屬性：border-top-color border-top-width border-top-style （剩下三條邊以此類推）
邊框連寫
理論上：沒有順序，皆可省略
案例：表格邊框、四彩盒子、表單邊框
<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8">
<title>Document</title>
<style>
table{
width:800px;
height:300px;
border:1pxsolid#000;
border-collapse:collapse;/*去掉邊框：細線*/
}
th,td{
border:1pxsolid#000;
}
</style></head><body>
<table>
<caption><h4>今日小說排行榜</h4></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><imgsrc="img/up.jpg"width="13"height="11"/></td>
<td>65589</td>
<td>45</td>
<td>貼吧圖片百科</td>
</tr>
<tr>
<td>2</td>
<td>盜墓筆記</td>
<td><imgsrc="img/down.jpg"width="13"height="11"/></td>
<td>1</td>
<td>456</td>
<td>貼吧圖片百科</td>
</tr>
</tbody></table></body></html>
Document
<!--四彩盒子-->
</body></html>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title><styletype="text/css">
input{
width:150px;
height:18px;
outline-style:none;/*取消藍色邊框*/
}.username{
border:1pxdashed#ccc;
background-color:#E7EEFE;
color:blue;
}.username:focus{/*獲得焦點的狀態*/
border:1pxdashedpink;
background-color:#FFF7FB;
color:pink;
}.email{
border:0none;
border-bottom:1pxdashedred;
}.search{
border:1pxsolid#ccc;
color:#ccc;
background:url(search.png)no-repeatrightcenter;
}</style></head><body>用戶名:<inputtype="text"class="username"/><br/><br/>郵 箱:<inputtype="text"class="email"/><br/><br/><labelfor="txt">搜索一下</label>:<inputtype="text"id="txt"class="search"value="請輸入..."/></body></html>
盒子模型之padding
內邊距：控制內容和邊框之間的距離
padding屬性和padding連寫
padding-top上內邊距 padding-right右內邊距 padding-bottom下內邊距 padding-left左內邊距
四種連寫
1只寫一個值 padding:10px; 代表四個方向都是第一個數字
2寫兩個 padding:10px20px; 表示：上下內邊距等于第一個數字，左右內邊距等于第二個數字
3寫三個 padding:10px20px30px; 表示：上內邊距=第一個數字，左右內邊距等于第二個數字，下內邊距等于第三個數字
4寫四個 padding:10px20px30px40px; 表示：上右下左分別對應各個數字
padding和border對盒子的影響
設置padding和border會對盒子的實際大小造成影響
盒子的實際寬度=設置在css里的寬度+水平的paddding+水平的border
盒子的實際高度=設置的高度+垂直的padding+垂直的border
但是是要注意：
如果是存在父子關系的時候
如果子盒子沒有設置寬度，并且子盒子的padding+border沒有超過父盒子的寬度，子盒子的寬度是不會改變的
如果子盒子的padding+border超過父盒子的寬度，會被padding和border撐開寬度
案例：
padding的作用、padding計算題
<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8">
<title>Document</title>
<style>
p{
border:1pxsolid#000;
width:500px;
height:500px;
padding:10px;
}
</style></head><body>
<p>
我是盒子中的內容</p></body></html>
<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8">
<title>Document</title>
<style>
/*問題：大盒子寬為500px，高為300px，
在大盒子正中心有一個小盒子
小盒子寬為300px，高為150px，
請用padding將結構寫出來*/
.father{
width:300px;
height:150px;
padding:75px100px;
background-color:red;
}
.son{
width:300px;
height:150px;
background-color:green;
}
</style></head><body>
<pclass="father">
<pclass="son"></p>
</p></body></html>
盒子模型之margin
外邊距屬性和外邊距連寫
margin-top控制盒子的上外邊距
margin-right控制盒子的右外邊距
margin-bottom控制盒子的下外邊距
margin-left控制盒子的左外邊距
margin的連寫和padding是一樣的
垂直塌陷(合并)現象
當兩個盒子垂直分布，同時給兩個盒子設置了相對的margin值，兩個盒子之間的實際距離，取決于連個margin值中的最大
包含塌陷(合并)現象
當給子盒子設置margin-top的時候，有可能會把父盒子一起帶跑
如何解決：
1、給父盒子設置邊框
2、給父盒子設置overflow：hidden
案例：列表顯示
<!DOCTYPEhtml><htmllang="en">
<head>
<metacharset="utf-8">
<style>
ul{
list-style:none;
}
ulli{
background:url(li.gif)no-repeatleft4px;
padding-left:25px;
}
lia{
text-decoration:none;
}
a:hover{
color:#9E7878;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li>大明星:姜潮魔性拜年道晚安</li>
<li>軟萌正太徐浩演繹《小幸運》</li>
<li>漫威絕逼好看的電影鏡頭合集</li>
<li>從沒見過這么搞笑的祖孫組合</li>
<li>史上最容易挨揍的自助餐吃法</li>
</ul>
</body></html>
給行內元素設置margin和padding的問題
給行內元素設置margin-top和margin-bottom沒有效果
給行內元素設置垂直padding的時候，能夠增加高度，位置不會依賴于padding撐開的位置
以后給行內元素控制位置，不要用垂直的padding和margin
我們通常使用行高控制行內元素的垂直位置
margin：0auto；的秘密
margin-left和maring-right同時是auto的時候，會讓子元素（塊級）居中顯示
能將設置了寬度的塊級元素相對于其父元素水平居中
通常會使用它來將頁面的版心居中
將行內元素和行內塊級元素居中
給容器設置text-align：center
以上就是“CSS3邊框相關的屬性有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
