关闭

css盒子模型part3

标签: css盒子模型css
283人阅读 评论(0) 收藏 举报
分类:

许久没有接触前端了,然而也并没有进行温习,许多便不再熟息,最近又重新接触,找了些资料,于是乎便将基础的东西 整理一下。

css就是设置网页的各个组成部分的表现形式。引入css的核心目的就是实现网页的结构内容和表现形式的分离,将原来html所承担的与结构无关的功能剥离出来。

而所谓的盒子模式,就是一种用来编排网页的一种排版方式。由于其出色且灵活的表现,可通过大小不一的盒子或者是盒子之间的嵌套来布局网页,使得网页更加的简洁,更加的方便,尤其是css3中的弹性盒子模型的出现,为网页带来了不一样的布局体验(ps,当然本人并没有接触过css3~~)。

关于盒子模型的基本属性:内容(content)、填充(padding)、边框(border)、边界(margin)。
(ps,从百度盗的图片 哈哈)
这里写图片描述

(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

盒子模型的border样式:

div{
    <!--边框-->
    border-width:2px;
    border-style:solid;
    border-color:red;
    <!--上下左右border-->
    <!--border-top,border-right,border-left-->
}
填充:
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

边界:

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

简单的盒子模型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简单的盒子模型</title>
</head>
<style type="text/css">

    body {
        font-size: 12px;
        margin: 0px auto;
        height: auto;
        width: 805px;
        text-align: center;
    }
    .mainBox {
        border: 1px dashed #0099CC;
        margin: 3px;
        padding: 0px;
        float: left;
        height: 100px;
        width: 192px;
    }
    .mainBox h3 {
        float: left;
        height: 20px;
        width: 179px;
        color: #FFFFFF;
        padding: 6px 3px 3px 10px;
        background-color: red;
        font-size: 16px;
        text-align:center;
    }
    .mainBox p {
        line-height: 1.5em;
        text-align:center;
        margin: 35px 5px 5px 5px;
    }

</style>
</head>

<body>
<div class="mainBox">
    <h3>1.....</h3>
    <p>简单的css盒子模型</p>
</div>
<div class="mainBox">
    <h3>2.......</h3>
    <p>简单的css盒子模型</p>
</div>
<div class="mainBox">
    <h3>3......</h3>
    <p>简单的css盒子模型</p>
</div>

</body>
</html>

这里写图片描述

————–初学—-共勉!

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14230次
    • 积分:511
    • 等级:
    • 排名:千里之外
    • 原创:33篇
    • 转载:5篇
    • 译文:1篇
    • 评论:0条