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

    css盒子模型包括四点, content内容, padding填充, border边框, margin外边框。

    简单的比喻,送快递,车厢相当于父类div,假设为body, 那我们有一个快递盒子。 我们要寄一个杯子,content的大小是不变的,然后我害怕它破了,所以要加一些填充物,防止路上颠簸,这就是padding。当我们的padding+content超过我们盒子的大小,我只能换成大盒子,div的就被撑大了。然后盒子的选择,简单的纸质盒子可能不是很好,我要加厚的,这样border就变大了,这和padding一样,如果超过我们预设的大小,那么这个盒子最后呈现出来的肯定比原本大了。然后margin是相对于车厢我把箱子放在哪的。当我放到车尾的时候,要考虑盒子的宽度,否则margin的位置+大小超过了车厢长度,那盒子就跑出车厢了,这样类似于溢出啦。这里还有一个问题,至于如何溢出,当然与我们的position设置的有关了,absolute则是左边不动,即使盒子变大也是往后增长的,但是relative则不是,是盒子变大后,根据规则展示的。

    在测试的时候发现一个大问题,margin-top % 这个也是相对于父类的长度而言的,和height没关系。我在 360安全浏览器,qq浏览器,chrome, Firefox,世界之窗都测试了,都是这样子,不知道什么原因~~还是原本就这么回事

  • 相关阅读:
    数学之美
    作为一个程序员,你知道每天自己在做什么吗
    搭建ssm框架log4j日志
    webpack实践——DLLPlugin 和 DLLReferencePlugin的使用
    一些实用的技巧
    详解Vue 开发模式下跨域问题
    vue resource 携带cookie请求 vue cookie 跨域
    解决vue中element组件样式修改无效
    ES6 Promise 异步操作
    js 字符串操作函数
  • 原文地址:https://www.cnblogs.com/hhjiang14/p/4318212.html
Copyright © 2011-2022 走看看