zoukankan      html  css  js  c++  java
  • Css盒模型有哪几部分,标准盒模型和IE盒模型有哪些区别

    首先介绍Css的盒模型也就是标准盒模型(BOX Model)

    包含了 内容(content) 内边距(padding) 边框(border) 外边框(margin)

    这是大家经常用到的,也是现在的标准,其实IE的盒子结构和标准基本一样,但是IE盒模型content包含了padding 和  border

     标准盒子实际宽 width = content +margin+padding+border IE盒子的实际宽 width = content+margin

    box-sizing属性是用户界面属性里的一种,之所以介绍它,是因为这个属性跟盒子模型有关,而且在css reset中有可能会用到它。

    box-sizing : content-box|border-box|inherit;

    (1) content-box ,默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

      即总宽度=margin+border+padding+width

    (2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

      即总宽度=margin+width

    很多CSS框架,都会对盒子模型的计算方法进行简化。

    (3) inherit , 规定应从父元素继承 box-sizing 属性的值

    关于border-box的使用:

    1 一个box宽度为100%,又想要两边有内间距,这时候用就比较好
    2 全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

  • 相关阅读:
    安卓 日常问题 工作日志20
    安卓 日常问题 工作日志19
    安卓 日常问题 工作日志18
    安卓 日常问题 工作日志17
    安卓 日常问题 工作日志16
    对json进行排序处理
    Eclipse错误: 找不到或无法加载主类或项目无法编译10种解决大法!----------------------转载
    hibernate hql语句 投影查询的三种方式
    新的开始2018/6/8
    SSM搭建
  • 原文地址:https://www.cnblogs.com/czy960731/p/8520824.html
Copyright © 2011-2022 走看看