盒子模型

最新推荐文章于 2020-08-26 00:14:28 发布

迪仙女

最新推荐文章于 2020-08-26 00:14:28 发布

阅读量122

点赞数

分类专栏： html+css+js学习

本文链接：https://blog.csdn.net/m0_48270515/article/details/108093403

版权

html+css+js学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

盒子模型及案例

在这里插入图片描述
padding:加上内边距Padding其实是撑开盒子

div {
height:20px;
width:20px;
padding-left:10px;
}

这里的height 和width才是盒子内容的大小

盒子大小由margin+border+padding+contend决定

防止margin border padding把盒子撑开，添加 box-sizing: border-box;

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }
      li {
          list-style: none;
      }
      .box {
          width: 248px;
          height: 163px;
         border: 1px solid #cccccc;
         margin: 100px auto;
          
      }
      a {
          text-decoration: none;
          color: grey;
          font-size: 12px;
      }
     h3 {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        font-weight: 400;
        border-bottom: 1px dotted #cccccc;
        padding-left: 15px;
      }
      li {
          height: 23px;
          line-height: 23px;
          padding-left: 20px;
      }
      a:hover{
          text-decoration: underline;
      }
  </style>
</head>
<body>
    <div class="box">
   <h3>品优购快报</h3>
   <ul>
    <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
    <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
    <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
    <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
    <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
   </ul>
    </div>
</body>
</html>

文字居中：line-height和height值设置一样
要设置border首先盒子得有width height
盒子垂直居中： margin: 100px auto;

迪仙女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

盒子模型及案例案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫

专栏目录