HTML&CSS(04)---CSS(3)盒子模型

Unit Two: HTML&CSS(04)—CSS(3)盒子模型

1.文档流（normal flow）

网页是一个多层的结构，一层摞着一层。通过CSS可以分别为每一层设置样式。作为用户来讲只能看到最顶上一层。这些层中，最底层为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流都在文档流中排列。
两种状态
1. 在文档流中
2. 不在文档流中
元素特点
- 块元素
  - 块元素会在页面中独占一行。
  - 默认宽度是父元素的内容（会把父元素撑满）。
  - 默认高度被内容撑开（子元素）。
- 行内元素
  - 行内元素不会独占页面的一行，只占自身大小。
  - 行内元素在页面中自左向右水平排列，如果一行中不能容纳下所有的行内元素，元素会继续下一行自左向右排列。
  - 行内元素默认宽度和高度被内容撑开。

2. 盒子模型

CSS将页面中的所有元素都设置为了一个矩形盒子。将元素设置为矩形的盒子后，对页面的布局就变成了不同的盒子摆放到不同的位置。

一个盒子的大小由：内容区+内边距+边框共同决定。

盒子构成

内容区 content

width&height设置内容区大小。

      .box{
          width: 200px;
          height: 200px;
          background-color: aqua;
      }  

内边距 padding

内容区和边框之间的距离是内边距。

语法

padding: 10px 20px 30px 40px;
值
- padding-top
- padding-right
- padding-bottom
- padding-left
内边距的设置会影响盒子大小。
背景颜色会延伸到内边距上。

        .box {
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;
        }
    
        .inner {
            background-color: darkblue;
            width: 200px;
            height: 200px;
    
        }

边框 border

边框属于盒子边界，会影响元素大小。至少需要3个样式：
- border-width边框宽度
  - 默认值：3个像素
  - 指定四个方向边框宽度。
  - 值：
    - 四个值：上右下左
    - 三个值：上左右下
    - 两个值：上下左右
    - 一个值：上下左右
- border-xxx-width
  - 值
    - top right bottom left:用来指定某一个边的宽度。
- border-color边框颜色
  - 规则同上。
  - 默认值：使用color值。
- border-style边框样式
  - 规则同上。
  - 值
    - solid 实线
    - dotted 点状虚线
    - dashed 虚线
    - double 双线
  - 默认值： None。无边框
```
      .box{
          border-width: 10px 20px 50px 100px;
          border-color: firebrick blueviolet yellow green;
          border-style: solid dotted dashed double;
      }
```
- 简写属性
  - 没有顺序要求。
  - border-xxx
    - 值： top right bottom left
```
      .box{
        border: 10px magenta double ;
        border-left: none;
      }
```

外边距 margin

外边距不会影响可见框的大小，但是外边距会印象盒子位置。

margin: 上右下左
值
- margin-top
  - 上外边距：设置一个正值，元素会向下移动。
- margin-right
  - 右外边距：设置一个正值，其右元素会右移动。
  - 默认情况，设置无效，需和position一起使用。
- margin-bottom
  - 下外边距：设置一个正值，其下元素会右移动。
- margin-left
  - 左外边距：设置一个正值，元素会向右移动。
元素在页面中自左向右排列，所以默认情况下，左和上外边距会移动自身。而设置下和右会移动其他元素。
负值往相反方向移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    
        .box1 {
            border: 10px magenta double;
            border-left: none;
            margin: 100px 0px -100px 100px;
    
        }
    
        .box2 {
            width: 300px;
            height: 300px;
            background-color: darkblue;
            margin-top: -100px;
        }
    
        .box2 {
            border: 10px darkcyan dotted;
        }
    </style>
</head>
    
<body>
    <div class="box1"> box1
    </div>
    <div class="box2"> box2
    
    </div>
</body>
</html>

3. 布局

水平布局

元素在其父元素中水平方向的位置由一下几个属性共同决定：
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right

一个元素在其父元素中，水平布局必须满足以下等式：

子元素：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内的内容区宽度（width）

    <style>
        .box {
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }
    
        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin-left: ;
            margin-right: ;
            /*
            元素的水平方向布局：
            `margin-left`+`border-left`+`padding-left`+`width`+`padding-right`+`border-right`+`margin-right` = 其父元素内的内容区宽度（width）
                  0 + 0 + 0 + 200 + 0 + 0 + 600(浏览器自动添加) = 800   
        */
        }
    </style>

过度约束
- 如果上述等式不成立，则浏览器会自动调整，使等式自动相等。

调整情况

如果7个值中，没有auto的情况，则浏览器会调整margin-right。
- margin-right可以为负值，以满足溢出子元素。

调整auto值

这7个值中有3个值可以设置为auto ：

width(默认值为：auto)
margin-left(默认值为：0)
margin-right(默认值为：0)

如果某个值为auto,则会自动天真auto元素的值，是等式满足。

        .box {
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }
        
        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin-left: auto;
            margin-right: 100px;
            /*
            元素的水平方向布局：
            `margin-left`+`border-left`+`padding-left`+`width`+`padding-right`+`border-right`+`margin-right` = 其父元素内的内容区宽度（width）
                  0 + 0 + 0 + 200 + 0 + 0 + 600(浏览器自动添加) = 800   
            这7个值中有3个值可以设置为auto:width: width: 
                width
                margin-left
                margin-right
                    如果某个值为auto,则会自动天真auto元素的值，是等式满足。
                    margin-left:auto；
                      600(浏览器自动添加) + 0 + 0 + 200 + 0 + 0 + 0 = 800 
                    width:auto:
                       0 + 0 + 0 + 800(600(浏览器自动添加)) + 0 + 0 + 0 = 800
                    margin-left:auto width:auto
                    width优先, 宽度最大。margin-left=0。
                        0 + 0 + 0 + 800(600(浏览器自动添加)) + 0 + 0 + 0 = 800
                    margin-left:auto margin-right:auto:
                    margin-left he margin-right平均分配值。
                    300 (浏览器自动添加)+0+0+200+0+0+300=800  
        */
        }

width:auto优先级最高

margin-left:auto和margin-right:auto同为auto,则平分空白区域。

居中设置:

         width: 200px;         
         margin-left: auto;
         margin-right: auto;

垂直布局
- 默认情况下父元素的高度被内容撑开。
- 子元素是在父元素内容区排列的。
- 如果子元素的大小超过父元素，则子元素会从父元素中溢出。
  - <overflow>处理溢出的子元素：
    - visible: 默认值。子元素会从父元素中溢出，在父元素外部的位置显示。
    - hidden: 裁剪溢出内容。一剪没。
    - scroll: 生成两个滚动条。通过滚筒条查看完整内容。
    - auto: 根据需要生成滚动条。
  - overflow-x处理水平方向布局。
  - overflow-y处理垂直方向布局。
```
.outer{
            background-color: aquamarine;
            height: 300px;
            overflow:auto;
        }
        .inner{
            width:100px;
            height:400px;
            background-color: blueviolet;
      
        }
        .next{
            width:200px;
            height:200px;
            background-color: yellow;
        }
```

盒子模型-垂直外边距折叠

（1）相邻的（2）垂直方向的外边距（margin）会发生重叠现象。

兄弟元素（并集现象）

垂直外边距两者都是正值，取较大值。
特殊情况：
- 如果相邻值为一正一负，取两者和。
- 如果相邻值为两负，取绝对值较大值。

    .box1, .box2{
        width: 200px;
        height:200px;
    }
    .box1{
        background-color: aqua;
        margin-bottom: -20px;
    }
    .box2{
        background-color: brown;
        margin-top: -10px;
    }

父子元素

父子元素的（1）相邻（2）垂直方向外边距（margin）会传递给父元素。

父子外边距折叠，会影响页面布局。

解决方案：

父元素使用padding

    .box1{
        width: 400px;
        height:200px;
        background-color: aqua;
        padding-top: 200px;
    }
    .box2{
        width:200px;
        height:200px;
        background-color: brown;
    }
    </style>

父元素加入border-top

    .box1{
        width: 400px;
        height:399px;
        background-color: aqua;
        border-top: 1px solid aqua; 
    }
    .box2{
        width:200px;
        height:200px;
        background-color: brown;
        margin-top:199px;
    }

需修改盒子大小。

子元素加入border-top并修改border-top颜色

    .box1{
        width: 400px;
        height:400px;
        background-color: aqua; 
    }
            
    .box2{
        width:200px;
        height:200px;
        background-color: brown;
        border-top:200px aqua solid;
    }

4. 行内元素盒子模型

行内元素不支持width宽度、height高度。
- padding、border、margin垂直方向不影响元素布局。
- 水平方向直接相加。
<display>设置行内/块元素
- inline将元素设置为行内元素。
- <block> 将元素设置为块元素。
- <inline-block>将元素设置为行内块元素。
  - 既可以设置宽度和高度，又不独占一行。
- <table>将元素设置为一个表格。
- <none>隐藏元素，不占据位置。
<visibility>设置元素的显示状态
- visible：默认值，元素在页面中正常显示。
- hidden：元素在页面中隐藏，但是依然占据页面位置。

5. 浏览器默认样式

默认情况下，浏览器会为元素设置一些默认样式，相当于预设置的CSS。
- 默认样式存在会影响页面布局，通常情况下，必须要去除浏览器的默认样式。（PC端）
- 去除浏览器默认样式：
```
        *{
            margin: 0px;
            padding: 0px;
        }
```
重置样式表：专门用来对浏览器样式进行重置的
- reset.css: 直接祛除了浏览器的默认样式。
- normalize.css:对默认样式进行了统一。

6. 布置练习

练习1：京东图片竖向排版

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset style/reset.css">
    <style>
        ul{
            height: 350px;
            width:150px;
            margin: 0px auto;
            overflow: hidden;
            background-color: aquamarine;
        }
        li{
            margin: 10px;
        }
        img {
            width: 130px;
            height: 103px;
        }
    </style>
</head>
  
<body>
    <ul>
        <li>
            <a href="javascript:;">
                <img src="./jd/1.jpg" alt="1">
            </a>
        </li>
  
        <li>
            <a href="javascript:;">
                <img src="./jd/2.jpg.webp" alt="2">
            </a>
        </li>
  
        <li>
            <a href="javascript:;">
                <img src="./jd/3.jpg.webp" alt="3">
            </a>
        </li>
    </ul>
</body>
  
</html>

练习2：京东文字列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset style/reset.css">
    <link rel="stylesheet" href="./reset style/normalize.css">
    <style>
        body{
            background-color: aquamarine;
        }
        ul {
            width: 190px;
            height: 450px;
            margin: 10px 10px;
            background-color: aliceblue;
            font-size: 12px;
        }
  
        li {
            /* width: 190px; */
            height: 25px;
            /*想让文字垂直居中，把height和line-height设置为相同值。*/
            line-height: 25px;
            padding-left: 18px;
        }
        li:hover{
            background-color: rgb(202, 202, 202);
        }
  
        a {
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }
        a:hover{
            color: orangered;
        }
    </style>
</head>
  
<body>
    <ul>
        <li>
            <a href="https://jiadian.jd.com/">家用电器</a>
        </li>
        <li>
            <a href="javascrpt:;">手机</a>/<a src="javascrpt:;">运营商</a>/<a src="javascrpt:;">数码</a>
        </li>
        <li>
            <a href="javascrpt:;">电脑</a>/<a src="javascrpt:;">办公</a>
        </li>
    </ul>
  
  
</body>
</html>

练习3：

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易新闻列表</title>
    <link rel="stylesheet" href="./reset style/reset.css">
    <style>
        body {
            background-color: aquamarine;
        }
  
        .layer1 {
            width: 300px;
            height: 324px;
            background-color: aliceblue;
            margin: 27px auto;
            padding-top: 20px;
        }
  
        .title {
            height: 41px;
            border-top: solid rgb(156, 154, 154) 1px;
        }
  
        h2 {
            /*内容和上部边框一致*/
            display: inline-block;
            height: 41px;
            line-height: 41px;
            /*线段无法重合，利用margin-top将元素往上移动。*/
            margin-top: -1px;
            border-top: solid chocolate 1px;
            font-weight: bold;
        }
  
        h2>a {
            font-size: 16px;
            text-decoration: none;
            color: #333;
            display: inline;
        }
  
        h2>a:hover {
            color: chocolate;
        }
  
        .pic {
            width: 300px;
            height: 150px;
        }
  
        .pictitle {
            height: 40px;
            line-height: 40px;
            margin: -42px auto 0px;
            color: rgba(255, 255, 255, 1);
            background-color: rgba(0, 0, 0, 0.5);
            font-style: normal;
            text-align: center;
            font-weight: bold;
        }
  
        .pictitle::before {
            content: "/\\";
            color: brown;
            font-size: 15px;
            font-weight: bold;
            margin-right: 5px;
        }
  
        div>a {
            width: 300px;
            height: 150px;
            text-decoration: none;
        }
  
        ul {
            /* width:300px;
            height:120px; */
            margin-top: 12px;
        }
  
        li {
            /* width: 300px; */
            /* height: 30px; */
            margin-bottom: 17px;
        }
  
        li>a {
            text-decoration: none;
            font-style: normal;
            color: #666;
            font-size: 14px;
        }
  
        li>a:hover {
            color: chocolate;
        }
  
        li>a::before {
            content: " ";
            background: #dddddd;
            width: 4px;
            height: 4px;
            display: inline-block;
            left: 3px;
            top: 50%;
            margin: 0px 8px 4px 0px;
        }
    </style>
</head>
  
<body>
    <div class="layer1">
        <div class="title">
            <h2>
                <a href="https://sports.163.com/">体育</a>
            </h2>
        </div>
        <div class="pic">
            <a href="https://sports.163.com/20/0716/10/FHLB00JT0005877U.html">
                <img src="./jd/4.webp">
                <h3 class="pictitle">利拉德住总统套房被CJ不小心曝光</h3>
            </a>
        </div>
  
        <div class="list">
            <ul>
                <li>
                    <a href="https://sports.163.com/nba/">乔治:我爱LA 喜欢和LBJ一起打球</a>
                </li>
                <li>
                    <a href="https://sports.163.com/nba/">乔治:我爱LA 喜欢和LBJ一起打球</a>
                </li>
                <li>
                    <a href="https://sports.163.com/nba/">乔治:我爱LA 喜欢和LBJ一起打球</a>
                </li>
                <li>
                    <a href="https://sports.163.com/nba/">乔治:我爱LA 喜欢和LBJ一起打球</a>
                </li>
            </ul>
        </div>
    </div>
</body>
  
</html>

7. 盒子大小（box-sizing）

box-sizing

用来设置盒子尺寸的计算方式（设置width和height的作用）
- 可选值：
  - 默认值：content-box，宽度和高度用来设置内容区大小。padding和border在内容区之外。
  - border-box,宽度和高度用来设置整个盒子大小，padding和border将占据内容区位置，也就是内容区将缩小。border-box可以框死整个盒子大小。

7. 轮廓和圆角（box-shadow）

outline用来设置元素的轮廓线，用法和border一模一样。轮廓和边框不同的点，就是轮廓不会影响可见框的大小。
box-shadow用来设置元素的阴影效果，阴影不会印象页面布局。
```
box-shadow:20px 15px 10px rgba(0,122,123, 0.3);
```
- 值
  - 第一个值：水平偏移量 设置阴影的水平位置，正值向右移动，负值向左移动。
  - 第二个值：垂直偏移量 设置阴影的垂直位置，正值向下移动，负值向上移动。
  - 第三个值：阴影模糊半径，值越大，阴影越模糊。
  - 第四个值：阴影颜色。
border-radius圆角
```
            border-radius: 50px 100px;
```
- 四个值border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
- 值：指定的是相切圆的半径（水平、垂直两个方向）。
```
border-radius: 50px 100px 10px 5px;
```

PREVIOUSHTML&CSS(05)---CSS(4)浮动

NEXThtml&css(03)---CSS(2)颜色

HTML&CSS(04)---CSS(3)盒子模型

Unit Two: HTML&CSS(04)—CSS(3)盒子模型

1.文档流（normal flow）

2. 盒子模型

盒子构成

3. 布局

水平布局

垂直布局

`<overflow>`处理溢出的子元素：

盒子模型-垂直外边距折叠

4. 行内元素盒子模型

`<display>`设置行内/块元素

`<visibility>`设置元素的显示状态

5. 浏览器默认样式

6. 布置练习

7. 盒子大小（box-sizing）

7. 轮廓和圆角（box-shadow）

Unit Two: HTML&CSS(04)—CSS(3)盒子模型

1.文档流（normal flow）

2. 盒子模型

盒子构成

3. 布局

水平布局

垂直布局

<overflow>处理溢出的子元素：

盒子模型-垂直外边距折叠

4. 行内元素盒子模型

<display>设置行内/块元素

<visibility>设置元素的显示状态

5. 浏览器默认样式

6. 布置练习

7. 盒子大小（box-sizing）

7. 轮廓和圆角（box-shadow）

`<overflow>`处理溢出的子元素：

`<display>`设置行内/块元素

`<visibility>`设置元素的显示状态