Day_6.(3)

2024-04-27 15:09:14

字體：大中小

來源：轉載

供稿：網友

知識點七、字間距：letter-spacing。letter-spacing 屬性增加或減少字符間的空白（字符間距）。該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄，指定長度值時，會調整字母之間通常的間隔。因此，normal 就相當于值為 0。

<style>
p span{letter-spacing: 20px;}/*字間距*/
</style>
<p> 一些年之后，我要跟你去山下人跡稀少的小鎮生活。<span>清晨爬到高山巔頂</span>
</p>
知識點八、外邊距：margin。margin 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有 1 到 4 個值。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0;padding: 0;}
div.box{
width: 800px;
height: 500px;
background: red;
/*解決塌陷現象的方法如下：*/
/*1、position: absolute;*/
/*2、overflow: hidden;*/
/*3、float: left;*/
/*4、border:1px solid transparen（透明色）;*/
/*5、padding: 1px;*/
}
div p{
width: 300px;
height: 300px;
background: green;
/*上右下左*/
/*margin:20px 25px;當只有兩個值，第一個代表x軸，第二個代表y軸*/
/*margin:20px 30px 40px;上左右下
當只有三個值，順數過里啊，被省略掉的跟剩下的一方相等。*/
/*margin:20px;當只有一個值，則代表四個方向共同采用一個值*/
/*margin:0 0 0 50px;4個值的寫法*/
/*margin-left: 50px;單個方向的寫法*/
margin-top: 20px;
/*margin-left: 30px;
margin-bottom: 40px;
margin-right: 30px;*/
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
</html>
知識點九、隱藏溢出內容：overflow:hidden。
比如：
<div style="width:300px;overflow:hidden" id=1>
<div id=2></div>
<div>
當ID=2的這個DIV高度設定的寬度超過了300px，那么超出的部分將自動被隱藏。
知識點十、背景：background。背景的屬性有很多，下面將列舉一些常用的背景屬性：
（在設置背景圖片的時候，建議同時設置背景顏色，以免圖片加載失敗時，網頁內容與默認背景色重合，造出視覺錯誤）background-image: url("../img/01.jpg");//背景圖片background-position: center center;//背景位置，xy軸居中background-repeat: no-repeat;//背景圖片是否平鋪，不平鋪background-size:80%;//背景圖片的比例background-color: pink;//背景顏色：粉色
/*background連寫的方法：
background: black url("../img/01.jpg") no-repeat 0 0;background: 顏色圖片重復程度圖片定位*/