知識點七、字間距: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: 顏色 圖片 重復程度 圖片定位*/
新聞熱點
疑難解答