zoukankan      html  css  js  c++  java
  • CSS3之Box-sizing浅谈

    前段时间在做一个界面的时候遇到一个问题,给一个长宽都是100%的页面DIV设置了border之后,这个DIV的长宽竟然超出了100%,这是怎么回事呢?这对于精通CSS的老大们来说不算问题,可是对于刚入行的我来说就显得有些木讷,于是找了很多资料了解之后才解决这种问题,这里分享一下,告诫自己不断学习的重要性。

    先看问题,这是我单独把这一问题的代码拿出来做的对比(原谅我一屏幕的 “原谅色”):

      

    从以上三张图可以很清楚的知道,要给DIV设置border之后默认情况下边界的宽度会在DIV的基础上再增加,所以想让border的宽度计算在DIV之内,至于要添加一句CSS属性box-sizing: border-box;,就可以解决这种问题了。

    如果你只是想解决这一问题,那么以上的内容就可以了,如果想搞清楚这个CSS实现的原理,建议好好学习一下CSS3的Box model;即盒模型,我也是看了这个之后才明白盒模型的具体的一些原理,这里推荐w3cplus的一篇文章Box Sizing,讲述的很详细。

    学会一门语言容易,精通一门语言却需要很长时间的积累,就像javaScript,学完c++学的js,简直半天就感觉自己都会了,可是真正写了一段时间才发现自己的自以为是,javascript也是一门需要深入学习才能明白的语言,原来我以为的以为并不是我以为的以为,谨记。

    2017-08-27 12:01:39

  • 相关阅读:
    自适应PC端网页制作使用REM
    iis express添加虚拟目录
    VC++2010组件安装失败解决办法
    AXURE 8弄一个轮播图的步骤
    浏览器在DPI缩放时变化问题
    数据结构综合训练1
    数据结构上机5二叉树遍历
    数据结构-约瑟夫环
    数据结构上机4队列-杨辉三角2
    数据结构上机4队列-杨辉三角1
  • 原文地址:https://www.cnblogs.com/yezhanpeng/p/7440004.html
Copyright © 2011-2022 走看看