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>
总结
批改老师：
天蓬老师
批改状态：不合格
老师批语：你的代码呢, 照抄课件可不行
收藏
