1、高度和宽度
<style>
.c1{
height: 300px;
}
.c2{
width: 10px;
}
</style>
- 宽度支持百分比，高度不支持百分比
- 高度和宽度对行内标签（span）默认无效
2、块级和行内标签
- 块级标签
- 行内标签
- CSS样式：可以将标签-->display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
display:inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="display: inline">nihaoya</div>
<span class ="c1">你好</span>
<span style="display: block">你好</span>
</body>
</html>
- 块级、块级&行内使用比较多
3、字体和颜色
- rgb颜色表
<style>
.c1{
color:rebeccapurple;
/*字体大小*/
font-size: 58px;
/*加粗*/
font-weight: 100;
/*字体*/
font-family:"fangsong";
}
</style>
4、文字对齐方式
<style>
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
/*水平方向居中*/
text-align: center;
/*垂直方向剧中*/
line-height: 59px;
}
</style>
5、浮动
<span>左边</span>
<!-- 飘到右边 -->
<span style="float: right">右边</span>
- div默认为块级标签，浮动起来会没那么霸道
- 标签浮动起来，会脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
float:left;
width: 100px;
height: 100px;
border:1px solid red;
}
</style>
</head>
<body>
<!--设置背景颜色-->
<div style="background-color: cornflowerblue">
<div class = "c1">你好</div>
<!-- 不让块级标签覆盖背景颜色 -->
<div style="clear: both;"></div>
</div>
</body>
</html>
效果展示：
6、内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 100px;
height: 100px;
border:1px solid red;
/*内边距：div内部空出来多少*/
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding: 20px;#上下左右都是20
padding: 20px 10px 5px 20px;#按照上右下左顺序
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: cornflowerblue">你好啊</div>
<div>小朋友</div>
</div>
</body>
</html>
效果展示：
7、外边距
<body>
<div style="height: 200px;background-color: cornflowerblue"></div>
<div style="background-color: rebeccapurple;height: 100px;margin-top: 10px"></div>
</body>