首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入理解CSS盒模型、box-sizing属性及定位元素的水平和垂直居中技巧

作者：mobiledu2502872407 | 来源：互联网 | 2024-10-29 12:08
1.盒子模型1.1 盒子模型常用属性序号属性描述1margin外边距2border边框3padding内边距(内填充)4width内容区宽度5height高度6box-sizing如何计算盒模型总宽和

1.盒子模型


  • 1.1 盒子模型常用属性















































序号属性描述
1margin外边距
2border边框
3padding内边距(内填充)
4width内容区宽度
5height高度
6box-sizing如何计算盒模型总宽和总高
7backgroumd-clip规定背景的绘制区域


  • 1.2 演示代码

  2. lang="en">
  4. charset="UTF-8" />
  5. name="viewport" content=" />
  11. class="box one">
  • class="box two">
  • />
  • class="box parent">
  • class="box son">

    • 运行截图
    盒子模型


    2.用户自定义元素大小的计算方式(box-sizing 的用法)

    1. 尺寸计算公式：
    2. width = 内容的宽度
    3. height = 内容的高度
    4. 宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）

    1. width 和 height 属性包括内容，内边距和边框，但不包括外边距
    2. 尺寸计算公式：
    3. width = border + padding + 内容的宽度
    4. height = border + padding + 内容的高度

    2. lang="en">
    4. charset="UTF-8" />
    5. name="viewport" content=" />
    10. class="content-box">content-box内容
    11. class="border-box">border-box内容

    运行截图
    盒子尺寸计算


    3.元素的水平与垂直居中对齐

    1. 方法1：能快速实现垂居中
    2. /* 弹性盒子让子元素垂直居中 */
    3. display: flex;
    4. justify-content: center;
    5. align-items: center;
    6. 方法2：给父级元素添加相对定位，子盒子添加决定定位
    7. position: absolute;
    8. /* 让当前元素绝对定位的上下文充满整个父级容器 */
    9. /* 左上角开始 */
    10. top: 0;
    11. left: 0;
    12. /* 右小角结束 */
    13. right: 0;
    14. bottom: 0;
    15. /* 水平垂直居中 */
    16. margin: auto;

    2. lang="en">
    4. charset="UTF-8" />
    5. name="viewport" content=" />
    10. class="container">
    11. class="item">

    运行效果截图
    局部水平垂直居中


    2. lang="en">
    4. charset="UTF-8" />
    5. name="viewport" content=" />
    10. action="">

    11. 用户登录

    13. for="">Email:
    14. type="email" name="" id="" />

    17. for="">Password:
    18. type="password" name="" id="" />

    运行效果截图
    表单水平垂直居中


    4.总结


    推荐阅读
    author-avatar
    mobiledu2502872407
    这个家伙很懒，什么也没留下！
    Tags | 热门标签
    RankList | 热门文章
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有