前端-----盒子模型

Posted 2020-12-28 liuafan

盒模型分为两种:标准模型和IE模型,主要了解标准模型

盒模型示意图

 

盒子模型的属性

width  :内容的宽度

height: 内容的高度

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

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

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

盒模型的计算

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

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

 

标准盒模型，width不等于盒子真实的宽度。

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

 

[border:none  一般用这个干掉按钮周边的boder

boder 也可以把文字往中间挤,加border时也要减宽或者高,这样就可以往里面挤了

]

 

padding(内边距)

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

而且,padding的区域是有背景颜色的,并且背景颜色和内容的颜色一样,也就是说

background-color 这个属性将填充所有的border以内的区域

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

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

View Code

2,写综合属性,用空格隔开

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

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

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

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

View Code

 

border(边框)

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

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

如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样式,默认的有上下左右

3px的宽度,实体样式,并且黑色的边框

 

border:none;

border:0;

表示border没有设置样式.

  按照三要素来写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;
*/

View Code

  按照方向划分

　

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:10px solid red;

View Code

使用border来制作小三角

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

View Code

margin(外边距)

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

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