Web前端篇：CSS盒模型

常用块元素由：

p,h1-h6,div,ul,ol,tr,li,form

常用内联元素由：

a,span,em,i,strong,u,

常见的内联块元素

input img

在这里插入图片描述

盒模型常用属性：
- 盒子模型中有四个属性：内容的宽高、内边距、外边距、边框。

1.padding

padding有四个方向，分别描述四个方向的padding。

padding-top:10px;
padding-right:3px;
padding-bottom:50px;
padding-left:70px;

综合属性，多个属性用空格隔开。

/*上 右 下 左 四个方向*/
padding: 20px 30px 40px 50px ;
/*上 左右  下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;

2.border

盒子模型的边框，在样式表中称为border。我们知道呢，我们用的手机，都会有手机壳。手机壳的样式、颜色、薄厚程度等都是这个壳的形态。同样呢，盒模型的边框也有三要素：粗细线性样式颜色。
点击领取免费资料及课程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border的使用</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            /*1像素实线且红色的边框*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

按照三要素书写border

border-width:3px;
border-style:solid;
border-color:red;
/*上面三句代码相当于一句代码：border:3px solid red;*/
/*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/
/*上下5px  左右10px*/
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;

相当于border:10px solid red;

清除默认边框：border:none;或者border:0; outline:none;

3.margin

在盒子模型中称为外边距，样式表中叫margin。表示盒子到另一个盒子的距离。既然是两者之间的距离，那么就会产生水平之间的距离和垂直之间的距离。同样情况下，外边距也有四个方向，跟padding类似。
点击领取免费资料及课程

水平方向的外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外边距</title>
    <style type="text/css">
        span:nth-child(1){
            background-color: green;
            margin-right: 20px;
        }
        span:nth-child(2){
            background-color: red;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <span class="box_l">左盒子</span><span class="box_r">右盒子</span>
</body>
</html>
#nth-child(1)，获取span子类，参数为第1个。

垂直方向外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;

        }
        #box1{
            background-color: red;
            margin-bottom: 30px;
        }
        #box2{
            background-color: black;
            margin-top: 100px
        }
        #box3{
            background-color: yellowgreen;
        }
        #box3 p{
            background-color: goldenrod;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<!-- margin 在垂直方向上会出现外边距合并现象，塌陷。以设置的最大的magrin距离为基准-->
  <div id="box1"></div>
    <div id="box2"></div>


  注意：盒模型的外边距水平方向上不会出现问题，在垂直方向上会出现“**外边距合并**”的现象。

什么是外边距合并呢？在有些文献中说这种现象叫塌陷问题。只有在垂直方向上，当两个同级的盒子，在垂直方向上设置了margin之后，那么以较大者为准。

在网页排版中，外边距合并的问题也会时常出现，我们如何避免出现这种问题呢？

很简单，我们如果想让上下的两个盒子中间有间距，只需要设置一个盒子的一个方向即可。没必要去碰触外边距塌陷的问题，还得找解决问题的方法，得不偿失。

Web前端篇：CSS盒模型

1.padding

2.border

3.margin

猜你喜欢