精华内容
下载资源
问答
  • 盒模型

    2021-01-18 17:19:53
    总结盒模型- 什么是盒模型- 盒模型有那两种- 标准和怪异盒模型的转换- JS盒模型- 盒模型产生的双边距重合问题 - 什么是盒模型 在html页面中,每个元素都可以看作一个盒子,由content(内容)、margin(外边距)、...

    - 什么是盒模型

    在html页面中,每个元素都可以看作一个盒子,由content(内容)margin(外边距)padding(内边距)border(边框)四部分组成

    - 盒模型有那两种

    盒模型分为
    怪异盒模型(IE盒模型):border-sizing:border-box
    怪异盒模型是由width和左右margin组成
    width里包含padding和border

    标准盒模型:border-sizing:content-box
    标准盒模型是由width+左右padding+左右border+左右margin

    - 标准和怪异盒模型的转换

    标准盒模型转换:border-sizing:content-box
    怪异盒模型转换:border-sizing:border-box

    - JS盒模型

    获取和设置box的内容宽高

    设置dom元素的宽高样式 一般有三种方法:

    • 内联样式
    • style标签
    • 通过link标签引入

    获取方法

    IE:dom.currentStyle.width/height
    非IE:window.getComputedStyle(dom).width/height

    读音:current(康瑞特)
    height(害t)
    width(外死)

    dom.style.width/height 只试用于内联样式的获取

    dom.getBoundingClientRect().width/height/top/left
    拿到的是123中渲染以后的样式,还可以计算元素的绝对位置(距离视口viewport左顶点的距离)

    - 盒模型产生的双边距重合问题

    详情请看另一篇博客💨BfC

    展开全文
  • 盒子模型

    2021-03-17 21:39:15
    盒子模型标准盒模型怪异盒模型(IE盒子模型)box-sizing属性 标准盒模型 width表示范围只有content 怪异盒模型(IE盒子模型) width表示content+padding+border这三个部分的宽度 box-sizing属性 在CSS3中引入了...


    标准盒模型

    在这里插入图片描述
    width表示范围只有content


    怪异盒模型(IE盒子模型)

    在这里插入图片描述
    width表示content+padding+border这三个部分的宽度


    box-sizing属性

    在CSS3中引入了box-sizing属性,允许以特定的方式定义匹配某个区域的特定元素,即该属性可以指定盒子模型种类

    共有三种值:

    • content-box:表示标准的盒子模型
    • border-box:表示的是IE盒子模型
    • padding-box:让宽度包含了左右的padding+width

    来源于:https://www.imooc.com/article/68238

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,103
精华内容 12,041
热门标签
关键字:

盒模型