4. css盒子模型

作者: 瑟闻风倾 | 来源:发表于2019-09-23 14:15 被阅读0次

CSS 盒子模型
day1
2019-05-05
css基础问题
css 盒子模型
html页面绘制方面
CSS：盒子模型（box）
4. css盒子模型
你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）
需要掌握的CSS

说明：盒子模型的内容范围包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒子模型就是通过div和css样式来设计一个可以添加逻辑的效果。

盒子模型.PNG

注意：这里的盒子模型是遵循W3C的标准盒子模型，IE的盒子模型这里不做讲解。

1. 内边距(padding)

padding.PNG

td{
  padding: 100px;
}

<body>
  <table border="1">
    <tr>
      <td>内边距</td>
    </tr>
  </table>
</body>

备注：内边距(padding)有1个参数时，上下左右外边距都为该参数值；2个参数时，第一个参数为上下外边距值，第二个参数为左右外边距值；4个参数分别代表上右下左外边距值。

2. 边框(border)：可以创造出效果出色的边框，并可以应用于任何元素。

基本的边框属性

边框/单边框宽度：border-width
边框/单边框样式：border-style
边框/单边框颜色：border-color

<body>
  <p>边框样式</p>
</body>

p{
  border-width: 2px;
  border-style: dotted;
  border-top-style: double;
  border-color: red;
}

简化写法

p{
  border: 2px solid red;
}

备注：border: 1px solid red;三个参数分别为边框的宽度、样式和颜色属性。

css3提供的边框属性

圆角边框： border-radius
边框阴影：box-shadow
边框图片：

p{
  width: 100px;
  background-color: blue;
  text-align: center;
  border: 2px solid red;
  border-radius: 10px;
}
#divid{
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: blue;
  border-radius: 10px;
  box-shadow: 10px 30px 5px red;
}

<body>
  <p>圆角效果</p>
  <div id="divid"></div>
</body>

阴影属性(box-shadow)的4个参数分别代表：背景阴影向右移动10个像素，再向下移动20个像素；阴影透明度；阴影颜色。

3. 外边距(margin)

外边距.PNG

备注：外边距和内边距的属性比较相似。margin的参数个数和对应代表大含义和padding一致。

.mg{
  width: 100px;
  height: 100px;
  background-color: royalblue;
  margin: 10px;
}

<body>
  <div class="mg">外边距</div>
</body>

盒子模型示例

body{
  margin: 0px;
}
.container{
  margin: 20px;
}
.bd{
  border-style: solid;
}
.pd{
  padding: 10px;
}
.content{
  background-color: blue;
}

<body>
  <div class="container">
    <div class="bd">
      <div class="pd">
        <div class="content">Hello liy</div>
      </div>
    </div>
  </div>
</body>

说明：最外层的div为容器层，之后为边框、内边距和内容区域。

4. 外边距合并：外边距合并就是一个叠加的概念

外边距合并.PNG

说明：外边距合并遵循边距大的一方，即元素1的外边距为10px，元素2的外边距为20px,则元素1和元素2间的距离为20px；元素1的外边距为10px，元素2的外边距为10px,则元素1和元素2间的距离为10px。

5. 盒子模型应用

页面盒子组成.PNG

.top{
  width: 100%;
  height: 50px;
  background-color: black;
}
.top_content{
   width: 75%;
   height: 50px;
   margin: 0px auto;
   background-color: blue;
}

.body{
  width: 75%;
  height: auto;
  margin: 10px auto;
  background-color: blanchedalmond;
}
.body_image{
  width: 100%;
  height: 100px;
  background-color: yellow;
}

.body_content{
  width: 100%;
  margin: 10px auto;
  background-color: darkgray;
}
.content_notification{
  width: 100%;
  height: 30px;
  background-color: green;
}
.content_infomation{
  width: 100%;
  height: 200px;
  margin: 0px auto;
  background-color: pink;
}

.foot{
  width: 75%;
  height: 100px;
  margin: 10px auto;
  background-color: brown;
}
.foot_content{
  width: 100%;
  height: 70%;
  background-color: powderblue;
}
.foot_subnav{
  width: 100%;
  height: 30%;
  background-color: black;
}

<body>
  <div class="top">
    <div class="top_content"></div>
  </div>

  <div class="body">
    <div class="body_image"></div>
    <div class="body_content">
      <div class="content_notification"></div>
      <div class="content_infomation"></div>
    </div>
  </div>

  <div class="foot">
    <div class="foot_content"></div>
    <div class="foot_subnav"></div>
  </div>
</body>

效果展示.PNG

5. 盒子类型-diaplay属性

block：将内联元素变为块级元素
inline：将块级元素变为内联元素
inline-block：与inline的效果相比，可设置内联元素的宽度
inline-table：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子分类-display属性</title>
    <style>
        div{
            background-color: #FF8C00;
            display: inline-block;
            width: 300px;
        }
        span{
            background-color: aqua;
            display: block;
            width: 300px;
        }
        table{
            border: 1px solid #FF8C00;
            /*HELLO WORLD原本显示在表格的上下，此时显示在左右*/
            display: inline-table;
        }
        td{
            border: 1px solid darkturquoise;
        }
    </style>
</head>
<body>
    <div>div元素(原本属于块级元素，单占一行)</div>
    <div>div元素(原本属于块级元素，单占一行)</div>
    <span>span元素(原本属于内联元素，共占一行)</span>
    <span>span元素(原本属于内联元素，共占一行)</span>
    <br/>
    HELLO
    <table>
        <tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
        <tr><td>H</td><td>I</td><td>J</td><td>K</td></tr>
        <tr><td>O</td><td>P</td><td>Q</td><td>R</td></tr>
        <tr><td>U</td><td>V</td><td>W</td><td>X</td></tr>
    </table>
    WORLD
</body>
</html>

image.png

list-item：将普通的多个元素以列表的形式显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子分类-display属性</title>
    <style>
        div{
            display: list-item;
            list-style-type: circle;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <div>示例1</div>
    <div>示例2</div>
    <div>示例3</div>
    <div>示例4</div>
</body>
</html>

image.png