第五章 盒子模型

5.1 元素分类

  • 在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(也叫行内元素)和内联块元素。

 

常用的块状元素有：

 

    • 1.独自占据整一行

    • 2.可以设置宽高

<div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form>

常用的内联元素有

  • 1.所有的内联元素在一行内显示

  • 2.不可以设置宽高

<a>、<span>、<i>、<em>、<strong>、<label>

常见的内联块状元素有

  • 1.在一行内显示

  • 2.可以设置宽高

<input>、<img>

标签分类的特点是对现有的HTML常用标签进行分类，那么这些特点在后面的学习过程中我们还可以通过display属性进行强制修改规则。

 

5.2 盒模型的常用属性

  • 内容的宽高:css定义的宽(width)和高(height),指的是盒子内部物体所占据的宽高，在css中指的是填充以里的内容范围

/*一个200px*200px范围的div盒子，背景颜色是红色的。*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容的宽高</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
             background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • 内边距：内边距表示的是盒子的边框到内容之间的距离
.box{
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 20px;
}

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;

边框

  • 盒模型的边框也有三要素：粗细 线性样式 颜色。

<!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;

上面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;

  • 清楚外线：outline：none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border默认清除</title>
    <style type="text/css">
        input{
            border: none;
            outline: none;
            border:1px solid red;        
        }
    </style>
</head>
<body>
    <input type="text" name="">
</body>
</html>
  • 外边距

  • margin:在水平方向上不会出现问题，垂直方向上会出现塌陷问题，表示盒子到另一个盒子的距离。既然是两者之间的距离，那么就会产生水平之间的距离和垂直之间的距离。同样情况下，外边距也有四个方向，跟padding类似。

  • 水平方向的外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外边距</title>
    <style type="text/css">
        .box_l{
            background-color: green;
            margin-right: 20px;
        }
        .box_r{
            background-color: red;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <span class="box_l">左盒子</span><span class="box_r">右盒子</span>
</body>
  • 垂直方向的外边距
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直方向上外边距合并</title>
    <style type="text/css">
         .father{
                width: 400px;
                border: 1px solid gray;
            }
            .box1{
                width: 300px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 400px;
                height: 300px;
                background-color: green;
            }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>        
        <div class="box2"></div>
    </div>
</body>
</html>

  • 如果给红色的盒子设置`margin-bottom:30px;那么两个盒子距离是30px

  • 如果给绿色的盒子设置`margin-top:50px;会出现外边距合并现象，说这种现象叫塌陷问题

    • 我们如何避免出现这种问题呢？

      • 很简单，我们如果想让上下的两个盒子中间有间距，只需要设置一个盒子的一个方向即可。

posted @ 2020-04-26 11:29  炜琴清  阅读(185)  评论(0)  编辑  收藏  举报