zoukankan      html  css  js  c++  java
  • css盒子模型

    在 CSS 的盒子模型中,有两个重要的选项:box-sizing:content-box 和 box-sizing:border-box,content-box 被称为正常盒子模型,采用标准模式解析计算,也是默认模式;border-box 被称为怪异盒子模型,采用怪异模式解析计算;

    两种模式的区别:标准模式会被设置的 padding 撑开,而怪异模式则相当于将盒子的大小固定好,再将内容装入盒子。盒子的大小并不会被 padding 所撑开。

    标准模式:盒子占位总宽度/高度 = 内容区宽度 /高度+padding+border + margin 。

    怪异模式:盒子占位总宽度/高度 = width/height + margin 。

     

     切换模式属性:box-sizing 

    标准模式:content-box   标准盒模型的 width = content(内容区的宽度)。   盒子的实际大小 = border + padding + content内容大小(我们自己设置的宽高)

    怪异模式(css3盒模型):border-box    怪异盒模型的 width = content + padding + border 。内容的宽度 =我们设置的宽度减去 border和padding的值   等于说怪异盒模型的宽度和大小可以说是相等的

  • 相关阅读:
    MySQL 子查询
    MySQL 多表查询 内连接 和 外连接
    MySQL 分页
    MySQL 常用函数 流程控制
    Envoy基于文件系统的EDS动态配置
    Envoy学习笔记
    dapr入门学习
    浅谈cache
    List的初始化方式
    屌丝公司:设置服务器的时区、时间及时间同步
  • 原文地址:https://www.cnblogs.com/ndh074512/p/15397542.html
Copyright © 2011-2022 走看看