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的值   等于说怪异盒模型的宽度和大小可以说是相等的

  • 相关阅读:
    Redis的发布订阅
    Redis的事务
    Redis的持久化下
    Redis的持久化上
    Redis数据类型之Redis有序集合Zset(sorted set
    Redis数据类型之Redis哈希(Hash)
    Redis数据类型之Redis集合(Set)
    LeetCode#53-最大子序和
    LeetCode#442-数组中的重复数据
    LeetCode#1014-最佳观光组合
  • 原文地址:https://www.cnblogs.com/ndh074512/p/15397542.html
Copyright © 2011-2022 走看看