盒子模型初了解

最新推荐文章于 2023-02-07 18:11:03 发布

YourLie_in_April

最新推荐文章于 2023-02-07 18:11:03 发布

阅读量243

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/123796047

版权

内容：content 即盒子里面的文字或者标签。

内边距：padding 即盒子边框到内容之间的距离。

边框：border 即盒子的边框。

外边距：margin 即盒子与盒子之间的距离。

border相关属性：border-width：边框的宽度、border-style：边框的样式（solid：实线、dashed：虚线、dotted：点线）、border-color：边框的颜色。（border也可进行连写，顺序可调换。）

可对四个方向边框单独编辑：border-left 左边框、border-right 右边框、border-top 上边框、border-bottom 下边框。

padding相关属性：盒子边框与内容之间的距离。（padding-top 上内边距、padding-right 右内边距、padding-bottom 下内边距、padding-left 左内边距。）

10px：上下左右为10、

10px 20px：上下为10，左右为20、

10px 20px 30px：上为10，左右为20，下为30、

10px 20px 30px 40px：上为10，右为20，下为30，左为40。

margin相关属性：盒子与盒子之间的距离。（margin-top 上外边距、margin-right 右外边距、margin-bottom 下外边距、margin-left 左外边距。）（属性值多写代表方向与padding相同。）

示例1：

<!DOCTYPE html>
<html>
<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>畅销书排行榜</title>
    <style>
    .title {
  width: 300px;
  height: 30px;
  font-size: 16px;
  font-weight: 700;
  color: #e8f3cb;
  line-height: 30px;
  text-indent: 16px;
  background: #518600 url(./素材/image/bang.gif) no-repeat 100px 50%;
}
.qun {
  width: 300px;
  height: 330px;
  background-color: #f9fad8;
}
ul {
  width: 260px;
  height: 300px;
  background-color: #f9fad8;
  background-image: linear-gradient(#f9fad8, white);
}
li {
  width: 260px;
  height: 26px;
  font-weight: 700;
  line-height: 26px;
  list-style-position: inside;
}
a:link {
  color: #4773a3;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.yi {
  list-style-image: url(./素材/image/book_no01.gif);
}
.er {
  list-style-image: url(./素材/image/book_no02.gif);
}
.san {
  list-style-image: url(./素材/image/book_no03.gif);
}
.si {
  list-style-image: url(./素材/image/book_no04.gif);
}
.wu {
  list-style-image: url(./素材/image/book_no05.gif);
}
.liu {
  list-style-image: url(./素材/image/book_no06.gif);
}
.qi {
  list-style-image: url(./素材/image/book_no07.gif);
}
.ba {
  list-style-image: url(./素材/image/book_no08.gif);
}
.jiu {
  list-style-image: url(./素材/image/book_no09.gif);
}
.shi {
  list-style-image: url(./素材/image/book_no10.gif);
}
    </style>
</head>
<body>
    <div class="qun">
        <div class="title">畅销书排行</div>
        <ul>
            <li class="yi"><a href="#">不抱怨的世界</a></li>
            <li class="er"><a href="#">遇见未知的自己</a></li>
            <li class="san"><a href="#">活法</a></li>
            <li class="si"><a href="#">高效能人士的七个习惯</a></li>
            <li class="wu"><a href="#">被迫强大</a></li>
            <li class="liu"><a href="#">遇见心想事成的自己</a></li>
            <li class="qi"><a href="#">世界上最伟大的推销员</a></li>
            <li class="ba"><a href="#">我的成功可以复制</a></li>
            <li class="jiu"><a href="#">少有人走的路</a></li>
            <li class="shi"><a href="#">活出全新的自己</a></li>
        </ul>
    </div>
</body>
</html>

示例2：

<!DOCTYPE html>
<html>
<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>商品分类</title>
    <style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #d5d5d5;
}
div {
  width: 250px;
  height: 550px;
  background-color: white;
}
.title {
  width: 200xp;
  height: 40px;
  background-color: #000000;
  color: white;
  line-height: 40px;
  text-indent: 16px;
}
dt {
  width: 200px;
  height: 36px;
  font-family: 宋体;
  font-weight: 700;
  padding-left: 26px;
}
dd {
  width: 225px;
  font-size: 10px;
  font-family: 宋体;
  padding-left: 26px;
  border-bottom: 1px dashed;
}
.hf {
  background-image: url(./素材/image/icon_01.gif);
  background-repeat: no-repeat;
  line-height: 36px;
}
.cz {
  background-image: url(./素材/image/icon_02.gif);
  background-repeat: no-repeat;
  line-height: 36px;
}
.xf {
  background-image: url(./素材/image/icon_03.gif);
  background-repeat: no-repeat;
  line-height: 36px;
}
.st {
  background-image: url(./素材/image/icon_04.gif);
  background-repeat: no-repeat;
  line-height: 36px;
}
.lh {
  background-image: url(./素材/image/icon_05.gif);
  background-repeat: no-repeat;
  line-height: 36px;
}
.mr {
  background-image: url(./素材/image/icon_06.gif);
  background-repeat: no-repeat;
  line-height: 36px;
}
.my {
  background-image: url(./素材/image/icon_07.gif);
  background-repeat: no-repeat;
  line-height: 36px;
}
</style>
</head>
<body>
    <div>
        <div class="title">全部分类</div>
        <dl>
            <dt class="hf">护肤</dt>
            <dd>洁画 化妆水 喷雾 美容液 眼霜 眼部精华 眼膜 面膜 面膜贴 水洗面膜 免洗面膜 精华 精油 凝露 乳液 面霜 日霜 晚霜</dd>
            <dt class="cz">彩妆</dt>
            <dd>卸妆 防晒 阿高 BB霜 粉底 粉饼 睫毛膏 眼影 唇彩 腮红 眼线笔 底妆 遮瑕 蜜粉 唇笔 美甲</dd>
            <dt class="xf">香氛</dt>
            <dd>男香 女香 小Q装 中性香水</dd>
            <dt class="st">身体护理</dt>
            <dd>洗发 护发 沐浴 身体乳 手足护理 护手霜 纤体 身体精油 颈部护理 个人护理 卫生用品 脱毛</dd>
            <dt class="lh">礼盒套装</dt>
            <dd>
            护肤套装 身体护理套装 彩妆套装 旅行装 潜水套装 男士套装</dd>
            <dt class="mr">美容工具</dt>
            <dd>护肤 彩妆 美发 美体 美甲 美容仪器 其他美客工具</dd>
            <dt class="my">母婴专区</dt>
            <dd>奶粉 尿裤湿巾 母婴洗护</dd>
        </dl>
    </div>
</body>
</html>

总结：望大佬指正。

YourLie_in_April

关注

1
点赞
踩
0

收藏

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

内容：content 即盒子里面的文字或者标签。内边距：padding 即盒子边框到内容之间的距离。边框：border 即盒子的边框。外边距：margin 即盒子与盒子之间的距离。border相关属性：border-width：边框的宽度、border-style：边框的样式（solid：实线、dashed：虚线、dotted：点线）、border-color：边框的颜色。（border也可进行连写，顺序可调换。）可对四个方向边框单独编辑：border-left 左边框、border
复制链接

扫一扫