盒子模型基础知识点总结

三重刘德华（男人中的极品）

已于 2022-08-03 20:49:52 修改

阅读量176

点赞数 1

文章标签： html css 前端

于 2022-08-03 18:56:51 首次发布

本文链接：https://blog.csdn.net/Zyf15156243165/article/details/126146837

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        /* 去除默认样式 */
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        /* 写盒子最外层div */
        #wrap{
            width: 260px;
            height: 250px;
            line-height: 2.5;
            /* background-color: pink; */
        }
        h2{
            line-height: 3;
        }
        h2>a{
            font-size: 16px;
            color: #A2A2A2;
            font-weight: normal;
            /* 设置外边距 */
            margin-left: 100px; 
        }
        /* 省略号的设置 */
        ul>li{
            width: 260px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        li span:first-child{
            color: #DB6D62;
            background-color: #FBF0EE;
            /*第一种设置
             width: 48px;
            height: 32px;
            display: inline-block;
            text-align: center; */
            padding: 5px 10px;
        }
        li span:nth-child(2){
            color: #6D6D6D;
        }
    </style>
<body>
    <div id="wrap">
        <h2>京东快报
            <a href="#">更多&gt;</a>
        </h2>
        <ul>
           <li>
               <a href="#">
                   <span>推荐</span>
                   <span>范览什而己丹慧也区车未得帅，才属起事无。</span>
               </a>
           </li>
           <li>
            <a href="#">
                <span>推荐</span>
                <span>范览什而己丹慧也区车未得帅，才属起事无。</span>
            </a>
           </li>
           <li>
            <a href="#">
                <span>推荐</span>
                <span>范览什而己丹慧也区车未得帅，才属起事无。</span>
            </a>
           </li>
           <li>
            <a href="#">
                <span>推荐</span>
                <span>范览什而己丹慧也区车未得帅，才属起事无。</span>
            </a>
           </li>
        </ul>
    </div>
</body>

</html>