• css中的width,height,属性与盒模型的关系


    这段话很容易记住盒模型:

    css中盒子模型包含属性margin、border、padding、content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西(content);而填充(padding)就是怕 盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框(border)就是盒子本身了;至于边界(margin)则说明盒子摆放的时候的不 能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。

    w3c中的盒子模型的宽:包括margin+border+padding+width;同样w3c中的盒子模型的高:包括margin+border+padding+height;

    css中width与height的计算方法

        在 CSS 中,width 和 height 指的是内容区域(即content)的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸。

        但是在浏览器中实际的宽度与高度的值是按width=margin-left + margin-right + padding-left + padding-right + width与height=margin-left + margin-right + padding-left + padding-right + height这个计算的。所以当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。因此在我们布局网页的时候要将这一部分内容计算在内。

        例如:#div{margin:10px;padding:10px;border:10px;100px;height:100px;} 他的实际width为160px ,height为160px。

  • 相关阅读:
    天大复试机试练习_003
    C++随手记--字符串转数字
    C++标准库STL 之 我觉得应该有的方法——split
    apt-get 详解&&配置阿里源
    Nginx 图文详解
    MySQL数据库管理常用命令小结
    oracle数据库备份
    SqlServer数据库备份还原步骤
    mysql数据备份与恢复
    Tomcat架构
  • 原文地址:https://www.cnblogs.com/share123/p/3678614.html
Copyright © 2020-2023  润新知