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

代码演示效果链接：

一、框模型（盒模型）相关知识

1、框模型（盒模型）五要素：width,height,padding,border, margin

2、padding、margin属性简写：padding/margin: 5px 10px 5px——第二个表示左右

3、border属性简写：border-right: 1px solid green—— 宽度 样式 前景色

4、小提示:

  • 轮廓outline: 位于 border 与 margin 之间,因为不占空间, 可暂时忽略
  • 轮廓没有针对各条边的属性,只能统一设置
  • 默认,内容区的背景色会延伸到内边距范围内,内边距是透明的
  • 外边距始终是透明的,可能透过它看到父元素
  • 内边距,边框不允许是负值, 而外边距允许

  • 内边距影响到盒子大小, 而外边距影响到盒子的位置

  • 边框颜色默认与内容区前景色相同,例如文本是黑色, 边框就是黑色

  • 如果边框是虚线,是可以透过边框线的间隙看到内容区元素的背景色

5、 调整元素框的大小

5.1 display属性

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

5.2 块级框

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

5.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: 通常只适用于块级, 也适合置换元素和行内块元素(因为都可以设置宽高)

6、 横向格式化

涉及七个属性

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

7、纵向格式化

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

序号 属性 默认值 描述
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用法演示

  • 横向格式化时, 左右外边距值为auto时, 由浏览器根据父元素空间自动计算
  • 纵向格式化时, 上下外边距值为auto时, 浏览器会将它强制设置为0
  1. <!-- 横向格式化时`auto`-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>横向格式化时`auto`</title>
  7.     <style>
  8.         div {
  9.             width: 800px;
  10.             background-color: darkgray;
  11.         }
  13.         /*life/right-auto:由浏览器根据父元素空间自动计算*/
  14.         p {
  15.             margin-left: auto; /*左边由浏览器根据父元素空间自动计算*/
  16.             margin-right: 100px;
  17.             width: 200px;
  18.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <div>
  25.     <p>更好更快</p>
  26. </div>
  28. </body>
  29. </html>
  31. <!-- 纵向格式化时上下外边距值为`auto`-->
  32. <!DOCTYPE html>
  33. <html lang="en">
  34. <head>
  35.     <meta charset="UTF-8">
  36.     <title>纵向格式化时上下外边距值为`auto`</title>
  37.     <style>
  38.         body {
  39.             width: 400px;
  40.         }
  42.         .one {
  43.             width: 100px;
  44.             height: 80px;
  45.             background-color: green;
  46.         }
  48.         /*纵向格式化时, 上下外边距值为`auto`时, 浏览器会将它强制设置为`0`*/
  49.         .two {
  50.             width: 100px;
  51.             height: 80px;
  52.             background-color: yellow;
  53.             /*margin-top: 10px;*/
  54.             margin-top: auto;
  56.         }
  58.     </style>
  59. </head>
  60. <body>
  61. <div class="one">1</div>
  62. <div class="two">2</div>
  63. </body>
  64. </html>

三、 flex布局知识

1、display: flex;设置容器为弹性容器

2、flex术语

2.1 flex-flow: row wrap;：设置容器水平排列，允许换行; flex-flow: cloum nowrap;：设置容器垂直排列，不允许换行;

2.2 justify-content:设置容器中弹性项目在主轴上的对齐方式：

  • justify-content: flex-start; 默认，左对齐
  • justify-content: flex-end; 右对齐
  • justify-content: center; 居中

分配主轴上剩余空间：

  • justify-content: space-between; 两端对齐
  • justify-content: space-around; 分散对齐
  • justify-content: space-evenly;平均对齐

2.3 align-items:设置项目在交叉轴上的排列方式

  • align-items:flex-start;默认，顶部
  • align-items:flex-end;下到上
  • align-items:center; 居中

2.4 align-content:设置项目在多行容器中在交叉轴上的对齐/排列方式

  • align-content:space-around;分散对齐
  • align-content: space-between;两端对齐
  • align-content: space-evenly;平均对齐

四、总结

本节重点掌握盒模行五要素及其属性的设置。
浮动和定位很少用，简单了解掌握一下。

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

批改状态：合格

老师批语：浮动在现代布局技术中, 基本上禁用了, 定位还是会用到的.. 相对定位基本上都用在定位父级上, 工作中, 绝对定位用得更多
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

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