首页 > 网站 > WEB开发 > 正文

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:  颜色 图片 重复程度 图片定位*/


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表