zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    【bzoj1901】dynamic ranking(带修改主席树)
    一堆乱七八糟绝不正经的排序算法
    bzoj2588 Spoj10628. count on a tree
    poj2104 K-th Number
    【bzoj 3595】: [Scoi2014]方伯伯的Oj
    bzoj1926: [Sdoi2010]粟粟的书架
    P3168 [CQOI2015]任务查询系统
    进程和线程
    History of AI
    es6
  • 原文地址:https://www.cnblogs.com/share123/p/3678614.html
Copyright © 2011-2022 走看看