HTML+CSS基礎知識個人筆記_4
阿新 • • 發佈：2018-12-02
HTML+CSS基礎知識個人筆記_4
1. CSS背景設定
background： :background-color || background-image || background-repeat || background-attachment || background-position
注意使用方位值和具體數值時的區別！！！（見下列程式碼）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>11_背景.html</title> <style> /*body { background-color: pink; background-image: url(images/test.png);*/ /*repeat : 背景影象在縱向和橫向上平鋪 default no-repeat : 背景影象不平鋪 repeat-x : 背景影象在橫向上平鋪 repeat-y : 背景影象在縱向平鋪 */ /*background-repeat: no-repeat;*/ /*background-repeat: repeat-x;*/ /*}*/ div { width: 260px; height: 146px; background-color: pink; background-image: url(images/test.png); background-repeat: no-repeat; /*background-position |(0, 0)----------->x | | | -- y*/ /*background-position: x y;*/ /*1.引數可以是方位值，center left right top bottom*/ /*background-position: right bottom;*/ /*2.方位值設定時，x y可互換*/ /*background-position: bottom right;*/ /*3.當只填寫一個方位值時，另一個預設居中*/ /*background-position: left;*/ /*background-position: top;*/ /*4.當x y 為具體的值(px)時，順序不能反轉！先x 後y，可以為負值*/ /*錯誤！right為x的值，沒有效果*/ /*background-position: 10px right;*/ /*正確*/ /*background-position: 10px top;*/ /*水平居中，y方向10px*/ /*background-position: center 10px;*/ } /*.sec { background-color:green; }*/ </style> </head> <body> <div> </div> <!-- <div class="sec"></div> --> </body> </html>
背景簡寫：
背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
建議簡寫位置，不是規定，不同於font：font-style font-variant font-weight font-size/line-height font-family;(font-size 和 font-family 必填)
background: #000 url(images/ms.jpg) no-repeat scroll center top;
1.1 背景半透明
CSS3中增設了透明度設定，大部分主流瀏覽器支援。
/*background-color: #000;*/ /*rgba red green blue alpha(0.3 .3 30%)*/ background-color: rgba( 0, 0, 0, .3 );
2. 盒子模型
2.1 邊框-border
邊框寫一個：上下左右
邊框寫兩個：上下 左右
邊框寫三個：上 左右 下
邊框寫四個：上 右 下 左 （順時針）
邊框簡寫：
boder: 1px solid red;
div {
width: 300px;
height: 300px;
/*border-width, border-style, border-color 寫一個 寫兩個 寫三個 寫四個 和
padding中一樣*/
border-width: 1px;
/*border-style: dashed;*/
/*border-style: none;*/
/*border-style: dotted;*/
/*border-style: solid;*/
/*none 和 hidden 暫先不管*/
/*border-style: none;*/
/*border-color: #000;*/
/*建議簡寫順序*/
border: 1px solid red;
/*可以單獨設定*/
border-top: 2px dashed black;
border-bottom: 3px solid green;
border-left: 4px dotted pink;
border-right: 5px double orange;
}
2.1.1 邊框問題
邊框會撐開盒子！！！
在設定了width和height的盒子裡，在設定border後，要重新計算width和height
見2.4
2.1.2 表格細線邊框
設定表格和單元格的collapse屬性為collapse，即摺疊，變為一根線
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17_表格細線邊框.html</title>
<style>
table {
border: 1px solid red;
width: 500px;
height: 500px;
}
td {
border: 1px solid red;
text-align: center;
}
table,
td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>ABC</td>
<td>ABC</td>
<td>ABC</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>
</body>
</html>
2.2 內邊距-padding
盒子邊框與盒子內容之間的距離
2.2.1 內邊距問題
簡寫：
/*上下左右都是 20px*/
/*padding: 20px;*/
/*上下 10px 左右 20px*/
/*padding: 10px 20px*/
/*上 10px 左右 20px 下 30px*/
/*padding: 10px 20px 30px;*/
/*上 10px 右 20px 下 30px 左 40px 順時針*/
/*padding: 10px 20px 30px 40px*/
內邊距會撐開盒子！
見2.4
div {
/*為確保盒子大小還是200 * 200, 在padding後,重新計算寬高,否則會撐開!*/
width: 140px;
height: 140px;
border: 1px solid red;
padding: 20px 30px 40px;
/*padding: 20px 0px;*/
}
2.2.2 內邊距計算
div {
/*為確保盒子大小還是200 * 200, 在padding後,重新計算寬高,否則會撐開!*/
width: 140px;
height: 140px;
/*border: 1px solid red;*/
padding: 20px 30px 40px;
/*padding: 20px 0px;*/
}
2.3 外邊距-margin
盒子與盒子之間的距離
2.4 盒子小結
如上圖所示，可以看到盒子相關的引數
盒子寬度: width + padding-left + padding-right + border-left + border-right;
盒子高度: height + padding-top + padding-bottom + border-top + border-bottom;
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22_內邊距例項.html</title>
<style>
.nav {
/*盒子寬度: width + padding-left + padding-right + border-left + border-right;*/
/*盒子高度: height + padding-top + padding-bottom + border-top + border-bottom;*/
/*width: 100px;
height: 100px;
padding: 100px;*/
/*實際工作中,一般調整上和左即可!*/
/*width: 200px;
height: 200px;
padding-top: 100px;
padding-left: 100px;*/
/*還有border也會影響盒子大小,也要減去!*/
width: 180px;
height: 180px;
padding-top: 100px;
padding-left: 100px;
border: 10px solid red;
background-color: green;
}
.nav .inside {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="nav">
<div class="inside"></div>
</div>
</body>
</html>
例2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>23_綜合例項.html</title>
<style>
/*清除內外邊距,慣用手法*/
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #EEEEEE;
}
.article {
/*width: 294px;
height: 202px;*/
width: 262px;
height: 182px;
border: 1px solid #D5D5D5;
padding: 18px 15px 0px;
}
.article h4 {
font: 18px "Microsoft YaHei";
border-bottom: 1px solid #D5D5D5;
/*margin-bottom: 8px*/
}
/*清除列表樣式,就是那些小點點,慣用手法*/
li {
list-style: none;
}
.article li {
height: 28px;
line-height: 28px;
text-indent: 2em;
border-bottom: 1px dashed #DBDBDB;
}
/*或者h4 margin8px*/
.article ul {
margin-top: 8px;
}
.article a {
text-decoration: none;
color: #635F60;
font: 16px "Microsoft YaHei";
}
.article a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="article">
<h4><b>最新文章/New Articles</b></h4>
<ul>
<li><a href="#">捏造全城捕殺流浪動物等</a></li>
<li><a href="#">寧波日報報業集團</a></li>
<li><a href="#">最新！杭州:文明養犬</a></li>
<li><a href="#">百城致敬40年：改革</a></li>
<li><a href="#">浙江12名擬提拔任用<a></li>
</ul>
</div>
</body>
</html>