盒模型基本概念

Posted 2020-08-08

 盒模型

规定了元素框处理元素内容、内边距、边框距和 外边距的方式。

1、内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding

属性。

Padding：简写属性。

Padding-bottom：设置元素的下内边距。

Padding-top：设置元素的上内边距。

Padding-left：设置元素的左内边距。

Padding-right: 设置元素的右内边距。

Padding:10px   四个方向

        ：10px 20px   上下  左右

        ：10px 20px 30px   上 左右 下

        ：10px 20px 30px 40px  上 右 下 左

2、边框  （可以做三角形）

(border) 是围绕元素内容和内边距的一条或多条线。

Border-style：none、dotted、dashed、double、solid

Border-width

Border-color (默认为transparent)

做三角形：

div{

           width: 0px;

           height: 0px;

           border-top: 900px red solid;

           border-left: 900px transparent solid;

           border-right: 900px transparent solid;

           border-bottom: 900px transparent solid;

       }

<div></div>

3、外边距 （margin：可以为负值）

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”，用法同padding。

注：margin: 0 auto 为块级元素水平居中。

4、外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

.div1,.div2{

            height: 500px;

            width: 300px;

            border: 2px dashed red;

        }

        .div1{

            margin-bottom: 200px;

        }

        .div2{

            margin-top: 100px;

        }

<div class="div1">fjkalj</div>

<div class="div2">的客服进来</div>