Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 框模型的样式设置和定位机制
Blogger Information
Blog 28
fans 0
comment 0
visits 21917
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
框模型的样式设置和定位机制
暝皑祯π_π
Original
723 people have browsed it

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 固定定位，选择视口为选择基准

案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       body {
  9.         height: 2000px;
  10.         background-image: url(bg.jpg);
  11.         background-repeat: no-repeat;
  12.       }
  13.       /* 设置一个框，margin设置margin：auto使它在页面居中 */
  14.       .box {
  15.         width: 800px;
  16.         height: 500px;
  17.         margin: auto;
  18.         border: 1px solid;
  19.       }
  20.       /* z这是一个漂浮在右边的框，padding的背景色等于content的背景色，剥box1的总高度为131px*/
  21.       .box1 {
  22.         width: 100px;
  23.         height: 100px;
  24.         background-color: lightskyblue;
  25.         border: 1px solid;
  26.         margin-top: 20px;
  27.         padding-top: 10px;
  28.         float: right;
  29.         /* 相对定位，配合top,left,right,bottom使用 */
  30.         position: absolute;
  31.         top: 200px;
  32.         /* 因为box的margin被浏览器强制为boody的宽度，所有定位700px没有靠着右边 */
  33.         left: 700px;
  34.       }
  35.       .box2 {
  36.         width: 100px;
  37.         height: 100px;
  38.         border: 1px solid;
  39.         /* 单独设置右边框的样式 */
  40.         border-right: 5px solid yellow;
  41.         background-color: lightslategrey;
  42.       }
  43.       .box3 {
  44.         width: 100px;
  45.         height: 100px;
  46.         background-color: lime;
  47.         /* 固定定位，配合top,left,right,bottom使用 */
  48.         position: fixed;
  49.         right: 0;
  50.         bottom: 0;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <div class="box">
  56.       <div class="box1"></div>
  57.       <div class="box2"></div>
  58.     </div>
  59.     <div class="box3"></div>
  60.   </body>
  61. </html>

总结

  • 1.框模型的几大属性
    • margin（外边距）
    • border（边框）
    • padding (内边距)
    • content (内容区)

  • margin margin padding 属性的每条边都可以单独设置

  • 2 注意宽度的计算方式和计算公式

  • 3 display 改变的只是它的显示方式，并不能元素的本质
  • 4 块的浮动改变元素的排列方式
  • 5 用 position 定位时，注意位基准的选择
Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

Teacher's comments：你的代码呢, 照抄课件可不行
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post