<style>
.box{
width: 600px;
height: 800px;
background-color: rgb(235, 233, 233);
}
.title{
width: 580px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #fff;
border: 10px solid rgb(235, 233, 233);
}
.content{
width: 578px;
background-color: red;
margin-left: 10px;
padding: 1px;
display: flex;
}
.content .cavs{
width: 100px;
height: 100px;
background-color: #fff;
margin: 10px;
}
.menu{
width: 570px;
background-color: #fff;
border: 10px solid rgb(235, 233, 233);
padding: 5px;
}
.menu ul{
margin:0 15px;
list-style-type:none;
padding-left:0px
}
.menu ul li{
line-height: 38px;
border-bottom: 1px solid #ccc;
}
.ptot{
width: 580px;
background-color: yellow;
border: 10px solid rgb(235, 233, 233);
}
.ptot dl{
display: flex;
}
.ptot dl dt{
width: 80px;
background-color: violet;
margin-left: 10px;
text-align: center;
line-height: 90px;
}
</style>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="box">
<div class="title">这是一个标题，需要居中</div>
<div class="content">
<p class="cavs d">解决margin-top失效1父元素设padding</p>
<p class="cavs b">2父元素或自身display:
inline-block</p>
<p class="cavs c">3父元素overflow:
hidden</p>
<p class="cavs c">4父元素设border</p>
</div>
<div class="menu">
<ul>
<li>每天一条新闻联播</li>
<li>带来精彩内容不断</li>
<li>每天一条新闻联播</li>
<li>每天都是新的一天</li>
<li>每天一条新闻联播</li>
<li>人生没有彩排，每天都是现场直播</li>
</ul>
</div>
<div class="ptot">
<dl>
<dt>
照片
</dt>
<dd>
<p>姓名：张萌<span>性别：女</span></p>
<p>介绍：她是一个活泼爱动的小女孩，可爱又善良。</p>
</dd>
</dl>
</div>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
常见的问题：
1.margin-top失效
解决方法：
1、设置父元素或者自身的display:inline-block;
2、设置父元素的border:1px solid red; 如果不想要border显示的话，可以设置border:1px solid transprent;这样边框就是隐藏起来。
3、设置父元素的padding:1px;
4、给父元素设置overflow:hidden;
5、给父元素或者自身设置position:absolute;
6、设置父元素非空，填充一定的内容。
2.ul li 清除缩进和项目符
解决方法：
1、清除项目符和缩进：ul {list-style: none; padding-left:0px;}
2、清除缩进 ul {margin:7;list-style-type:disc;}
3、清除缩进 ul {margin-left:20px}
4、清除缩进 ul {margin-left: -24px;}
二、更换项目符漂亮小图标
下面有3种实现方法：
1、简单方法
ul{list-style-image:url(/images/icon.gif);}
这种方法不同的浏览器的显示效果会有一些差异，主要是在图片的垂直位置上。有些浏览器会使图片和列表项文本的中部位置平齐，有的又会显示得高一些，总之就是有些不一致。
2、复杂方法
ul {list-style:none;}
li{background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
可以解决上面的浏览器不兼容的问题。首先，清除默认的项目符号，然后加上我们自己的背景图片。no-repeat告诉浏览器不要平铺这张图片，0px 50%告诉背景图片应该位于距左侧0px 且竖直方向位于顶部往下50%处，实际上就是在竖直方向居中。我们在左侧加上了17px的边距，这样那些15px宽5像素高的小图标就能完全显露出来，不会被文本遮挡，并且和文本之间有一点间隔。
3、常规方法
li {background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
