`

css盒模型

    博客分类：
  • Css
css 
阅读更多
1. css盒模型

1) 盒模型基本概念 

盒模型：
相框边框 -> border
画和相框边框的距离 -> padding
相框之间的距离 -> margin


2) 边框 

border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式

<style type="text/css">
    #outerBox1{
        border-width: 2px;
        border-color: red;
        border-style:solid;
    }
    #outerBox2{ border: thick blue dashed; }
    #outerBox3{
        border-top: thick blue dashed;
        border-right: 2px red solid;
        border-bottom: thin yellow dotted;
        border-left: 2px red solid;
    }
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>


3) 内边距 padding 

<style type="text/css">
    #outerBox1{
        border-width: 2px;
        border-color: red;
        border-style:solid;
        padding: 40px;
    }
    #outerBox2{
        border: thick blue dashed;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 2px;
    }
    #outerBox3{
        border-top: thick blue dashed;
        border-right: 2px red solid;
        border-bottom: thin yellow dotted;
        border-left: 2px red solid;
        padding: 20px 10px 5px 2px;
    }
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>


4) 外边距 margin 

<style type="text/css">
    #outerBox1{
        border-width: 2px;
        border-color: red;
        border-style:solid;
        padding: 40px;
        margin: 10px;
    }
    #outerBox2{
        border: thick blue dashed;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 2px;
        margin-top: 20px;
        margin-right: 10px;
        margin-bottom: 5px;
        margin-left: 2px;
    }
    #outerBox3{
        border-top: thick blue dashed;
        border-right: 2px red solid;
        border-bottom: thin yellow dotted;
        border-left: 2px red solid;
        padding: 20px 10px 5px 2px;
        margin: 20px 10px 5px 2px;
    }
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>


5) 网页布局与盒模型 

5.1 标准文档流
标准文档流：指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则；
5.2 块级元素 VS 行内元素
块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如<div>；
行内元素：以普通的一个 DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如<span>；

<h1>块级元素</h1>
<div>块1</div>
<div>块2</div>
<div>块3</div>
<h1>行内元素</h1>
<span>块1</span>
<span>块2</span>
<span>块3</span>
</body>


6) 盒子在标准流中的定位 

6.1 行内元素之间的水平margin
marin-right + margin-left

<span style="margin-right: 10px;">块1</span>
<span style="margin-left: 10px;">块2</span>

6.2 块级元素之间的竖直margin
margin-bottom margin-top 以大的为标准

<div style="margin-bottom: 10px;">块1</div>
<div style="margin-top: 5px;">块2</div>

6.3 嵌套盒子之间的margin
子块的margin将以父块的内容为参考

<div style="margin: 10px;">块1
<div style="margin-top: 20px;">块2</div></div>

6.4 margin属性可以设置成负值

<span style="margin-right: 10px;">块1</span>
<span style="margin-left: -30px;">块2</span>
分享到：
| css背景颜色、图像
评论
发表评论

您还没有登录,请您登录后再发表评论

Global site tag (gtag.js) - Google Analytics