05盒模型

盒模型

在CSS中 ,  "box mode"   这一术语是用来设计和布局时使用,然后再网页中基本上都会显示一下方方正正的盒子,  我们称为这种盒子叫盒模型.

盒模型有两种 :  标准模型和IE模型  , 

 

盒模型示意图

 

 

 

 

 

 

 

盒模型的属性

width : 内容的宽度

height : 内容的高度

padding : 内边距 , 边框到内容的距离

border : 边框 , 就是指盒子的宽度

margin :  外边框 , 盒子边框到附近最近盒子的距离

 

如果让你做一个宽高402*402的盒子 ,   答案有上万种  ,甚至更高

 

盒模型的计算

如果一个盒子设置了padding , border , width height , margin  (咱们先不要设置margin , 后续再设置)

 

盒子的真实宽度= width  + 2*padding + 2*border

盒子的真实高度 = height + 2*padding +2*border

 

注意: 标准盒模型 , width 不等于盒子真实的宽度

如果要保持盒子真实的宽度 , 那么加 padding 就一定要减 width , 减 padding 就一定要加 width  真实高度一样设置.

 

padding(内边距)

padding

padding : 就是内边距的意思 , 它是边框到内容之间的距离 

另外padding的区域是有背景颜色的 , 并且背景颜色和内容颜色一样 , 也就是说 background-color 这个属性将填充所有的border以内的区域

padding的设置

padding有四个方向 , 分别描述4个方向的padding

描述的方法有两种 

1、写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

2、写综合属性，用空格隔开

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;

一些标签默认有padding

比如ul标签 , 有默认的padding-left值

那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{
  padding:0;
  margin:0;    
}

但是  ,  这种方法效率不高 . 

所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）https://meyerweb.com/eric/tools/css/reset/

 

border  边框

边框

border  :   边框的意思 , 描述盒子的边框

边框有三个要素  :  粗细  线性样式   颜色

border: solid

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

按照3要素来写border

border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;

按照方向划分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

上面12条语句，相当于 bordr: 10px solid red;

另外还可以这样写:

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

 

border : none ; 

border : 0 ;

表示border 没有设置样式.

使用border来制作小三角

/*小三角 箭头指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

 

margin(外边距)

margin : 外边距的意思 , 表示边框到最近盒子的距离 . 

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;

margin-bottom: 100px;

 

注意 : 计算有一个前提 , 在标准文档流下 , 

　　　　padding : 父子之间调整距离 

　　　　margin : 兄弟之间调整距离

 

 

 

 

 

 

 

 

 

 

margin　中的坑   大坑  

 

margin的用法

margin 塌陷问题

margin 的垂直方向会出现塌陷问题

当时说道了盒模型 , 盒模型包含着margin ,   因为元素和元素在垂直方向上margin里面有坑

 

例子 : 

html结构：

<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>

css样式：

  *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

当给链各个标准文档流下兄弟盒子 , 设置垂直方向上的margin时 , 那么以较大的为准 , 那么我们称这种现象较塌陷 , 没办法解决 ,   我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。

 

当我们给两个标准文档流下的兄弟盒子设置浮动之后, 就不会出现margin塌陷的问题 , 

 

margin : 0  auto ;

div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        }

 

当一个div 元素设置margin : 0 auto ; 就会居中盒子 , 那我们知道margin : 0 auto ; 表示上下外边距离为 0 , 左右为auto 的距离 , 那么auto 是什么意思呢? 

设置margin-left:auto; 我们发现盒子尽可能大的右边有很大的距离 , 没有什么意义, 当设置margin-right:auto; 我们发现盒子尽可能大的左边有很大的距离 , 当两条语句 并存的时候 , 我们大仙盒子尽可能大的左右两边有很大的距离 , 此时我们就发现盒子居中了  

 

另外如果给我盒子设置浮动 , 那么margin : 0  auto 失效 

 

使用 margin:0 auto ;  注意点: 

1 . 使用margin: 0 auto; 水平居中盒子必须有width , 要有明确width , 文字水平居中使用 text-align: center; 

2 . 只有标准流下的盒子 才能使用margin:0 auto;

　　当一个盒子浮动了 , 固定定位, 绝对定位 ,  margin:0 auto; 不能用了

3 . margin: 0 auto ; 居中盒子 , 而不是居中文本 , 文字水平居中使用text-align: center;