1.width 设置宽度
2.height 设置高度
取值：像素、百分比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:100px; /*取值：像素、百分比*/
/* width:10% */
height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>
3.min-height 设置最小高度
注意：
最小高度属性，当前的高度如果没有达到最小高度，那么高度将设置为最小高度的值
当前的高度如果超出最小高度，那么高度将随之变化
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:100px;
/* width:10% */
min-height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="first">
文件检查你的考试时间的
时刻快速查看进程换积分兑
换v积分v的男的女的合法化
的的风景
</div>
</body>
</html>
4.max-height 设置最大高度
注意：
最大高度属性，允许当前元素根据内容自动减小高度，
但是如果达到最大高度值，将不再增加高度。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:100px;
/* width:10% */
max-height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="first">
文件检查景
</div>
</body>
</html>
border:边框简写属性，可以同时设置四条边的边框样式、宽度、颜色
border-top 设置顶部边框的样式、宽度、颜色 border-left 设置左侧边框的样式、宽度、颜色 border-right 设置右侧边框的样式、宽度、颜色 border-bottom 设置底部边框的样式、宽度、颜色 记住：宽度 1px \ 样式 solid \ 颜色<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:100px;
/* width:10% */
height:100px;
border-top:3px solid red;
border-left:3px solid green;
border-bottom:3px solid goldenrod;
border-right:3px solid blue;
}
</style>
</head>
<body>
<div class="first">
文件检查景
</div>
</body>
</html>
字体属性
1.color 设置字体颜色
颜色取值：
英文单词
六位的十六进制
rgb(红色，绿色，蓝色)
rgba(红色，绿色，蓝色，透明度) a代表透明度，透明度的取值：0~1之间，1表示不透明，0表示完全透明。
注意：在设置字体颜色时，尽量要找到里字体标签最近的一个标签进行设置(尤其是a标签)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{
/* color:red; */
/* color:#FFB6C1; */
/* color:rgb(0,200,0); */
color:rgba(200,20,0,0.5);
}
</style>
</head>
<body>
<p>hhhhhhhhh</p>
<p>ddsdsdsdsd</p>
</body>
</html>
2.font-style 设置字体样式
取值：normal 默认值
italic 斜体
3.font-family 用于设置字体的族科
注意：页面中该属性设置的字体必须存在于客户端电脑中才可以使用。
列子:
font-family:“黑体”,“楷体”；
4.font-size 设置字体的大小
常用单位
px 像素 屏幕中的一个点就是一像素。
em 一个汉字的大小
ex 就是一个x字符的大小
5.font-weight 设置字体的粗细
normal 默认值
bold 定义粗体字符
bolder 定义特殊体
lighter 定义更细的字体
number :100 ~ 900 其中效果：600以上变粗体
6.font-variant 设置字体为小型的大写字母
取值：
normal 默认值
small-caps 将小写字母变为大写字母（小字体类型）
7.font 字体样式简写属性：
需要注意，该属性使用时，值具有顺序关系，必须依照顺序关系来写，不存在的可以省略。
font:字体样式|小型大写字母|字体的粗细|（字体大小/行高）|字体族科
8.opacity 设置颜色的透明度
取值为0~1之间的小数：0透明 ，1不透明。
<style>
p{
color:green;
opacity:0.5;
}
</style>
9.overflow 设置内容超出元素宽高时的显示方式
（当一直输入一个字母时，电脑会认为这是一个单词）
（当输入文字时，会自动换行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:100px;
height:100px;
border:1px solid red;
}
.two{
width:100px;
height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="first">
szfjndjdxcnvvkskdkdsjdsdscndvfhreuggruehfdaj
</div>
<div class="two">击杀成本策划的是打电
话你是八十度那是曾经a等等速度大大伟大我
的娃大大生的伟大获得就是撒旦撒旦我i单位
时代的</div>
</body>
</html>
overflow 设置内容超出元素宽高时的显示方式
取值：
hidden 隐藏
<style>
.first{
width:100px;
height:100px;
border:1px solid red;
overflow:hidden;
}
.two{
width:100px;
height:100px;
border:1px solid red;
overflow:hidden;
}
</style>
auto 自动（根据内容需要自动添加横向、纵向滚动条）
<style>
.first{
width:100px;
height:100px;
border:1px solid red;
overflow:auto;
}
.two{
width:100px;
height:100px;
border:1px solid red;
overflow:auto;
}
</style>
scroll 滚动条（不管需不需要，横纵滚动条都添加）
<style>
.first{
width:100px;
height:100px;
border:1px solid red;
overflow:scroll;
}
.two{
width:100px;
height:100px;
border:1px solid red;
overflow:scroll;
}
</style>
visible 显示
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:100px;
height:100px;
border:1px solid red;
overflow:hidden;
}
.first:hover{
overflow:visible;
}
</style>
</head>
<body>
<div class="first">
szfjndjdxcnvvkskdkdsjdsdscndvfhreuggruehfdaj
</div>
</body>
</html>
当鼠标放在第一个方格上，被隐藏的内容显示
10.text-overflow:让溢出的文本以省略号显示（用之前先把超出部分隐藏）
ellipsis 用省略修建文本
clip 修建文本
11.white-space:设置或者检索对象内空格的处理方式
取值：
normal:默认的处理方式
pre：报错HTML源代码的空格与换行。等同于pre标签（输入的样子就是输出的样子）
nowrap：强制文本在一行，除非遇到br标签才换行
pre-wrap：同pre属性，但是遇到超出容器范围的时候会自动换行
pre-line：同pre属性，遇到连续空格会被看错一个空格解释
12.word-spacing:设置单词的词间距(对中文无效 了解)
单词和单词之间的距离
13.letter-spacing:设置字母之间的距离(一个汉字就是一个字母)
text相关设置
1.text-align:设置元素内容的水平对齐方式 取值：lfet 居左 center 居中 right居右2.text-decoration:设置文本修饰
underline下划线
line-through:删除线
overline上划线
none 取消样式
3.text-transform 设置对象中的文本的大小写。
默认值 none
capitalize 每个单词的第一个字母转换大写
uppercase 全部转换成大写
lowercase 全部转换成小写
4.text-indent:设置首行缩进
常用取值：em
5.word-wrap 设置或检索当内容超过指定容器的边界时是否断行
取值:
normal:允许内容丁凯或溢出指定的容器边界(默认效果)
break-word 内容将在边界内换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:100px;
height:100px;
border:1px solid red;
/*word-wrap:normal; 可以超出范围(默认状态）*/
word-wrap:break-word; 到达边界换行
}
</style>
</head>
<body>
<div class="first">
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
6.vertical-align 设置对象内容的垂直对齐方式
是容器中元素相对于内容的显示
7.line-height 设置单行文本的行高 (一行的高度)
取值：设置像素值
设置number 设置的number与字体的大小相乘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:100px;
height:100px;
font-size:20px;
border:1px solid red;
line-height:100px;
/*line-height:3; */设置行高为当前字体大小的三倍
}
</style>
</head>
<body>
<div class="first">
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
4.背景属性
1.background-color 设置背景颜色
颜色的取值：
英文单词
六位的十六进制
rgb()
rbga()
hsl() 色相 饱和度 亮度
hsla() 色相 饱和度 亮度 透明度
2.background-image 设置背景图片
background-image:url(图片地址)（默认 水平方向和垂直方向都重复）
<style>
.first{
width:600px;
height:600px;
border:1px solid red;
background-image:url(./img/b.jpg)
}
</style>
3.background-repeat 设置背景图片是否重复
repeat-x 水平方向重复
repeat-y 垂直方向重复
repeat 默认 水平方向和垂直方向都重复
no-repeat 不重复
4.background-position 设置背景图片的位置
格式：background-position:水平位置和垂直位置(一个值)
格式：background-position:水平位置 垂直位置
水平和垂直位置的取值
英文单词：left,center,right/top,center,bottom
长度单位：只要是长度单位即可。常用像素。
注意：如果设置为负数，水平方向表示向左移动，垂直方向表示向上移动
小作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
width:300px;
height:300px;
border:1px solid red;
}
.two{
width:100px;
height:100px;
}
.two:nth-child(1){
/* background-color:yellow; */
float:left;
background :url(img/446475-20160414102623691-66339570.jpg) no-repeat -12px -8px;
}
.two:nth-child(2){
/* background-color:blue; */
float:left;
background :url(img/446475-20160414102623691-66339570.jpg) no-repeat -120px -8px;
}
.two:nth-child(3){
background-color:green;
background-image: url(img/446475-20160414102623691-66339570.jpg);
background-repeat: no-repeat;
background-position: -230px -8px;
float:left;
}
.two:nth-child(4){
background-color:pink;
float:left;
background-image: url(./img/446475-20160414102623691-66339570.jpg);
background-position: -340px -8px;
}
.two:nth-child(5){
background-color:white;
background-image: url(img/446475-20160414102623691-66339570.jpg);
background-position: -450px -8px;
float:left;
}
.two:nth-child(6){
background-color:gold;
background-image: url(img/446475-20160414102623691-66339570.jpg);
background-position: -560px -8px;
float:left;
}
.two:nth-child(7){
background-color:purple;
background-image: url(img/446475-20160414102623691-66339570.jpg);
background-position: -670px -8px;
float:left;
}
.two:nth-child(8){
background-color:brown;
background-repeat: no-repeat;
background-image: url(img/446475-20160414102623691-66339570.jpg);
background-position: -780px -8px;
float:left;
}
.two:nth-child(9){
background-color:navy;
background-repeat: no-repeat;
background-image: url(img/446475-20160414102623691-66339570.jpg);
background-position: -890px -8px;
float:left;
}
</style>
</head>
<body>
<div class="first">
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</div>
</body>
</html>
5.background-size:设置背景图片大小
格式：background-size:宽度 高度
宽度和高度的取值：
像素px：如果设置为一个值，那么第二个值为auto
以父元素百分比%来设置背景图宽度和高度，如果设置为一个值，那么第二个值为auto
div{
width:600px;
height:600px;
border:1px solid red;
background-image:url(b.jpg);
background-repeat:no-repeat;
background-size:300px 300px;
宽度 高度
/*background-size:300px auto;*/
}
cover 把图像扩展足够大，使背景图片完全覆盖背景区域。(强制拉伸)
<style>
div{
width:600px;
height:700px;
border:1px solid red;
background-image:url(b.jpg);
background-repeat:no-repeat;
background-size:cover;
把图片拉伸到和框一样大
</style>
contain 把图像扩至最大的尺寸，以使其宽度和高度完全使用内容区域(等比例)
<style>
div{
width:600px;
height:700px;
border:1px solid red;
background-image:url(b.jpg);
background-repeat:no-repeat;
background-size:contain;
把图片拉伸到框的最大等比例
</style>
6.background-attachment 设置背景图片是否随默认滚动而滚动
fixed 绑定窗口 图片不随页面的滚动而滚动
scroll 背景图片随着滚动而滚动(默认值)
<style>
div{
width:800px;
height:900px;
border:1px solid red;
background-image:url(b.jpg);
background-attachment: fixed;
background-repeat:no-repeat;
</style>
7.background 简写属性，推荐使用。没有顺序关系。
### 5. 列表属性
```html
1.list-style-type:设定列表的符号样式(固定样式)
2.list-style-image:url() 设定指定的图片来代替列表序号
可以设置有序列表的序号list-style-image:url("图片地址")
3.list-style-position:设置列表符号需要的位置
inside 需要再内容中（把列表符号和内容连在一起，变成一体的）
outside 需要再内容外。（把列表符号和内容分开，变成俩个）
4.list-style 列表属性的简写属性。
list-style:none(把列表前面的序号去掉)
小作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first1{
width:50%;
height:100px;
border:1px solid #000080;
list-style:none;
text-align:center;
line-height:100px;
font-size:30px;
color:palevioletred;
font-weight:bold;
border:none;
border-bottom:2px solid black;
}
ol li:not(.first1){
text-align:left;
line-height:40px;
font-size:20px;
color:green;
border:none;
width:50%;
height:40px;
border-bottom:1px solid pink;
list-style-image:url(img/aaaa.png);
list-style-position:inside;
}
</style>
</head>
<body>
<ol>
<li class="first1">学习猿地</li>
<li>键盘敲烂，工资过万</li>
<li>好好学习，天天向上</li>
</ol>
</body>
</html>
