1、文本属性
text-transform 描述:大小写 值:capitalize 每个单词首字母大写
lowercase 所有字母转为小写
uppercase 所有字母转为大写
none
常用字体:
2、列表属性
3、背景属性
4、背景图片大小
background-size
取值:1、数字px 数字px
2、数字% 数字%
3、cover:把背景图像扩展至足够大,以使背景图片覆盖背景区域,也许无法全部显示在背景定位区域中
4、contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。铺不满盒子,留白。
5、背景的复合属性
复合写法:
1、用空格隔开
2、顺序可以换
3、可以只取一个值,放在后面能覆盖前面的值
background:yellow yrl(img/1.jpg) no-repeat center fixed;
background-size属性只能单独用
注意center和top位置不能随意换
6、浮动属性
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.red{
background-color: red;
float: left;
}
.green{
background-color: green;
float: left;
}
.blue{
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>
效果:
6、清浮动
1、写固定高度
2、清浮动 clear:none、left、right、both
3、当前浮动元素后面补一个盒子,不设置宽高,clear:both
4、overflow:hidden ,让浮动元素计算高度