笔记来源：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版

盒模型

1. 文档流（normalflow）

网页是一个多层的结构，一层摁着一层
通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层—平面效果
这些层中，最底下的一层称为文档流
文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列
对于我们来元素主要有两个状态

• 在文档流中（好比人在地球上）
• 不在文档流中（脱离文档流）

（文档流的排版方式是:块级元素垂直排布,行内元素和行内块级水平排布。不脱离就是按照这种方式排版,从左到右,从上到下。所以脱离文档流就是不按照文档流的排版方式）

2. 块元素（比如div）

• 块元素会在页面中总会独占一行（即自上向下垂直排列）
• 默认宽度是父元素的全部（会把父元素撑满）

• 默认高度是被内容撑开（子元素）

  3. 行内元素(比如span、超链接)

• 行内元素不会独占页面的一行，只占自身的大小；

• 行内元素在页面中左向右水平排列；如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）；
• 行内元素的默认宽度和高度都是被内容撑开；

4. 盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。[1]

盒模型、盒子模型、框模型（box model）

CSS将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由一下几个部分组成（即盒子大小和位置）：

• 内容区（content）—大小
• 内边距（padding）— 保护泡沫— 大小
• 边框（border）— 盒子边
• 外边距（margin）— A盒子与B盒子中间的隔离位置

[ 内容区（content）—可见宽 ]

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是等多种类型
元素中的所有的子元素和文本内容都在内容区中（文本、图片）

• width(内容区的宽度)和height(内容区的高度) 设置内容区的大小+color内容区颜色

  <style>
     .box1{
        /*设置内容content*/
        width:200px;
        height:200px;
        background-color:aqua;
    }
    </style>

  

  [ 边框（border）—可见宽]

  边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部；边框的大小会影响到整个盒子的大小；

1. border属性：宽度 颜色 样式—边框的 宽度、颜色、样式 三者必须要有的，缺一不可；

• border-width 边框的宽度：不写默认3px ；
• border-color 边框的颜色 ：不写默认color设置的颜色；
• border-style 边框的样式：不写无效果；
  • style 值： solid 实线 dotted 点状虚线 dashed 线状虚线 double 双线
  • 效果（solid） 效果（dotted） 效果（dashed） 效果（double）
    

    /*直接统写--推荐*/  border: 10px red solid;/*这种写法最简洁*/
    /*分别设置*/  border-width: 10px; border-color: red; border-style: solid;

1. border属性：指定 上 右 下 左 ，单边指定，没有设置的按默认值展现效果

• border-top上边框的宽度、颜色和样式 ```css /直接统写—推荐/

    border-top: 10px red solid;

  /分别设置/

    border-top-width: 20px;
    border-top-color: tomato;
    border-top-style: solid;

/将某边设置为空/ border:none;

- `border-right` 右边框的宽度、颜色和样式
- `border-bottom` 下边框的宽度、颜色和样式
- `border-left` 左边框的宽度、颜色和样式
**border : 值的说明 ，**不论是border-width 、 border-color 、border-style 还是其衍生出来的属性写法，都可以指定每个方向的边框情况，设定几个值就决定了对应方向的宽度、颜色或样式
- 四个值：上 右 下 左（顺时针）
- 三个值：上 右（左同） 下
- 两个值：上（下） 右（左）
- 一个值：上（下左右）
```css
    <style>
     .box1{
        /*设置内容content*/
        width:200px;
        height:200px;
        background-color:aqua;
        /*设置盒子边框border*/
        border-width: 10px 25px 36px 50px;
        border-color: tomato red cornflowerblue greenyellow;
        border-style: solid dashed dotted double;
    }
    </style>

[ 内边距(padding）— 可见宽 — 向内部更改操作 ]

内边距，也叫填充，是内容区和边框之间的空间（相当于快递中保护泡沫）—所以内边距的设置会影响盒子的大小；padding内边距的简写属性，可以同时指定四个方向的内边距，规则和边框中属性值设置一样

• padding-top 上内边距
• padding-right右内边距
• padding-bottom下内边距
• padding-left 左内边距

  /*统写一*/
        padding: 100px;
  /*统写二*/
        padding: 100px 70px 50px 30px;
  /*分开写*/
        padding-top: 50px;
        padding-left: 50px;
        padding-bottom: 50px;
        padding-right: 50px;

  
  可以看出，当内外div宽度和高度一样时，由于outer设置了一个padding属性，其盒子大小被“撑大了”
  盒子可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算 ； 盒子大小 = 内容 + 边框2 +内边距2 ；

[ 外边距（margin）— 向外部更改操作，即位移]

外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段
注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子实际占用的位置和占用空间
上-右-下-左；auto为居中；
一共有四个方向的外边距：

• margin-top 上外边距 （自身）
  • 设置正值，元素自身向下移动
  • 设置负值，元素自身向上移动
• margin-left 左外边距 （自身）
  • 设置正值，元素自身向右移动
  • 设置负值，元素自身向左移动
• margin-right 右外边距 （挤他人）
  • 设置正值，其右边的元素向右移动
  • 设置负值，其右边的元素向左移动
  • 上述说法并不准确，对于块元素，设置margin-right不会产生任何效果
• margin-bottom 下外边距 （他人）
  • 设置正值，其下边的元素向下移动
  • 设置负值，其下边的元素向上移动
  • 上述说法并不准确，对于块元素，会有垂直方向上的边距重叠问题（后面会细说）

元素在页面中是按照自左向右的顺序排列的，所以默认情况下

• 如果我们设置的左和上外边距则会移动元素自身
• 而设置下和右外边距会移动其他元素 (挤别人)— 不设置的情况下box1和box2是紧挨着的 ```css /统写一/ margin: 50px; /统写二/ margin: 70px 80px 90px 100px; /分别设置/

   margin: 50px;
   margin-top: 70px;
   margin-left: 80px;
   margin-right: 90px;
   margin-bottom: 100px;

  /注意 外边距会有负值的设置/

   margin: -50px;
   margin-top: -70px;
   margin-left: -80px;
   margin-right: -90px;
   margin-bottom: -100px;

```css
 <style>
     .box1{
        /*设置内容content*/
        /*计算内容区的大小时不需要看子类里面 */
        width:200px;
        height:200px;
        background-color:aqua;
        /*设置盒子边框border*/
        border: 10px red solid;
        /*设置盒子的内边距padding*/
        /*颜色采用的是默认背景颜色（同蓝色），无样式*/
        padding: 50px;
       /*设置外边距margin*/
       margin: 50px;
    }
    .boxinner{
        width: 100%; 
        height: 100%;
        background-color: yellow;
    }
    .boxout{
        width: 200px;
        height: 200px;
        background-color: violet;
    }
    </style>
<div class="box1">
        <div class="boxinner"></div>
    </div> 
 <div class="boxout"></div>

5. 元素在水平方向布局

元素在其父元素中水平方向的位置由以下七个属性共同决定

• 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 = 其父元素的宽度**
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束
则等式会自动调整调整的情况：

• 如果这七个值中没有auto的情况，则浏览器会自动调整**margin-right**值以使等式满足
  0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 ==> 0 + 0 + 0 + 200 + 0 + 0 + 500 = 800
• 如果这七个值中有auto的情况，则会自动调整auto值以使等式成立
  这七个值中有三个值可以设为 auto ：width、margin-left、maring-right
  1. 如果某个值为auto，则会自动调整auto的那个值以使等式成立
     200 + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 200 + 0 + 0 + 400 + 0 + 0 + 200 = 800
     auto + 0 + 0 + 200 + 0 + 0 + 200 = 600 ==> 400 + 0 + 0 + 200 + 0 + 0 + 200 = 800
     200 + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 200 + 0 + 0 + 400 = 800
  2. 如果宽度为auto，则宽度会调整到最大，其他auto的外边距会自动设置为0
     auto + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 0 + 0 + 0 + 600 + 0 + 0 + 200 = 800
     200 + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 600 + 0 + 0 + 0 = 800
     auto + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 0 + 0 + 0 + 800 + 0 + 0 + 0 = 800
  3. 如果两个外边距都为auto，则auto的外边距会自动均分以使等式成立；常用这个性质使其在父元素中居中；
     auto + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 300 + 0 + 0 + 200 + 0 + 0 + 300 = 800

• 其中，若七个值相加大于 父元素宽度，则margin-right=负值（七个值-父元素宽度）；即margin-right可以为负值；

  <style>
       .box{
           width: 800px;
           height: 200px;
           border: 10px red solid;
       }
       .index{
           width: 200px;
           height: 200px;
           background-color: yellowgreen;
           margin-left: auto;
           margin-right: auto;
       }
   </style>
  <div class="box">
       <div class="index"></div>
  </div>

  

  6. 垂直方向布局

  [ 元素溢出 ]

• 默认情况下父元素的高度被撑开；

• 不需要刻意满足等式；

• 子元素的大小超过了父元素，则子元素会从父元素中溢出；

   使用`overflow`/`overflow-x`/`overflow-y`属性来设置父元素如何处理溢出的子元素；<br />        overflow 的可选值：`visible`：溢出内容会在父元素外部位置显示，默认值；<br />                                         `hidden`：hidden 溢出内容会被裁剪，不会显示，对于文字形不太友好；<br />                                         `scroll`：scroll 生成两个滚动条，通过滚动条来查看完整的内容；<br />                                          `auto`：   auto 根据需要生成滚动条；<br /> 

    <style> 
        .box{
            width: 200px;
            height: 200px;
            background-color: green;
            overflow: scroll;
        }
    </style>

  [ 边距折叠 ]

  垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

  1. 兄弟元素 — 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

  兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）
  特殊情况：

• 如果相邻的外边距一正一负，则取两者的和

• 如果相邻的外边距都是负值，则取两者中绝对值较大的 ```css

<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
</ul>

![10b2460e-1a89-4275-a498-a1e7960de22e.png](https://cdn.nlark.com/yuque/0/2022/png/27397782/1650205829828-c5fe48f3-7b03-402c-a679-a080c3e35687.png#clientId=uc9af76aa-eebf-4&crop=0&crop=0&crop=1&crop=1&from=ui&height=144&id=ubff9481c&margin=%5Bobject%20Object%5D&name=10b2460e-1a89-4275-a498-a1e7960de22e.png&originHeight=326&originWidth=138&originalType=binary&ratio=1&rotation=0&showTitle=false&size=3261&status=done&style=none&taskId=uef83970c-a327-4e51-b32e-99fd7476eaf&title=&width=61)
```css
1.  去除与浏览器的边缘间距 
body {     margin: 0; }
2.  去除段落之间行距 
p {     margin: 0; }
3. 去除列表的上下外边距和左内边距 
ul {     margin: 0;     padding: 0; }

去除了列表的内外边距，但是发现前面的黑点也消失了；
我们先给ul加上一个margin-left，发现黑点并没有自动清除，而只是“缩进”了浏览器的左侧

ul {     margin: 0;     padding: 0;     margin-left: 16px;     
       /*列表样式设置为空*/
        list-style: none; 
   }
/*再将之前加的16px的margin-left样式去除 */

/*通配选择器*/
* {     margin: 0;     padding: 0;     list-style: none; }

浏览器默认样式去除方式三

1. 引入reset样式表单（常用）

官方地址：reset.css

/*在css中，style之前引入*/
<link rel="stylesheet" href="assets/reset.css">

/* http://meyerweb.com/eric/tools/css/reset/    
v2.0 | 20110126    License: none (public domain) */
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
abbr, acronym, address, big, cite, code, del, 
dfn, em, img, ins, kbd, q, s, samp, small, strike, 
strong, sub, sup, tt, var, b, u, i, center, dl, dt, 
dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed,  figure, figcaption, footer, 
header, hgroup,  menu, nav, output, ruby, section, summary,
time, mark, audio, video { 
          margin: 0;     padding: 0;     border: 0;     
          font-size: 100%;     font: inherit;     
          vertical-align: baseline; } 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure,  footer,
header, hgroup, menu, nav, section {     display: block; } 
body {     line-height: 1; } 
ol, ul {     list-style: none; } 
blockquote, q {     quotes: none; } 
blockquote:before, blockquote:after, q:before, q:after {     content: '';     content: none; } 
table {     border-collapse: collapse;     border-spacing: 0; }

我们可以看到reset.css的作用就是将各个内外边距置为0，将一些样式置为none

2. normalize样式

官方地址：normalize.css

<link rel="stylesheet" href="assets/normalize.css">

这里并没有去除所有样式，因为normalize的作用不同于reset。
reset是将所有默认样式去除，而normalize是将所有默认样式统一，这样在不同的浏览器里显示效果也是统一的

参考资料

1. CSS盒子模型：https://baike.baidu.com/item/CSS盒子模型/9814562?fr=aladdin↩︎
2. 谷歌、火狐浏览器 缩放为80% 时，margin值才正确：https://www.cnblogs.com/taohuaya/p/7642742.html↩︎
3. 内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上↩︎
4. margin (子元素远离父元素边框)：https://www.cnblogs.com/FlFtFw/p/9627026.html↩︎
5. 目前比较全的CSS重设(reset)方法总结：https://www.cnblogs.com/hnyei/archive/2011/10/04/2198779.html↩︎↩︎