框模型的样式设置和定位机制

1. 元素框与框模型属性

无论什么元素, CSS 都会生成一个矩形框来显示,称为元素框
每个元素在页面加载的时候都是一个框，只是默认的情况下，元素框的边框隐藏，背景透明，所以我们只看到了元素框里面的内容。也就是是说。
元素框的中心区域是: 内容区（centent）, 这是必须要有的
其它区域,如内边距（padding）, 边框（border） , 外边距（margin），背景（background）都是可选的。

元素框

序号	名称	描述
1	内容区`content`	必须要有,它的四周区域是可选的
2	内边距`padding`	内容与边框之间的填充区域
3	边框`border`	边框可以将内容区与外界进行隔离
4	外边距 `margin`	多个盒子之间的间隙

padding,margin,border 的每一条边都可以单独设置属性
pading 和 margin 是背景透明的,所以只能设置宽度,不能设置颜色与样式

border(边框)

padding 设置所有边的书写格式 -设置四条边的顺序为’顺时间方向’

序号	值数量	举例	描述
1	四值	`border: 5px 10px 15px 20px`	上 — 右 — 下 — 左
2	三值	`border: 10px 5px`	上 — (左右相等) — 下
3	双值	`border: 5px 10px`	(上下相等) — (左右相等)
4	单值	`border: 5px`	上下左右全相等

单独设置每条边的书写格式

名称	描述
`padding-top：1px solid red`	上边框的宽度，样式和颜色
`padding-right：1px solid red`	上边框的宽度，样式和颜色
`padding-bottom：1px solid red`	上边框的宽度，样式和颜色
`padding-left：1px solid red`	上边框的宽度，样式和颜色

元素框的宽度计算

margin-left + border-left + padding-left + content +padding-right + border-right + margin-right

元素框的高度计算

margin-top + border-top + padding-top + content + padding-bottom + border-bottom + margin-bottom

元素框的宽度的计算标准

名称	描述
`box-sizing:content-box;`	定义内容区为准来计算宽度
`box-sizing:border-box;`	定义边框区为准来计算宽度

`display`属性

display: 属性, 默认值inline,适用所有元素, 不能继承
display 改变的是显示方式, 并不能改变元素的本质
例如,块级元素不允许做为行内元素后代, 并不会因为它显示为行内块而改变

重要术语

常规流

默认从左到右, 从上到下渲染页面, 这也符合大多数语言的书写顺序
可以通过: float / position / Flex / Grid 等布局方式,改变默认行为

非置换元素

内容包含在当前文档中的元素,例如<p>,段落文本就在当前的 HTML 文档中

置换元素

充当其它内容占位符的元素. 最常见的就是<img>
<img>通过src属性指向一张图片,渲染时该图片就会插入到该元素的位置
类似的还有<input>, 通过type属性指定要插入的表单元素类型
例如: <input type="radio">

根元素

在 html 文档, 就是指<html>元素, xml 文档中, 可以是任何元素

块级框

元素框在页面中,只有水平排列与垂直排列二种形式
块级元素生成的框, 总是前后换行, 垂直/纵向/堆叠排列
例如:段落<p>, 标题<h3>, 通用容器<div>等
任何元素通过display: block都可声明为块级框

行内框

简单说, 就是前后不换行排列的元素,例如<span>,<strong>,<a>
任何元素通过display: inline都可声明为行内框

行内块级框

内部特征像块级框, 外部特征像行内框,既可设置宽高,又能水平排列
行内块级框也置换元素非常相似: display: inline-bolck;

容纳块

容纳块是一种特殊的元素框,或者理解为专门充当元素框父级的专用元素框
每个元素框, 都必须相对于一个容纳块来放置
所有, 容纳块, 就是元素框体的布局上下文
在常规流布局中, 容纳块,是由离元素最近的那个生成列表/块级框/表格的祖辈元素的边界构成

横向格式化

涉及七个属性

序号	属性	默认值	描述
1	`margin-left`	auto	左外边距, 正负均可
2	`border-left`	0	左边框
3	`padding-left`	0	左内边距
4	`width`	auto	内容区宽度, 必须正值
5	`padding-right`	0	右内边距
6	`border-right`	0	右边框
7	`margin-right`	auto	右外边距, 正负均可

这七个属性影响着块级框的横向布局
本个属性相加应该等于父元素容纳块的宽度,而这个宽度就是父元素的 width 值
七个属性中,只有内容区和左右外边距,允许设置auto,其它属性要么 0,要么具体值

纵向格式化

与横向格式化一样,也涉及七个属性

序号	属性	默认值	描述
1	`margin-top`	auto	上外边距, 正负均可
2	`border-top`	0	上边框
3	`padding-top`	0	上内边距
4	`height`	auto	内容区高度, 必须正值
5	`padding-bottom`	0	下内边距
6	`border-bottom`	0	下边框
7	`margin-bottom`	auto	下外边距, 正负均可

纵向外边距二大特征

上下外边距的`auto`会被解析为`0`

横向格式化时, 左右外边距值为auto时, 由浏览器根据父元素空间自动计算
纵向格式化时, 上下外边距值为auto时, 浏览器会将它强制设置为0
这也是块元素无法直接设置”垂直居中”的原因(水平居中可以轻易实现)

纵向外边距会出现折叠现象

当多个元素框垂直方向排列时, 会出现纵向外边距折叠现象
此时, 二个元素框的上下外边距为 PK, 最终大者胜出

div 的 float（漂浮）和 position（定位）

漂浮（float）

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素

序号	属性	描述
1	left	往左漂浮
2	right	往右漂浮
3	clear	清除漂浮

position

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不同的是每种定位方式的基准选择不一样。

序号	属性	描述
1	static	静态定位，默认值
2	relative	相对定位，相对于元素原来的位置
3	absolute	绝对定位，选择包含它的父级选择基准
3	fixed	固定定位，选择视口为选择基准

案例

<!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>
      body {
        height: 2000px;
        background-image: url(bg.jpg);
        background-repeat: no-repeat;
      }
      /* 设置一个框，margin设置margin：auto使它在页面居中 */
      .box {
        width: 800px;
        height: 500px;
        margin: auto;
        border: 1px solid;
      }
      /* z这是一个漂浮在右边的框，padding的背景色等于content的背景色，剥box1的总高度为131px*/
      .box1 {
        width: 100px;
        height: 100px;
        background-color: lightskyblue;
        border: 1px solid;
        margin-top: 20px;
        padding-top: 10px;
        float: right;
        /* 相对定位，配合top,left,right,bottom使用 */
        position: absolute;
        top: 200px;
        /* 因为box的margin被浏览器强制为boody的宽度，所有定位700px没有靠着右边 */
        left: 700px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        border: 1px solid;
        /* 单独设置右边框的样式 */
        border-right: 5px solid yellow;
        background-color: lightslategrey;
      }
      .box3 {
        width: 100px;
        height: 100px;
        background-color: lime;
        /* 固定定位，配合top,left,right,bottom使用 */
        position: fixed;
        right: 0;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
    <div class="box3"></div>
  </body>
</html>

总结

1.框模型的几大属性
- margin（外边距）
- border（边框）
- padding (内边距)
- content (内容区)
margin margin padding 属性的每条边都可以单独设置
2 注意宽度的计算方式和计算公式
3 display 改变的只是它的显示方式，并不能元素的本质
4 块的浮动改变元素的排列方式
5 用 position 定位时，注意位基准的选择

1. 元素框与框模型属性

元素框

border(边框)

元素框的宽度计算

元素框的高度计算

元素框的宽度的计算标准

display属性

重要术语

常规流

非置换元素

置换元素

根元素

块级框

行内框

行内块级框

容纳块

横向格式化

纵向格式化

纵向外边距二大特征

上下外边距的auto会被解析为0

纵向外边距会出现折叠现象

div 的 float（漂浮）和 position（定位）

漂浮（float）

position

案例

总结

相关文章

`display`属性

上下外边距的`auto`会被解析为`0`