微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > CSS3：框模型相关知识
博主信息
博文 39
粉丝 0
评论 0
访问量 39978
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS3：框模型相关知识
楷
原创
1011人浏览过

一、框模型相关知识

1. 元素框与框模型属性

几个概念：
框模型: 盒模型
元素框：无论什么元素, CSS 都会生成一个矩形框来显示
从内至外分别：
内容区content：元素框的中心区域
内边距padding
边框border
外边距margin
后三者都是可选的,宽度允许为 0
**记忆技巧：
逆时针方向；第二个值是表示左右。
边框border 可以设置宽度、样式和颜色。

2 重要术语

2.1 常规流

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

2.2 非置换元素

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

2.3 置换元素

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

2.4 根元素

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

2.5 块级框

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

2.6 行内框

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

2.7 行内块级框

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

2.8 容纳块

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

3. 调整元素框的大小

3.1 display属性

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

3.2 块级框

  • 块级框宽度,其实就是内容区宽度,由左内边界到右内边界的距离, 高度也一样
  • 元素内容宽度可以用box-sizing进行调整,默认为内容宽度(content-box)

3.3 box-sizing属性

  • box-sizing: 指示浏览器如何计算一个元素的总宽度和总高度
  • 盒模型中,元素的width/height默认只会应用到”内容区”
  • 当盒子中存在padding/border时,计算盒子总大小非常麻烦
序号 属性值 描述
1 content-box 默认值,width/height只应用到内容区
1 border-box width/height还包括padding,border
  • 即 width 总宽度是不变的, 宽度计算边界在边框上,所以 width=broder+padding+content
  • box-sizing: 适用于所有能设置 width 和 height 的所有元素
  • box-sizing: 通常只适用于块级, 也适合置换元素和行内块元素(因为都可以设置宽高)

4. 横向格式化

涉及七个属性

序号 属性 默认值 描述
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,要么具体值

5. 纵向格式化

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

序号 属性 默认值 描述
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 下外边距, 正负均可

5.1 纵向外边距二大特征

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

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

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

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

6.AUTO案例

6.1margin-left: auto;用法案例

  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>margin-left: auto;用法案例</title>
  7.     <style>
  8.         *:not(body){
  9.             outline: 1px dashed;
  10.         }
  11.         div{
  12.             width: 600px;
  13.             background-color: darkgray;
  14.         }
  15.         p{
  16.             margin-left: auto;
  17.             margin-right: 100px;
  18.             width: 200px;
  19.             background-color: chartreuse;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div>
  25.         <p>margin-left: auto;用法案例</p>
  26.     </div>
  27. </body>
  28. </html>

6.1演示图

6.2margin-right: auto;用法案例

  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>margin-right: auto;用法案例</title>
  7.     <style>
  8.         *:not(body){
  9.             outline: 1px dashed;
  10.         }
  11.         div{
  12.             width: 600px;
  13.             background-color: darkgray;
  14.         }
  15.         p{
  16.             margin-left: 100px;
  17.             margin-right: auto;
  18.             width: 200px;
  19.             background-color: chartreuse;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div>
  25.         <p>margin-right: auto;用法案例</p>
  26.     </div>
  27. </body>
  28. </html>

6.2演示图

6.3 width: auto;用法案例

  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>width: auto;用法案例</title>
  7.     <style>
  8.         *:not(body){
  9.             outline: 1px dashed;
  10.         }
  11.         div{
  12.             width: 600px;
  13.             background-color: darkgray;
  14.         }
  15.         p{
  16.             margin-left: 100px;
  17.             margin-right: 100px;
  18.             width: auto;
  19.             background-color: chartreuse;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div>
  25.         <p>width: auto;用法案例</p>
  26.     </div>
  27. </body>
  28. </html>

6.3 演示图

6.4 argin: auto;用法案例

  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>margin: auto;用法案例</title>
  7.     <style>
  8.         *:not(body){
  9.             outline: 1px dashed;
  10.         }
  11.         div{
  12.             width: 600px;
  13.             background-color: darkgray;
  14.         }
  15.         p{
  16.             margin: auto;
  17.             width: 200px;
  18.             background-color: chartreuse;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div>
  24.         <p>margin: auto;用法案例</p>
  25.     </div>
  26. </body>
  27. </html>

6.4演示图

6.5三色图

  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.         div{
  9.             width: 100px;
  10.             height: 100px;
  11.             border: 1px solid #000;
  12.         }
  13.         .div1{
  14.             background-color: lightgreen;
  15.             width: 100px;
  16.             height: 100px;
  17.             margin-bottom: 10px;
  18.         }
  19.         .div2{
  20.             background-color:lightskyblue;
  21.             width: 100px;
  22.             height: 100px;
  23.             margin-top: 10px;
  24.             margin-bottom: 10px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="div1">div1</div>
  30.     <div class="div2">div2</div>
  31. </body>
  32. </html>

演示图

总结：
1.本节课概念多，记不住，还好总算记住最重要的元素框。
2.通过diaplay可声明为各种方式，记住：改变的是显示方式, 并不能改变元素的本质。
3.非置换元素和置换元素是重要概念，只要记住外部引用的图片是置换元素，文本是非置换元素就容易理解了。
4.纵向格式化时，外边距选auto时强制为0，还有折叠现象。
其他的等有时间重看笔记和视频再慢慢理解。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：如果能理解auto的作用, 就算是合格了
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录