margin: 0 auto /*可以让盒子居中*/
1、三种样式表的书写方法
（1）内嵌式写法
特点：样式只作用于当前文件，没有真正实现结构表现分离。
<head>
<style type="text/css">
样式表写法
</style>
</head>
（2）外链式写法
特点：作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
<link rel="stylesheet" href="1.css">
（3）行内样式表
特点：作用范围仅限于当前标签，范围小，结构表现混在一起。（一般不这样使用）
<p style="font-weight: 700; color: red;">青春是场盛大的宴会，它要求我们盛装出席，却在最后让我们花了妆容，湿了衣衫，红了眼眶。</p>
2、标签分类的各自显示方式
（1）块元素
典型代表:Div , h1-h6 , p , ul , li
特点：
【1】独占一行；
【2】可以设置宽高；
div{
width:200px;
height:300px;
backgroud-color:green;
}
【3】嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
/*样式表写到head中*/
<style type="text/css">
.box{
width:200px;
height:300px;
backgroud-color:green;
}
/*没有定义宽度的情况下，默认和父元素宽度一致*/
.box p{
height:100px
color:yellow;
backgroud-color:red;
}
</style>
</head>
<body>
<div class="box">
<p>如果我带着醉意出生，我或许会忘掉所有悲伤，所以我们干掉这最后一杯，有一句话我们永远也说不出来，谁有一颗玲珑剔透的心，他就会知道，何时心碎。</p>
</div>
</body>
</html>
（2）行内元素：
典型代表:span , a , strong , em , del, ins......
特点：
【1】在一行显示；
<span>今夕何夕，见此良人。</span><strong>天长地久有时尽，此恨绵绵无绝期。</strong><em>在天愿作比翼鸟，在地愿为连理枝。</em>
【2】是内容撑开的宽高，不能直接定义宽高，即使外层是块元素里面包含行内元素，也不能直接定义宽高。
/*下面语句直接定义宽高居中是无效的*/
<div><span>如果爱情只是路过，又何必到此一游。</span></div>
（3）行内块元素也叫内联元素
典型代表：input ，img
特点：
【1】在一行上显示；
【2】可以设置宽高。
3、元素之间的转换
（1）块元素转换为行内元素：display:inline;
注意：转换后无法直接定义宽高。
<style type="text/css">
div,p{
display:inline;
}
</style>
</head>
<body>
<div>走完同一条街，回到两个世界。</div>
<p>幸福始终充满着缺陷。</p>
</body>
（2）行内转换为块元素：display:block;
<style type="text/css">
div,p{
display:block;
}
</style>
</head>
<body>
<div>最初不相识，最后不相认。</div>
<p>听见某个名字，想起某些事情，这个城市安静的让人心颤。</p>
</body>
（3）块和行内元素同时转为行内块元素（重点）：display:inline-block;
<style type="text/css">
/*转换为行内块元素后就可以同时定义宽高等属性*/
div,p,span,strong{
display:inline-block;
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div>等待、是人世间最卑微的名词。</div>
<p>我们看得到繁华，却摸不到回忆.</p>
<span>该坚持的时候，却放开了你的手。</span>
<strong>谁苍白了我的等待，讽刺了我的执着。</strong>
</body>
原文地址：https://www.cnblogs.com/Automated-testing/p/9163958.html