html排版，样式

<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;}