第四章 Html盒子模型

目录

一、padding内边距

二、border边框

 1、利用border属性做圆环

2、为单一方向设置弧度

 3、作三角形

 三、margin外边距

---

一、padding内边距

内边距padding，按照顺时针方向设置不同的padding值，设置padding值会增加盒模型的面积。

width: 100px;
height: 100px;
padding: 20px;

padding: 30px;
/*上右下左内边距均为30px*/

二、border边框

设置border会改变盒模型大小，border有三个属性：大小 边框样式 颜色，border边框不具备一次设置多个大小，若需设置不同方向的边框必须单独给出他们的大小，边框样式有四个：soild 实现线框、double 双实线边框、dashed 虚线边框、dotted 点线边框。

border:1px solid red
border-top:1px double red
border-bottom:1px dashed red
border-right:1px dotted red
border-left:1px solid red

 1、利用border属性做圆环

border-radius: 50%;  
/* 在正方形的每个角的边缘取50%的长度作内切圆 */
border: 10px solid pink;
/* 去除背景色，得到圆环 */

 

2、为单一方向设置弧度

/*先设置上下在设置左右*/
border-top-right-radius: 20px;

 3、作三角形

div {
    width:100px;
    height:100px;
    background-color:pink;
}
.s {
    /*先设置四个边框的颜色*/
    border: 50px solid black;
    border-top-color: #000;
    border-bottom-color: blue;
    border-right-color: skyblue;
    border-left-color: yellow;
    /*在设置宽高为0*/
    width:0;
    height:0;
}

设置以后可以看到如下样式：

 这时设置其他三个方向的颜色和背景色属性为transparent，设置为透明色得到三角形。

再设置圆角属性border-radius:50%得到扇形。

 三、margin外边距

四个方向，可采用顺时针赋值，默认从顶部开始。

/*设置上下10px，左右30px*/
margin:10px 30px;

margin可能会出现叠压现象：常态下，兄弟标签间的上下间距以大值为准，相当于安全距离，

例如设置第一个盒子margin-bottom为10px，第二个盒子设置margin-top为20px，则两个盒子的margin值为20px。

margin的塌陷问题：常态下，父级的第一个子级标签是一个块标签，并且使用了margin，则会出现塌陷问题。

塌陷问题图解：当需要修改子级盒子的margin值使子级盒子不紧贴父级盒子

当直接在子级盒子中设置margin-top就会产生塌陷问题：

 子级盒子的margin值并没有改变，反而父级盒子发生了塌陷。

解决方案：

1、在父级使用border，添加边框，但要注意会增大盒子面积。

2、在父级使用padding-top但会明显增大盒模型面积，要维持原大小必须修改父级盒子的大小。

3、在父级盒子使用overflow:hidden 溢出隐藏，推荐方法。