1、高度和宽度
html
.c1{
height: 300px;
width: 500px;
}注意事项：
- 宽度，支持百分比
- 行内标签，默认无效
- 块级标签，默认有效（即使右侧空白，也不给你占用）
块级和行内标签
css样式 标签： display: inline-block
加上这个标签后行内标签具有了块级标签的特性，可以设置宽高了
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
input[type='text']{
border: 1px solid red;
}
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 2px solid red;
}
</style>
</head>
<body>
<span class="c1">安娜</span>
<span class="c1">安娜</span>
</body>
</html>
- 块级和行内标签的转换
html
<span style="display: block;">安娜</span>
<div style="display: inline;">安娜</div>使用这个标签后行内标签具有块级标签的特性，块级标签的属性具有行内标签的属性
2、字体设置
- 颜色： 出来可以使用英文还可以使用rgb值，如：#00FF7F
- 大小
- 加粗
- 字体格式：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.c1{
color: red;
font-size: 58px;
font-weight: 400;
font-family: Microsoft Yahei;
}
</style>
</head>
<body>
<div class="c1">安娜</div>
<div style="display: inline;">安娜</div>
</body>
</html>
3、字体对齐方式
text-align: center 水平方向居中
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.c1{
color: #00FF7F;
height: 100px;
width: 300px;
border: 2px solid red;
text-align: center;
}
</style>
</head>
<body>
<div class="c1">安娜</div>
<div style="display: inline;">安娜</div>
</body>
</html>
line-height:100px 垂直方向居中，指定高度
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.c1{
color: #00FF7F;
height: 100px;
width: 300px;
border: 2px solid red;
text-align: center;
line-height:100px;
}
</style>
</head>
<body>
<div class="c1">安娜</div>
<div style="display: inline;">安娜</div>
</body>
</html>
4、浮动
本来span标签两个是挨在一起的，使用向右浮动，就会一个显示在左边一个在右边
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<span>安娜</span>
<span style="float:right">伏伦斯基</span>
</body>
</html>
div 默认是块级标签，如果浮动起来了就不一样了。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.c1{
float: left;
height: 100px;
width: 300px;
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</div>
</body>
</html>
浮动起来后，自己有多宽就占多宽。
如果让标签浮动起来后，就会脱离文档流。会使得父级div的样式无法显示，需要加上
html
<body>
<div style="background-color: blue">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div style="clear: both;"></div>
</div>
</body>5、内边距
距离自己标签内部的距离
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.outer{
height: 300px;
width: 300px;
border: 2px solid red;
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div>你的眼里都是光</div>
<div>真是那样吗</div>
</div>
</body>
</html>
如果是上下左右的内边距都是20px ,可以按下面的方法写
html
padding: 20px;按上右下左的顺时针方向的内边距大小
html
padding: 40px 30px 20px 10px;6、外边距
当前标签与其他标签的距离
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<div style="background-color:red; height:100px">你的眼里都是光</div>
<div style="border: 2px solid blue; margin-top:30px">真是那样吗</div>
</body>
</html>
7、其他注意点
- body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢?
html
body {
margin: 0
}- 内容居中
文本居中，文本会在这个区域中居中。
html
<div style="width: 200px; text-align: center;">安娜</div>区域居中，自己要有宽度+ margin- left:auto;margin-right:auto
html
. container {
width: 980px;
margin: 0 auto;
}
<div class=" container" >adfasdf</div>